高德地图画渐变线

news2024/10/7 4:27:08

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

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

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

相关文章

记一次由 jedis 引发的离谱选学问题

背景 我的应用中&#xff0c;使用 jedis 作为连接 redis 的客户端&#xff0c;一直在用的好好的&#xff0c;后来有一个新的组件&#xff0c;也需要使用 redis&#xff0c;但是组件是内部封装的&#xff0c;我只能提供一个 StringReidsTempalte&#xff0c;所以我基于应用本身…

GPTs的创建与使用,自定义GPTs中的Actions示例用法 定义和执行特定任务的功能模块 通过API与外部系统或服务的交互

Name 等 Logo:自动生成 Name 介绍 Description 介绍 Instructions 要求或命令等 比如用中文回复&#xff0c;角色。 Knowledge 上传你的知识库&#xff0c;如果你有某一垂直行业的数据&#xff0c;基于数据来回答。比如我有某个芯片的指令集。 Capabilities 都要 Actions&…

ELasticsearch:什么是语义搜索?

语义搜索定义 语义搜索是一种解释单词和短语含义的搜索引擎技术。 语义搜索的结果将返回与查询含义匹配的内容&#xff0c;而不是与查询中的单词字面匹配的内容。 语义搜索是一组搜索引擎功能&#xff0c;其中包括根据搜索者的意图及其搜索上下文理解单词。 此类搜索旨在通过…

算法Day15 农场耕作

农场耕作 Description 你是一位农夫&#xff0c;拥有一块 m x n 的小农场。你打算在这块农场上耕种不同的农作物&#xff0c;以便在季节结束时获得最大的收成。 农场被分割成网格&#xff0c;每个格子代表不同的耕种区域&#xff0c;你可以选择每次向下或向右移动一格来耕作。…

解决 Element-ui中 表格(Table)使用 v-if 条件切换后,表格的列的筛选不显示了

解决方法 在每个需要使用 v-if 或 v-else 的 el-table-column 上增加 key 作为唯一标识&#xff0c;这样渲染的时候就不会因为复用原则导致列数据混乱了。关于key值&#xff0c;一般习惯使用字段名&#xff0c;也可随机生成一个值&#xff0c;只要具有唯一性就可以。

离散型制造企业MES系统行业应用

离散型制造企业具有产品种类多、生产周期长、生产过程复杂等特点&#xff0c;因此&#xff0c;采用先进的生产管理系统对于提高企业的生产效率和管理水平至关重要。其中&#xff0c;制造执行系统&#xff08;MES&#xff09;在离散型制造企业中得到了广泛应用&#xff0c; 一、…

RedisTemplate操作哈希数据

RedisTemplate操作哈希数据 概述常用方法添加哈希数据添加hashMap值判断hashkey 获取哈希数据获取属性值获取hashMap值。获取键值对。获取map键是否有值判断是否有map键。获取键。获取长度。集合方式获取值。匹配获取键值对 自增以double值大小自增。以long值大小自增。 修改删…

node.js和npm的安装与环境配置(2023最新版)

目录 安装node.js测试是否安装成功测试npm环境配置更改环境变量新建系统变量 安装node.js 1、进入官网下载&#xff1a;node.js官网 我选择的是windows64位的&#xff0c;你可以根据自己的实际情况选择对应的版本。 2、下载完成&#xff0c;安装。 打开安装程序 接受协议 选…

浅谈5G基站节能及数字化管理解决方案的设计与应用-安科瑞 蒋静

截至2023年10月&#xff0c;我国5G基站总数达321.5万个&#xff0c;占全国通信基站总数的28.1%。然而&#xff0c;随着5G基站数量的快速增长&#xff0c;基站的能耗问题也逐渐日益凸显&#xff0c;基站的用电给运营商带来了巨大的电费开支压力&#xff0c;降低5G基站的能耗成为…

js 复制粘贴板,当clipboardjs 不好使怎么办?

