高德地图画渐变线

高德地图画渐变线,思路是将线和颜色均分为多个小线段和小颜色,实现渐变,类似于下图。

 如果需要多段线,自己循环拼一下就可以了,方法返回多个小线段组成的polyline数组。

/*
    * 高德地图画渐变线
    * author: liyun
    * params:
    *   polygonArr线段两点坐标,必传
    *   color线两点间的渐变颜色(只能两个颜色渐变,如需要多个渐变色,就将线段切割为多个小线段,只能传rgb()格式色值,如需要传十六进制色值需要转换下),必传
    * */
function drawLinearGradientPolyline(polygonArr, color) {
      var dis = AMap.GeometryUtil.distance(polygonArr[0], polygonArr[1]);//计算两点件距离
      var granularity = Math.round(dis / 80);//计算粒度,如果想粒度精细些就将80改小,越小越精细

      var x_cz = polygonArr[1][0] - polygonArr[0][0]; //两点间横坐标差
      var y_cz = polygonArr[1][1] - polygonArr[0][1]; //两点间纵坐标差

      var x1 = x_cz / granularity; //分解为多个小点后,两小点间的横坐标差值
      var y1 = y_cz / granularity; //分解为多个小点后,两小点间的纵坐标差值

      //取出rbg颜色值,用于后面计算
      var colorList = [];
      color.forEach(item => {
        colorList.push(item.substring(4, item.length - 1).split(','));
      })

      var r_cz = colorList[1][0] - colorList[0][0]; //两颜色r值差
      var g_cz = colorList[1][1] - colorList[0][1]; //两颜色g值差
      var b_cz = colorList[1][2] - colorList[0][2]; //两颜色b值差

      var r1 = r_cz / granularity; //分解为多个小颜色后,两小颜色r值差
      var g1 = g_cz / granularity; //分解为多个小颜色后,两小颜色g值差
      var b1 = b_cz / granularity; //分解为多个小颜色后,两小颜色b值差

      var polygonArr_detail = [];
      var colorList_detail = [];

      //分解为多个点和多个对应的颜色
      for(var i = 0; i < (granularity + 1); i++) {
        polygonArr_detail.push([
          polygonArr[0][0] + (x1*i),
          polygonArr[0][1] + (y1*i)
        ])
        colorList_detail.push([
          parseInt(Number(colorList[0][0]) + (r1*i)),
          parseInt(Number(colorList[0][1]) + (g1*i)),
          parseInt(Number(colorList[0][2]) + (b1*i))
        ])
      }
      //将颜色值加上rbg()
      var colorList_detail1 = colorList_detail.map(item => {
        return 'rgb(' + item.join(",") + ')';
      })

      var polylineArr = polygonArr_detail.map((item, index) => {//创建线
        var polyline1 = new AMap.Polyline({
          path: [item, polygonArr_detail[index + 1]? polygonArr_detail[index + 1]: item],//线条path
          strokeColor: colorList_detail1[index], //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 8,    //线宽
          isOutLine: true,
          borderWeight: 4,
          outlineColor: '#000000',
          lineCap: 'round'
        })
        return polyline1
      })

      return polylineArr;
}

//调用
var polylineGroup = drawLinearGradientPolyline([[116.403322, 39.920255],
        [116.410703, 39.897555]], ['rgb(255,255,0)', 'rgb(255,0,0)']);

//画在地图图层上,map是地图对象
var mapOverLayer= new AMap.OverlayGroup();
map.mapOverLayer(mapOverLayer);//新建图层,将图层添加到地图上
mapOverLayer.addOverlay(polylineGroup);//将处理好的线添加到图层上
map.setFitView(polylineGroup);//定位到线的位置

注意:只能两个颜色渐变,如需要多个渐变色,就将线段切割为多个小线段,只能传rgb()格式色值,如需要传十六进制色值需要转换下,网上好多方法

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/229402.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

PHP基础 - 输入输出

在 PHP 中,有多种方法可以用来输出内容。下面是其中的几种: 1、echo: 这是最常见的输出语句之一,可以输出一个或多个字符串。它是一个语言结构,可以省略括号。使用示例如下: <?php // 使用 echo 语句输出一个字符串 echo "Hello, world!\n";// 可以使用…

3.添加与删除字段

添加字段与删除字段 1.添加字段 因为甲方的业务需求是不停变化的&#xff0c;所以在数据库操作中&#xff0c;添加字段可是常有的事。一个完整的字段包括&#xff1a;字段名、数据类型和完整性约束。 语法规则为&#xff1a; ALTER TABLE 表名 ADD 新字段名 数据类型 [约束条…

解决:During handling of the above exception, another exception occurred

解决&#xff1a;During handling of the above exception, another exception occurred 文章目录 解决&#xff1a;During handling of the above exception, another exception occurred背景报错问题报错翻译报错位置代码报错原因解决方法参考内容&#xff1a;今天的分享就到…

用html+css+js做canvas烟花模拟网页动画代码

圣诞节、元旦就要到了&#xff0c;本案例我们将用htmlcssjs做canvas烟花模拟网页动画代码&#xff0c;程序员的浪漫这不就来了嘛&#xff0c;与家人朋友一起看烟花吧&#xff01; 附源码 烟花模拟器 <!-- App --> <div class"container"><div class&…

区块链创新应用场景不断拓展,实现去中心化

小编介绍&#xff1a;10年专注商业模式设计及软件开发&#xff0c;擅长企业生态商业模式&#xff0c;商业零售会员增长裂变模式策划、商业闭环模式设计及方案落地&#xff1b;扶持10余个电商平台做到营收过千万&#xff0c;数百个平台达到百万会员&#xff0c;欢迎咨询。 区块…

