高德地图画渐变线

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

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

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

相关文章

【WPS】Excel表格数据透视表

数据少量还好&#xff0c;如果输数多起来就麻烦了&#xff0c;最近需要汇报一个情况。 描述 譬如&#xff1a;开发&#xff08;80.00%->91.16%&#xff09;&#xff1a;共计43项&#xff08;本周新增1项&#xff09;&#xff0c;本周新增已完成2项&#xff0c;共已完成36项…

wps中将横轴和纵轴数据互换

wps中将横轴和纵轴数据互换 今天遇到个比较奇怪的需求, 要把excel数据的横轴和纵轴互换 在我理解中程序做这种事情应该很简单的 结果搜索好多教程都是说怎么讲图表xy轴互换 终于找到如何转表格数据的特此记录一下 复制需要转换的内容新建一个sheet选择性粘贴(CtrlAltV)选择转置…

Linux高级系统编程 - 5 管道

复制文件描述符 dup函数 作用 : 文件描述符复制 语法 #include <unistd.h> int dup(int oldfd); 参数 : 所需复制的文件描述符 返回值 复制得到的文件描述符 功能 : 从文件描述符表中 , 寻找一个最小可能的文件描述符&#xff08;通过返回值返回&#xff09;作为…

Java--作用域,构造器,this

作用域基本使用 在Java编程中&#xff0c;主要的变量就是属性&#xff08;成员变量&#xff09;和局部变量。 我们说的局部变量一般是指在成员方法中定义的变量 Java中作用域的分类 全局变量&#xff1a;也就是属性&#xff0c;作用域为整个类体 局部变量&#xff1a;也就是除了…

RHEL8_Linux访问NFS存储及自动挂载

本章主要介绍NFS客户端的使用 创建FNS服务器并通过NFS共享一个目录在客户端上访问NFS共享的目录自动挂载的配置和使用 1.访问NFS存储 前面介绍了本地存储&#xff0c;本章就来介绍如何使用网络上的存储设备。NFS即网络文件系统&#xff0c;所实现的是 Linux 和 Linux 之间的共…

新手搭建知识付费平台必备攻略:如何以低成本实现高转化?

我有才知识付费平台 一、引言 随着知识经济的崛起&#xff0c;越来越多的知识提供者希望搭建自己的知识付费平台。然而&#xff0c;对于新手来说&#xff0c;如何以低成本、高效率地实现这一目标&#xff0c;同时满足自身需求并提高客户转化率&#xff0c;是一大挑战。本文将…

SPA, SEO, SSR总结

SPA单页面Web应用 SPA(Single page web application) 单页面Web应用 Web不再是一张张页面,而是一个整体的应用,一个由路由系统,数据系统,页面(组件)系统等等,组成的应用程序, 让用户不需要每次与服务器进行页面刷新来获得新的内容, 从而提供了更快,跟流畅的用户体验, 在SPA中…

参与创作①周年啦~

写在前面 今天看了消息才知道&#xff0c;原来开始创作已经一年了。此篇无干货&#xff0c;纯白话&#xff0c;纯记录。 机缘 参与CSDN创作已经一年有余&#xff0c;犹记得第一篇博文是为了整理好所学内容&#xff0c;方便自己复习。没想到后面也陆陆续续发了些其他内容&…

关于read函数阻塞的问题

关于read函数阻塞的问题 上一篇文章IO多路转接之select 末尾提到了一点&#xff0c;服务端读取每次是读取10个字节的&#xff0c;如果超过10个字节&#xff0c;需要读取多次&#xff0c;但是客户端只会read一次&#xff0c;第二次read的时候&#xff0c;直接阻塞了。 那么如何…

Windows server flask

1、Windows server 通过python的flask执行命令 from flask import Flask, request, abort import subprocess from flask_basicauth import BasicAuth app Flask(__name__) # 获取url是进行账号密码认证&#xff0c;设置url的账号密码 app.config[BASIC_AUTH_USERNAME] 账号…

12.8作业

1.头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QDebug> #include <QMovie>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nul…

spring-boot-starter-validation是什么Validation参数校验使用概要

spring-boot-starter-validation是什么&Validation参数校验使用概要 来源Valid和Validated的用法(区别)引入依赖Valid和Validated的用法 在日常的项目开发中&#xff0c;为了防止非法参数对业务造成的影响&#xff0c;需要对接口的参数做合法性校验&#xff0c;例如在创建用…

基于Docker安装Mysql:5.5

一、拉取镜像 sudo docker pull mysql:5.5二、启动mysql镜像 1. 创建MySQL的conf目录和data目录 mkdir -p /home/docker/mysql/conf /home/docker/mysql/data2. 利用镜像创建容器 sudo docker run --restartalways -d --name mysql -v /home/docker/mysql/conf/my.cnf:/etc…

系统设计-微服务架构

典型的微服务架构图 下图展示了一个典型的微服务架构。 负载均衡器&#xff1a;它将传入流量分配到多个后端服务。CDN&#xff08;内容交付网络&#xff09;&#xff1a;CDN 是一组地理上分布的服务器&#xff0c;用于保存静态内容以实现更快的交付。客户端首先在 CDN 中查找内…

methods

类型&#xff1a;{ [key: string]: Function } 详细&#xff1a; methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法&#xff0c;或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。 注意&#xff0c;不应该使用箭头函数来定义 method 函数 (例如…

临床骨科常用的肩关节疾病量表,医生必备!

根据骨科医生的量表使用情况&#xff0c;常笑医学整理了临床骨科常用的肩关节疾病量表&#xff0c;为大家分享临床常见的肩关节疾病量表评估内容&#xff0c;均支持量表下载和在线使用&#xff0c;建议收藏&#xff01; 1.臂、肩、手功能障碍&#xff08;disabilites of the ar…

useradd 在Linux原生应用开发过程中的简单应用

useradd命令是用于在Linux系统中创建新用户的命令。它可以创建一个新用户&#xff0c;并设置该用户的属性、家目录、默认shell等。useradd命令实际上是一个包装了一系列系统调用的高级命令。 在Linux系统中&#xff0c;用户信息存储在/etc/passwd文件中。当执行useradd命令时&…

flstudio21破解汉化版2024最新水果编曲使用教程

​ 如果你一直梦想制作自己的音乐(无论是作为一名制作人还是艺术家)&#xff0c;你可能会想你出生在这个时代是你的幸运星。这个水果圈工作室和上一版之间的改进水平确实令人钦佩。这仅仅是FL Studio 21所提供的皮毛。你的音乐项目的选择真的会让你大吃一惊。你以前从未有过这…

ChatGPT的常识

什么是ChatGPT&#xff1f; ChatGPT是一个基于GPT模型的聊天机器人&#xff0c;GPT即“Generative Pre-training Transformer”&#xff0c;是一种预训练的语言模型。ChatGPT使用GPT-2和GPT-3两种模型来生成自然语言响应&#xff0c;从而与人类进行真实的对话。 ChatGPT的设计…

2023年全球软件开发大会(QCon广州站2023)-核心PPT资料下载

一、峰会简介 本次峰会包含&#xff1a;泛娱乐时代的边缘计算与通讯、稳定性即生命线、下一代软件架构、出海的思考、现代数据架构、AGI 与 AIGC 落地、大前端技术探索、编程语言实战、DevOps vs 平台工程、新型数据库、AIGC 浪潮下的企业出海、AIGC 浪潮下的效能智能化、数据…