使用百度地图api实现的渐变色轨迹线，效果如下：

实现方法：

1.百度地图api使用

首先引入百度地图api的依赖文件

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>

创建地图的实例：

        var SMap = new BMap.Map("map", {enableMapClick: false  //禁用点击事件});SMap.centerAndZoom(new BMap.Point(112.9353, 29.6952), 8); // 初始化地图,设置中心点坐标和地图级别SMap.enableScrollWheelZoom(); //启用滚轮放大缩小SMap.setMapStyle({styleJson: [{"featureType": "road","elementType": "all","stylers": {"color": "#ffffff","visibility": "off"}}]});

2.数据准备

需要在地图上打点的坐标数据（点连成轨迹），数据太长只展示部分，数据的第三项为权值：

let pos = [[106.596514, 29.574914, 70],[106.632446, 29.620136, 70],[106.686345, 29.569259, 70],[106.745705, 29.594136, 70],[106.805208, 29.598407, 17],[106.850483, 29.583457, 17],[106.850483, 29.583457, 17]]

百度地图api不支持列表形式的坐标点，因此需要转换成point格式的数据：

        let totalPoints = [];//将坐标点转化成point格式for (let i = 0; i < pos.length; i++) {let bp = new BMap.Point(pos[i][0], pos[i][1]);totalPoints.push(bp);}

3.绘制轨迹

绘制这种有一定宽度的轨迹线的原理大致就是在百度地图的图层之上再添加一个canvas图层然后在绘制矩形填充颜色边框箭头之类的。
添加图层的api需要依赖一个第三方代码，下载链接在文章底部：

 <script type="text/javascript" src="../src/CanvasLayer.js"></script>

绘制渐变颜色轨迹：

        //**********渐变颜色轨迹*************this.canvasLayer = new this.CanvasLayer({map: this.SMap,update,});

function update() {const ctx = self.canvasLayer.canvas.getContext('2d');if (!ctx) {return;}ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);if (totalPoints.length !== 0) { // 绘制带速度颜色的轨迹 for (let i = 0, len = totalPoints.length; i < len - 2; i += 1) {const pixel = self.SMap.pointToPixel(totalPoints[i]);///const nextPixel = self.SMap.pointToPixel(totalPoints[i + 1]);ctx.beginPath();ctx.moveTo(pixel.x, pixel.y);ctx.lineCap = 'round';ctx.lineWidth = FLOODLINEWIDTH;const grd = ctx.createLinearGradient(pixel.x, pixel.y, nextPixel.x,nextPixel.y);const nowValue = pos[i][2]const nextValue = pos[i + 1][2]grd.addColorStop(0, self.getColorByValue(nowValue));grd.addColorStop(1, self.getColorByValue(nextValue));ctx.strokeStyle = grd;ctx.lineTo(nextPixel.x, nextPixel.y);ctx.stroke();}}}

根据权值转换成颜色的函数：

        //将值转成十六进制颜色//0,180,0 --> 200, 200, 0 --> 200, 0, 0//value 0-100function getColorByValue(value) {let r = g = b = 0if (value <= 50) {g = 200r = parseInt(((value / 100) * 200))} else {r = 200g = parseInt(((100 - value) / 100) * 200)}let t1 = r.toString(16)t1 = t1.length == 1 ? ("0" + t1) : t1let t2 = g.toString(16)t2 = t2.length == 1 ? ("0" + t2) : t2let t3 = b.toString(16)t3 = t3.length == 1 ? ("0" + t3) : t3return '#' + t1 + t2 + t3}

添加轨迹箭头：

        //**********轨迹箭头*************this.canvasLayerPointer = new this.CanvasLayer({map: this.SMap,update: updatePointer,});

   // 箭头function updatePointer() {const ctx = self.canvasLayerPointer.canvas.getContext('2d');if (!ctx) {return;}ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);if (totalPoints.length !== 0) {const lineObj = {};let pixelPart = 0;const pixelPartUnit = 40;for (let i = 0, len = totalPoints.length; i < len - 1; i += 1) {const pixel = self.SMap.pointToPixel(totalPoints[i]);const nextPixel = self.SMap.pointToPixel(totalPoints[i + 1]);pixelPart += (((nextPixel.x - pixel.x) ** 2) + ((nextPixel.y - pixel.y) **2)) ** 0.5;if (pixelPart <= pixelPartUnit) {// continue;}pixelPart = 0;ctx.beginPath();// 根据渲染像素距离渲染箭头if (Math.abs(nextPixel.x - pixel.x) > 10 || Math.abs(nextPixel.y - pixel.y) > 10) {// 箭头一共需要5个点：起点、终点、中心点、箭头端点1、箭头端点2const midPixel = new self.BMap.Pixel((pixel.x + nextPixel.x) / 2,(pixel.y + nextPixel.y) / 2,);// 起点终点距离const distance = (((nextPixel.x - pixel.x) ** 2) +((nextPixel.y - pixel.y) ** 2)) ** 0.5;// 箭头长度const pointerLong = 4;const aPixel = {};const bPixel = {};if (nextPixel.x - pixel.x === 0) {if (nextPixel.y - pixel.y > 0) {aPixel.x = midPixel.x - (pointerLong * (0.5 ** 0.5));aPixel.y = midPixel.y - (pointerLong * (0.5 ** 0.5));bPixel.x = midPixel.x + (pointerLong * (0.5 ** 0.5));bPixel.y = midPixel.y - (pointerLong * (0.5 ** 0.5));} else if (nextPixel.y - pixel.y < 0) {aPixel.x = midPixel.x - (pointerLong * (0.5 ** 0.5));aPixel.y = midPixel.y + (pointerLong * (0.5 ** 0.5));bPixel.x = midPixel.x + (pointerLong * (0.5 ** 0.5));bPixel.y = midPixel.y + (pointerLong * (0.5 ** 0.5));} else {// continue;}} else {const k0 = (((-(2 ** 0.5) * distance * pointerLong) +(2 * (nextPixel.y - pixel.y) * midPixel.y)) / (2 * (nextPixel.x - pixel.x))) + midPixel.x;const k1 = -((nextPixel.y - pixel.y) / (nextPixel.x - pixel.x));const a = (k1 ** 2) + 1;const b = (2 * k1 * (k0 - midPixel.x)) - (2 * midPixel.y);const c = (((k0 - midPixel.x) ** 2) + (midPixel.y ** 2)) - (pointerLong ** 2);aPixel.y = (-b + (((b * b) - (4 * a * c)) ** 0.5)) / (2 * a);bPixel.y = (-b - (((b * b) - (4 * a * c)) ** 0.5)) / (2 * a);aPixel.x = (k1 * aPixel.y) + k0;bPixel.x = (k1 * bPixel.y) + k0;}ctx.moveTo(aPixel.x, aPixel.y);ctx.lineWidth = 2;ctx.strokeStyle = '#eee';ctx.lineTo(midPixel.x, midPixel.y);ctx.lineTo(bPixel.x, bPixel.y);ctx.lineCap = 'round';ctx.stroke();}}}}

添加边框：

        //**********轨迹边框*************this.canvasLayerBack = new this.CanvasLayer({map: this.SMap,update: updateBack,});

        // 边框function updateBack() {const nextArray = [];const ctx = self.canvasLayerBack.canvas.getContext('2d');if (!ctx) {return;}ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);if (totalPoints.length !== 0) {for (let i = 0, len = totalPoints.length; i < len - 2; i += 1) {const pixel = self.SMap.pointToPixel(totalPoints[i]);const nextPixel = self.SMap.pointToPixel(totalPoints[i + 1]);ctx.beginPath();ctx.moveTo(pixel.x, pixel.y);ctx.lineWidth = FLOODLINEWIDTH + 3;ctx.strokeStyle = '#8b8b89';ctx.lineTo(nextPixel.x, nextPixel.y);ctx.lineCap = 'round';ctx.stroke();}}}

4.项目源代码

项目源代码下载

参考文章：

https://www.dazhuanlan.com/2019/10/11/5d9f6a1b1a71e/

百度地图api实现渐变色轨迹线相关推荐

【百度地图API】——如何用label制作简易的房产标签
摘要: 最近,API爱好者们纷纷说,自定义marker太复杂了!不仅定义复杂,连所有的dom事件都要自己重新定义.有没有快速简易创建房产标签的方法呢? 答案当然是有的啦~ 我们可以利用label嘛! ...
【百度地图API】如何制作班级地理通讯录？LBS通讯录
原文:[百度地图API]如何制作班级地理通讯录?LBS通讯录摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复杂信息窗口,公交和驾车等.一般班级人员都不会超过300个,因为可以高效地 ...
baidumap api MySQL_百度地图API开发笔记一(基础篇)
什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供了诸 ...
微信小程序城市定位(百度地图API)
概述微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...
python批量爬取小网格区域坐标系_Python爬虫实例_利用百度地图API批量获取城市所有的POI点...
上篇关于爬虫的文章,我们讲解了如何运用Python的requests及BeautifuiSoup模块来完成静态网页的爬取,总结过程,网页爬虫本质就两步: 1.设置请求参数(url,headers,co ...
教你用百度地图API抓取建筑物周边位置、房价信息（附代码）
来源:大数据挖掘DT数据分析本文共2465字,建议阅读5分钟. 本文为大家解读怎样用脚本与百度API的交互,爬取百度地图的数据. 需求描述对于数据挖掘工程师来说,有时候需要抓取地理位置信息,比如统 ...
【百度地图API】小学生找哥哥——小学生没钱打车，所以此为公交查询功能
原文:[百度地图API]小学生找哥哥--小学生没钱打车,所以此为公交查询功能任务描述: 有位在魏公村附近上小学的小朋友,要去北京邮电大学找哥哥.他身上钱很少,只够坐公交的.所以,百度地图API快帮帮 ...
【百度地图API】百度API卫星图使用方法和卫星图对比工具
百度地图API推出卫星图接口也有一个月啦~ 本文除了介绍如何使用百度地图API来操作卫星图外,还顺带制作了个卫星图对比工具. 一.百度地图API卫星图调用百度卫星图有两种方式,一是地图类型控件,一是 ...
【百度地图API】北京周边7日游——图标按路线轨迹行动
原文:[百度地图API]北京周边7日游--图标按路线轨迹行动任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路.计划好路线后,就开始 ...

百度地图api实现渐变色轨迹线