百度地图Polyline实现多颜色绘制

最近一直在做地图绘制轨迹（BMap.Polyline）

功能概述：查询车辆 <= 7天的轨迹点，并绘制轨迹路线，这个路线包含两个功能：速度超过规定范围，线路颜色变化；鼠标滑过每个轨迹点，需要展示车辆信息牌（BMap.InfoWindow）

瓶颈：当数据量在8000之内，地图加载，使用几乎没什么问题；当数据量在8000到12000之间也还勉强可以使用；再多一些地图则明显出现卡顿，尤其是在2万点的时候，浏览器直接跪是常态

如图是我们的轨迹界面
优化方案：将数据量按照1万点区分，<= 10000，正常按照之前的逻辑；>10000，则将轨迹上的鼠标事件移除掉，用户想看某个点的信息，点击左侧表格里的某条数据再弹出信息框，结果速度从2分17秒直接提到7秒就可展示23333点

这是之前的旧代码逻辑，for循环实现（12000点一下还凑合）

      for (let line = 0; line <= points.length - 1; line++) {let tmpRange = 0;let topic = points[line];let speedRange = -1;topic = points[line];flightPlanCoordinates.push(new BMap.Point(topic.lng, topic.lat));if (topic.speedKm >= 0 && topic.speedKm < 30) {tmpRange = 0;} else if (topic.speedKm >= 30 && topic.speedKm < 70) {tmpRange = 1;} else {tmpRange = 2;}speedRange = tmpRange;let color = "";if (speedRange == 0) {color = "#2d8cf0"; //blue} else if (speedRange === 1) {color = "#19be6b"; //green} else {color = "#ed3f14"; //red}let polyline = new BMap.Polyline(flightPlanCoordinates, {strokeColor: color,strokeWeight: 6,strokeOpacity: 1,});this.lines.push(polyline);this.bMap.addOverlay(polyline);(function (topic) {polyline.addEventListener("mouseout", (result) => {_this.hoverMarker && _this.bMap.removeOverlay(_this.hoverMarker);_this.label.setContent(""); //设置标签内容为空_this.label.setStyle({ borderWidth: "0px" }); //设置标签边框宽度为0});polyline.addEventListener("mouseover", (result) => {_this.bMap.removeOverlay(_this.hoverMarker);// 关闭上一个信息窗体_this.bMap.closeInfoWindow();_this.hoverMarker = new BMap.Marker(new BMap.Point(topic.lng, topic.lat),{truckNo: topic.truckNo,icon: new BMap.Icon(_this.iconPoint, new BMap.Size(16, 16)),});_this.bMap.addOverlay(_this.hoverMarker);// 添加label_this.label = new BMap.Label(topic.gpsTime, {offset: new BMap.Size(26, 0),});_this.label.setStyle({fontSize: "12px",borderColor: "#ccc",padding: "1px 3px",});_this.hoverMarker.setLabel(_this.label);_this.hoverMarker.addEventListener("click", (event) => {// zIndex设置为最高_this.hoverMarker.setTop(true);// 关闭上一个信息窗体_this.bMap.closeInfoWindow();// 地址解析var geocoder = new BMap.Geocoder();try {geocoder.getLocation(new BMap.Point(result.point.lng, result.point.lat),(result) => {topic.location = result.address || "位置解析失败";// 添加信息窗体_this.messInfo = `当前时间：${topic.gpsTime},当前速度：${topic.speedKm}km/h,当前坐标：${result.point.lng.toFixed(6) +"," +result.point.lat.toFixed(6)},当前地点：${topic.location}`;let iwContent = `<div><div><span style="font-weight: 600;">当前时间：</span>${topic.gpsTime}</div><div><span style="font-weight: 600;">当前速度：</span>${topic.speedKm} km/h</div><div><span style="font-weight: 600;">当前坐标：</span>${result.point.lng.toFixed(6) +"," +result.point.lat.toFixed(6)}</div><div><span style="font-weight: 600;">当前地点：</span>${topic.location}</div><div><span style="display: inline-block;color: #fff;cursor:pointer;background-color: #2db7f5;border-color: #2db7f5;padding: 2px 7px;font-size: 12px;margin-top: 3px;border-radius: 3px;"οnclick='copyText("${_this.messInfo}")'>复制文字</span></div></div>`;let infoWindow = new BMap.InfoWindow(iwContent);_this.bMap.openInfoWindow(infoWindow,new BMap.Point(result.point.lng, result.point.lat));});} catch (error) {let iwContent = `<div><div><span style="font-weight: 600;">当前时间：</span>${topic.gpsTime}</div><div><span style="font-weight: 600;">当前速度：</span>${topic.speedKm} km/h</div><div><span style="font-weight: 600;">当前坐标：</span>${result.point.lng.toFixed(6) +"," +result.point.lat.toFixed(6)}</div><div><span style="font-weight: 600;">当前地点：</span>${topic.location}</div></div>`;let infoWindow = new BMap.InfoWindow(iwContent);_this.bMap.openInfoWindow(infoWindow,new BMap.Point(result.point.lng, result.point.lat));}});});})(topic);flightPlanCoordinates = [];flightPlanCoordinates.push(new BMap.Point(topic.lng, topic.lat));}

这是优化之后的不带hover事件的代码

     // 绘制历史轨迹线路-不带hover事件drawHistoryRouteSingle(points) {let _this = this;let flightPlanCoordinates = [];let tmpSpedRange = 0,lastSpedRang = 0for (let line = 0; line <= points.length - 1; line++) {let topic = points[line];let speed = topic.speedKmflightPlanCoordinates.push(new BMap.Point(topic.lng, topic.lat));if (speed >= 0 && speed < 30) {tmpSpedRange = 0} else if (speed >= 30 && speed < 70) {tmpSpedRange = 1} else {tmpSpedRange = 2}let color = "";if (tmpSpedRange == 0) {color = "#2d8cf0"; //blue} else if (tmpSpedRange === 1) {color = "#19be6b"; //green} else {color = "#ed3f14"; //red}if(tmpSpedRange != lastSpedRang){let polyline = new BMap.Polyline(flightPlanCoordinates, {strokeColor: color,strokeWeight: 6,strokeOpacity: 1,});this.lines.push(polyline);this.bMap.addOverlay(polyline);flightPlanCoordinates = []flightPlanCoordinates.push(new BMap.Point(topic.lng, topic.lat));}lastSpedRang = tmpSpedRange}},

百度地图Polyline实现多颜色绘制相关推荐

百度地图轨迹开发，如何绘制带有箭头的折线
最近在开发百度地图时,需要绘制行人行走的轨迹,并在轨迹内使用箭头表示方向,和我们平常使用百度地图导航时一样,能通过箭头表示人行走的方向. 通过百度地图API,我们很容易能找到划线的方法P ...
百度地图上根据经纬度集合绘制行车轨迹
以下是素材: 最近项目中用到了根据一段线路的经纬度集合来在地图上播放该车辆的行驶轨迹的需求.下面我就讲一下我实现步骤: 效果图如下(因为制作gif图为了控制大小去掉了很多帧,不必在意这些细节,嘿嘿!! ...
百度地图Polyline画直线
百度地图画直线时有个BUG,取三个坐标点测试, var point1= new BMap.Point( 113.33765, 23.150435); var point2= new BMap.Poin ...
改html更改百度首页背景颜色,百度地图_更改标注颜色
一.前期准备 1. 申请密匙去百度地图控制台申请密匙. 2. 在index.html引入注:去掉地图左下角的logo .BMap_cpyCtrl{display:none; }.anchorB ...
百度地图Polyline 清除
var allOverlay = map.getOverlays(); for (var i = 0; i < allOverlay.length; i++){ if(allOverlay[i] ...
给百度地图每个市添加颜色
以下为甘肃的列子: var map = new BMap.Map("map", {}); // 创建Map实例 map.cen ...
百度地图实现鼠标绘制多边形并获取所有点坐标
百度地图开放平台http://lbsyun.baidu.com/ 这里使用的是Javascript API http://lbsyun.baidu.com/index.php?title=jspopu ...
百度地图java sdk_百度地图-地图SDK常用方法总结（一）
最近在做关于地图的项目,这里将用到的关于地图SDK的相关方法做一个总结归纳. 初始化 SDKInitializer.initialize(Context) 复制代码 MapView 与 BaiduMa ...
Vue 使用百度地图GL
项目开发笔记一.引入 public index文件引入百度地图Gl <script type="text/javascript" src="https://api ...

百度地图Polyline实现多颜色绘制

百度地图Polyline实现多颜色绘制

百度地图Polyline实现多颜色绘制相关推荐

最新文章

热门文章