gitee配置

注册配置gitee Gitee官网 进入官网之后&#xff0c;有账号直接登录&#xff0c;没有账号注册一个新的账号 下载安装git客户端 官网地址 下载完成&#xff0c;一路直接点击安装直接安装成功 检查是否安装成功 鼠标留在桌面–>右击–>出现Git GUI Here/Git Bash Her…

【LeetCode】每日一题 2023_12_7 出租车的最大盈利(动态规划)

文章目录 刷题前唠嗑题目&#xff1a;出租车的最大盈利题目描述代码与解题思路 刷题前唠嗑 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01; 题目&#xff1a;出租车的最大盈利 题目链接&#xff1a;2008. 出租车的最大盈利 题目描述 代码与解题思路 func …

计算机网络:网络层上(数据平面)

文章目录 前言一、概述1.网络服务模型2.连接建立 二、路由器组成1.路由器结构概况输入端口的功能 2.IP&#xff08;Internet Protocol&#xff09;IPV4IPV6 3.通用转发和SDN 总结 前言 网络层分两部分讲解&#xff0c;本篇文章讲解数据平面的内容&#xff1a;路由器组成、IP协…

麻雀1号开发板开箱

麻雀1号是上海睿赛德电子科技有限公司全新推出的一款高性价比音频Wi-Fi开发板&#xff0c;内置RT-Thread&#xff0c;主打 Wi-Fi、音频和摄像头拍照功能&#xff0c;配合丰富的组件及例程&#xff0c;可降低多媒体应用的开发门槛。 开发板介绍 正面&#xff1a; 背面&#x…

目标检测mAP计算以及coco评价标准

这篇是我对哔哩哔哩up主 霹雳吧啦Wz 的视频的文字版学习笔记 感谢他对知识的分享 讲一下目标检测中的一些常见的指标 在我们使用目标检测网络训练时 最后在验证集上会得到一个coco的评价列表 就像我们图中给的这一系列参数列表一样 我们再进一步引入两个概念 第一个叫做precisi…

DBeaver 如何在没有外网的情况下连接数据库(下载驱动)

1.选择自己要连接的数据库 2.编辑驱动 3.选择你自己通过maven或者别的渠道下载的对应数据库的jar

Python并发-线程和进程

一、线程和进程对应的问题 **1.进程&#xff1a;**CPU密集型也叫计算密集型&#xff0c;指的是系统的硬盘、内存性能相对CPU要好很多&#xff0c;此时&#xff0c;系统运作大部分的状况是CPU Loading 100%&#xff0c;CPU要读/写I/O(硬盘/内存)&#xff0c;I/O在很短的时间就可…

论文阅读《Learning Adaptive Dense Event Stereo from the Image Domain》

论文地址&#xff1a;https://openaccess.thecvf.com/content/CVPR2023/html/Cho_Learning_Adaptive_Dense_Event_Stereo_From_the_Image_Domain_CVPR_2023_paper.html 概述 事件相机在低光照条件下可以稳定工作&#xff0c;然而&#xff0c;基于事件相机的立体方法在域迁移时性…

人工麝香市场分析:中国市场年需求量超过15吨

人工麝香作为濒危动物药材麝香的替代品&#xff0c;等同天然麝香配方使用。 是国家重大科研成果和保密品种&#xff0c;用人工麝香生产中成药品种近400种&#xff0c;涵盖中成药常用剂型。 是珍稀动物药材代用品研究的重大突破&#xff0c;为其它珍稀动物药材的应用开辟了一条重…

案例060:基于微信小程序考试系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

深度学习还可以从如下方面进行创新!!

文章目录 一、我认为可以从如下5个方向进行创新总结 一、我认为可以从如下5个方向进行创新 新的模型结构&#xff1a;尽管现在的深度学习模型已经非常强大&#xff0c;但是还有很多未被探索的模型结构。探索新的模型结构可以带来更好的性能和更低的计算成本。 新的优化算法&a…

基于ssm家庭理财系统源码和论文

基于ssm家庭理财系统源码和论文743 idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 环境&#xff1a; jdk8 tomcat8.5 开发技术 ssm 摘要 随着Internet的发展&#xff0c;人们的日常生活已经离不开网络。未来人们的生活与工作将变得越来越数字化&#xff…

力扣面试题 08.12. 八皇后(java回溯解法)

Problem: 面试题 08.12. 八皇后 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 八皇后问题的性质可以利用回溯来解决&#xff0c;将大问题具体分解成如下待解决问题&#xff1a; 1.以棋盘的每一行为回溯的决策阶段&#xff0c;判断当前棋盘位置能否放置棋子 2.如何判…

表单小程序作用体现在哪

表单的用途非常广泛&#xff0c;它是线上收集信息或用户预约/需求服务的重要方式&#xff0c;对商家来说如今线上平台非常多&#xff0c;生意开展的形式也越来越多&#xff0c;比如常见的预约、报名、收款、产品支付等都可以通过表单实现。 接下来啊让我们看看通过【雨科】平台…

.NET使用分布式网络爬虫框架DotnetSpider快速开发爬虫功能

前言 前段时间有同学在微信群里提问&#xff0c;要使用.NET开发一个简单的爬虫功能但是没有做过无从下手。今天给大家推荐一个轻量、灵活、高性能、跨平台的分布式网络爬虫框架&#xff08;可以帮助 .NET 工程师快速的完成爬虫的开发&#xff09;&#xff1a;DotnetSpider。 注…
最新文章