最近项目中做一个很常见的复制粘贴的功能耽误了比较长的时间特此记录&#xff0c;在往常这个功能直接用 clipboard 做就行了&#xff0c;但是这次却发现复制功能不好使了&#xff0c;虽然走了复制成功的回调&#xff0c;但是粘贴板并没有复制的内容。代码如下 <div v-for&q…

使用LangSmith来快速学习LangChain

好风凭借力&#xff0c;送我上青云&#xff01; 什么是LangSmith LangSmith is a platform for building production-grade LLM applications. It lets you debug, test, evaluate, and monitor chains and intelligent agents built on any LLM framework and seamlessly int…

oracle12c的job没有自动执行,手动运行提示任务1%正在运行问题

有个oracle12c上的job&#xff0c;提交到dbms_job&#xff0c;不知道什么时候开始&#xff0c;停下来了&#xff0c;没有自动运行。 手动关闭这个job&#xff0c;重新打开&#xff0c;不行&#xff1b;删除JOB&#xff0c;重新创建&#xff0c;也不行。 参考拙作&#xff1a; …

Leetcode 39 组合总和

题意理解&#xff1a; 一个 无重复元素 的整数数组 candidates 和一个目标整数 target 从candidates 取数字&#xff0c;使其和 target &#xff0c;有多少种组合&#xff08;candidates 中的 同一个 数字可以 无限制重复被选取&#xff09; 这道题和之前一道组合的区别&am…

【USB、串口、COM口、TTL、RS-232、RS-485区别详解】

USB&#xff0c;串口&#xff0c;COM口&#xff0c;TTL&#xff0c;RS-232&#xff0c;RS-485区别详解 1. USB&#xff0c;串口&#xff0c;COM口&#xff0c;TTL&#xff0c;RS-232&#xff0c;RS-485区别详解2 USB转TTL2 RS-232转TTL3 USB4 UART5 STM32串口异步通讯需要定义的…

2024年AI视频识别技术的6大发展趋势预测

随着人工智能技术的快速发展&#xff0c;AI视频识别技术也将会得到进一步的发展和应用。2023年已经进入尾声&#xff0c;2024年即将来临&#xff0c;那么AI视频识别技术又将迎来怎样的发展趋势&#xff1f;本文将对2023年的AI视频技术做一个简单的盘点并对2024年的发展趋势进行…

c/c++中一些不常用但有用的知识

1.变长数组 bool fun(int cnt) {unsigned char data[cnt];return true; } 在 C 语言中&#xff0c;变长数组&#xff08;Variable Length Arrays&#xff0c;VLA&#xff09;是 C99 标准引入的特性&#xff0c;允许使用变量来定义数组的长度。因此&#xff0c;在 C 版本的代码…

Oauth2.0 认证

目录 前言 1.介绍 2.Oauth2.0过程详解 3.Oauth 整合到 Spring Boot 实践 4.方法及配置详解&#xff1a; 总结 前言 Oauth2.0 是非常流行的网络授权表准&#xff0c;已经广泛应用在全球范围内&#xff0c;比较大的公司&#xff0c;如腾讯等都有大量的应用场景。 1.介绍 …

Qt工程文件分离、Qtimer定时器、Qt Creator 常用快捷键

Qt 工程文件分离 不含 UI 的文件分离 以堆栈窗体的代码为例。 firstpagewidget.h #ifndef FIRSTPAGEWIDGET_H #define FIRSTPAGEWIDGET_H#include <QtWidgets> // 记得修改class firstPageWidget : public QWidget {Q_OBJECT public:explicit firstPageWidget(QW…

Python表单处理

目录 通过Flask处理表单 通过Flask-WTF处理表单 通过Flask-WTF验证表单 通过Flask处理表单 表单是在网页中搜集用户信息的各种表单控件的集合区域&#xff0c;表单控件包括文本框、单选框、复选框、提交按钮等&#xff0c;用于实现客户端和服务器端之间的数据交互。 利用F…