web端百度地圖API實作實時軌跡動態展現

最近在作業中遇到了一個百度地圖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就可以了，再例如：polyline.name 或 polyline.length等，覆寫物物件可以根據自己的需求自定義任何屬性，取值的時候只需按這個欄位取就可以了，

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

備注：本方法在加載輕量級的資料還是可以的，不會使瀏覽器崩潰，如果每次實時定位加載許多路徑資料，成百上千的那種，在加載的時候瀏覽器中地圖卡一下是正常現象，

標籤：JavaScript

上一篇：DOM操作

下一篇：對于Node中Express框架的中間件概念的感知