高德地图画渐变线

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

 如果需要多段线,自己循环拼一下就可以了,方法返回多个小线段组成的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],//线条pathstrokeColor: 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.hqwc.cn/news/258559.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第一课【习题】HarmonyOS应用/元服务上架

元服务发布的国家与地区仅限于“中国大陆” 编译打包的软件包存放在项目目录build > outputs > default下 创建应用时&#xff0c;应用包名需要和app.json5或者config.json文件中哪个字段保持一致&#xff1f; 发布应用时需要创建证书&#xff0c;证书类型选择什么…

粤能环保亮相迪拜COP28,智能技术铸就运河城市可持续未来

在全球应对气候变化的重要会议——迪拜COP28大会上&#xff0c;运河城市面临的独特环境挑战引起了广泛关注。随着城市化进程的加快&#xff0c;运河城市在处理固体废物、减少温室气体排放以及维持水资源安全方面面临着严峻考验。智能垃圾分类作为应对这些挑战的有效途径&#x…

2024年强烈推荐mac 读写NTFS工具Tuxera NTFS for Mac2023中文破解版

大家好啊&#xff5e;今天要给大家推荐的是 Tuxera NTFS for Mac2023中文破解版&#xff01; 小可爱们肯定知道&#xff0c;Mac系统一直以来都有一个小小的痛点&#xff0c;就是无法直接读写NTFS格式的移动硬盘和U盘。但是&#xff0c;有了Tuxera NTFS for Mac2023&#xff0c;…

ATFX汇市:11月非农就业报告来袭,美指提前高位回落

ATFX汇市&#xff1a;今日21:30&#xff0c;美国劳工部劳动统计局将公布美国11月非农就业报告&#xff0c;其中两项数据需重点关注。其一&#xff0c;11月季调后非农就业人口&#xff0c;前值为增加15万人&#xff0c;预期值增加17.5万人。由于10月份的非农数据出现爆冷&#x…

H5ke14--1--拖放

drag,drop 被拖动元素,目标(释放区) 元素要设置dragable属性:true,false,auto 被拖动元素上面有三个事件,drag,dragend,按下左键,移动种,鼠标松,这三个事件一般只用获取我们的被拖动元素 event是可以继承的,mouseevent鼠标事件,dragevent拖放事件,前面都是一个个继承的 释放…

鸿蒙4.0开发笔记之ArkTS语法基础之数据传递与共享详细讲解(十八)

文章目录 一、路由数据传递&#xff08;router&#xff09;1、路由数据传递定义2、路由数据传递使用方法3、数据传递两个页面的效果 二、页面间数据共享&#xff08;EntryAbility&#xff09;1、定义2、实现案例3、避坑点 三、数据传递练习 一、路由数据传递&#xff08;router…

SAP物料会计视图的价格确定MLAST为空后台补录

物料10013812 工厂会计视图的价格确定为空&#xff0c;前台目前无法修改&#xff0c;申请修改底表&#xff0c;将价格确定调整为2 解决&#xff1a; 该字段涉及&#xff1a;MBEW表和CKMLHD表的MLAST字段两个地方&#xff0c;经修改后&#xff0c;前后台数据一致。 只改技术信…

自动化运维工具-ansible部署

首先我们来谈一下&#xff0c;为什么要引入自动化运维呢&#xff1f; 引入自动化运维的目的是为了提高运维效率、降低人工操作的错误率、减少重复性的工作、提高系统的可靠性和稳定性。传统的手动运维方式存在以下问题&#xff1a; 出现了大量的人工干预&#xff0c;运维人员需…

AI伦理专题报告:2023年全球人工智能伦理治理报告

今天分享的是人工智能系列深度研究报告&#xff1a;《AI伦理专题报告&#xff1a;2023年全球人工智能伦理治理报告》。 &#xff08;报告出品方&#xff1a;钛媒体国际智库&#xff09; 报告共计&#xff1a;239页 摘要 人工智能(ArtificialIntelligence)作为新一轮科技革命…

RepVGG,结构重参数化让VGG风格的ConvNets再次强大起来

论文&#xff1a;RepVGG Making VGG-style ConvNets Great Again 链接&#xff1a;https://arxiv.org/abs/2101.03697 代码链接&#xff1a;https://github.com/DingXiaoH/RepVGG 发表刊物&#xff1a;cvpr2021 作者&#xff1a;Xiaohan Ding, Xiangyu Zhang, Ningning Ma, Jun…

为什么Java程序员需要掌握多线程?揭秘并发编程的奥秘

为什么Java程序员需要掌握多线程&#xff1f;揭秘并发编程的奥秘 个人简介前言多线程对于Java的意义&#x1f4cc;1.提高程序性能&#xff1a;&#x1f4cc;2 提高用户体验&#xff1a;&#x1f4cc;3支持并发处理&#xff1a;&#x1f4cc;4 资源共享和同步&#xff1a;&#…

Nacos 2.3.0 正式发布,堪称最强!

Nacos 2.3.0的发布&#xff0c;可以说是一场关于配置管理的小型革命。它不仅仅是一个版本的迭代&#xff0c;更是一个桥梁&#xff0c;将我们熟悉的Nacos配置管理与Kubernetes的世界紧密相连。 Nacos 2.3.0的新亮点 在2.3.0-BETA版本的基础上&#xff0c;Nacos 2.3.0带来了以…