天地圖專題四：在天地圖上顯示運行軌跡

上一文章我們講了如何根據標注點確定初始化地圖時的縮放級別和中心點。 是很基本的需求。  

 

既然是地圖，常常會有顯示運行軌跡的需求。

 

本質上就是把一些點數據在地圖上用線連接起來。 實現起來也是比較簡單的。

 

主要有3點：

1.根據數據計算頁面顯示級別和中心點。

2.顯示所有的軌跡點。起點和終點用不同的圖標來表示。

3.顯示連線。

 

步驟：

1.准備數據。我們直接把前幾篇文章中的數據稍微修改一下。

 

var lnglats = [
{"B":"23.1","L":"113.3","PName":"1111","Status":1},
{"B":"23.2","L":"113.4","PName":"2222","Status":1},
{"B":"23.9","L":"114.1","PName":"3333","Status":3004},
{"B":"24.7","L":"114.8","PName":"第四個點","Status":1},
{"B":"24.8","L":"115.5","PName":"第五個點","Status":1},
{"B":"25.3","L":"116.2","PName":"第六個點","Status":1},
{"B":"26.1","L":"116.7","PName":"7777","Status":1},
{"B":"27.5","L":"117.3","PName":"8888","Status":1}];
//這是頁面需要的數據。實際應用中常用ajax獲取。坐標點狀態。點的類型。點的名字。

 

2.根據上一文章講的方法計算中心點和縮放級別。可使用  map.setViewport(Tlnglats) 這個接口。

 

3.加載地圖。

 

 

//加載基本地圖
function loadMap(){
    try {
        map = new TMap("mapDiv"); //初始化地圖對象
                              map.centerAndZoom(new TLngLat(cenL, cenB), zoom);//設置顯示地圖的中心點和級別
                              map.enableHandleMouseScroll(); //允許鼠標雙擊放大地圖
            } catch(err) {
                alert('天地圖加載不成功，請稍候再試！你可以先使用其他功能！');
            }
}

4.在地圖上加載所有的坐標點。起點與終點用不同的圖標。方法與第二篇文章中加載標注點基本一樣。  要注意的是  要自己調節一下圖標的位置。偏移量new TPixel(17, 34)。

 

因為地圖上的標注點，同一個坐標點上的圖標、線可能表現會有所不同。

 

var iconMaker = [];//用來裝標注點。
//把軌跡點放到地圖上
function loadTrack () {
    if(iconMaker.length!=0){
        for(var m=0;m<iconMaker.length;m++){
            map.removeOverLay(iconMaker[m]);
        }
    }
    var  iconurl0 = 'images/pointOffline.jpg';//正常節點
    var iconurl1 = '../images/track_start_icon.png';//起點
    var iconurl2 = '../images/track_end_icon.png';//終點
    if (lnglats.length != 0) {
        markerOpt = new TMarkerOptions();
        var icon0= new TIcon(iconurl0, new TSize(4, 4), {anchor: new TPixel(4, 10)});
        var icon1 = new TIcon(iconurl1, new TSize(39, 32), {anchor: new TPixel(17, 34)});
        var icon2= new TIcon(iconurl2, new TSize(39, 32), {anchor: new TPixel(17, 34)});
        for (var i = 0; i < lnglats.length; i = i + 1) {
            iconMaker[i]  = new TMarker(new TLngLat(lnglats[i].L, lnglats[i].B), {icon: icon0});
            map.addOverLay(iconMaker[i]);
            if(i == 0){
                iconMaker[i]  = new TMarker(new TLngLat(lnglats[i].L, lnglats[i].B), {icon: icon1});
                            map.addOverLay(iconMaker[i]);//起點
                        }else if(i == lnglats.length-1){
                            iconMaker[i]  = new TMarker(new TLngLat(lnglats[i].L, lnglats[i].B), {icon: icon2});
                            map.addOverLay(iconMaker[i]);//終點
                        }

                    }
                }
              }

5.把標注點用線連接起來。

 

 

//連線部分 軌跡
function showLine() {
    var line;
    var points = [];
    for (var i = 0; i < lnglats.length; i = i + 1) {
        points.push(new TLngLat(lnglats[i].L, lnglats[i].B));
    }
    line = new TPolyline(points, {
        strokeColor: "green",
        strokeWeight: 1,
        strokeOpacity: 1
    });
    map.addOverLay(line);
}

再依次調用              loadMap(); loadTrack(); showLine();就可以了。注意都要在頁面加載完之后運行，或者把代碼放到頁面底部去。

 

 

天地圖坐標軌跡效果圖：

 

到這里，我們就實現了在天地圖上顯示坐標軌跡。可以根據后台查詢出來的數據在地圖上顯示軌跡。

 

 

項目下載地址：https://github.com/liusaint/tiandituMap

演示地址：http://runningls.com/demos/tianditu/index.html?to=loadtrack

更多天地圖api運用的內容請關注本系列后續文章。轉載請注明出處