欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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);
}

备注:本方法在加载轻量级的数据还是可以的,不会使浏览器崩溃,如果每次实时定位加载许多路径数据,成百上千的那种,在加载的时候浏览器中地图卡一下是正常现象。