web端百度地图API实现实时轨迹动态展现
程序员文章站
2022-05-22 21:06:05
最近在工作中遇到了一个百度地图api中的难题,恐怕有的程序员可能也遇到过。就是实时定位并显示轨迹,网上大部分都是通过创建polyline对象贴到地图上。当然,百度地图的画线就是这样实现的,但是好多人会发现,如果数据量超过四五千的话,浏览器可能就要卡了,后面可能就直接因为浏览器内存不足直接崩溃。按理讲 ......
最近在工作中遇到了一个百度地图api中的难题,恐怕有的程序员可能也遇到过。就是实时定位并显示轨迹,网上大部分都是通过创建polyline对象贴到地图上。当然,百度地图的画线就是这样实现的,但是好多人会发现,如果数据量超过四五千的话,浏览器可能就要卡了,后面可能就直接因为浏览器内存不足直接崩溃。按理讲面对这么少的数据,百度地图肯定会考虑到这一点,所以肯定有解决的方法。下面将介绍本人的方法供大家参考:
1、数据准备
这方便的数据我是ajax请求从后台获取的就不说了。画线的话我们就得用到百度地图api中的polyline类了,因为我们是实时定位,以前的历史路径是存在,但是我们不能每次都要new一个polyline对象贴到地图上,所以就需要用到polyline的setpath(path: array<point>),我们把整条路径的数据全部塞进去就可以了。这里我用一个json格式的数组保存每个历史路径的所有路径数据,后面就是来数据更新数组再找到地图上相应的polyline对象塞进去就可以了。
var polylinearray = [];//此数组专门存储历史路径 var polylinejson = {}; polylinejson["id"] = id;//存储相应的polyline对象 polylinejson ["patharray"] = polylinearray ; polylinearray.push(polylinejson);
备注:polyline是个覆盖物对象,可以和其他对象一样自定义属性的,比如在声明以后设置polyline的id属性直接用polyline.id=content就可以了
var polyline = new bmap.polyline([ startpoint, endpoint ], { strokecolor : color, strokeweight : weight, strokeopacity : opacity, strokestyle : style // 实线solid或虚线dashed }); polyline.id = id; map.addoverlay(polyline);
2、路径更新
if(polylinearray != ""){ for(var i = 0; i < polylinearray.length; i++){ if(polylinearray[i].id == id){//此条路径存在 var patharray = polylinearray[i].patharray; patharray.push(endpoint);//更新数组中的数据 var alloverlay = map.getoverlays();// 获取地图上的覆盖物 for (var j = 0; j < alloverlay.length; j++) { // 判断标注物是否是polyline类型 if (alloverlay[j].tostring() == "[object polyline]") { if (alloverlay[j].id == id) { alloverlay[j].setpath(patharray); break; }else{//数组中存在,但地图上不存在 if(j == alloverlay.length - 1){ var polylinetemp = new bmap.polyline(patharray, { strokecolor : color, strokeweight : weight, strokeopacity : opacity, strokestyle : style // 实线solid或虚线dashed }); polylinetemp.id = id;//为这条路径赋值唯一的id map.addoverlay(polylinetemp); // 添加折线到地图上 } } } } break; }else{//不存在 if(i == polylinearray.length - 1){ var patharray = []; patharray.push(startpoint); patharray.push(endpoint); var polylinetemp = new bmap.polyline(patharray, { strokecolor : color, strokeweight : weight, strokeopacity : opacity, strokestyle : style // 实线solid或虚线dashed }); polylinetemp.id = id;//为这条路径赋值唯一的id map.addoverlay(polylinetemp); // 添加折线到地图上 var polylinejson = {}; polylinejson["id"] = id; polylinejson["patharray"] = patharray; polylinearray.push(polyline); break; } } } }else{//数组为空 var patharray = []; patharray.push(startpoint); patharray.push(endpoint); var polylinetemp = new bmap.polyline(patharray, { strokecolor : color, strokeweight : weight, strokeopacity : opacity, strokestyle : style // 实线solid或虚线dashed }); polylinetemp.id = id;//为这条路径赋值唯一的id map.addoverlay(polylinetemp); // 添加折线到地图上 var polylinejson = {}; polylinejson["id"] = id; polylinejson["patharray"] = patharray; polylinearray.push(polyline); }
备注:本方法在加载轻量级的数据还是可以的,不会使浏览器崩溃,如果每次实时定位加载许多路径数据,成百上千的那种,在加载的时候浏览器中地图卡一下是正常现象。