天地圖專題五：在天地圖上繪制電子區域並保存數據

版權聲明：本文為博主原創文章，轉載請注明出處。

上一文章講了如何在天地圖上顯示坐標軌跡。

本文介紹如何在天地圖上繪制電子區域（電子范圍或電子柵欄），並且，我們要將我們繪制的電子區域的坐標數據保存到數組里，以用於提交到后台，或根據數據來繪制電子區域。    天地圖中有繪制多邊形的接口跟繪制矩形的接口。 我們就從這里入手。

 

調用接口其實不難。這里稍微要繞一下的地方是如何在調用 繪制多邊形接口的同時把我們繪制的多邊形的頂點坐標保存下來。

本文我們要實現。

1.繪制多邊形並保存多邊形各頂點的數據到數組中。

2.清除我們繪制的多邊形。

3.根據我們保存的多邊形頂點數據來重現我們剛才清除掉的多邊形。

 

步驟：

 

1.加載地圖。在地圖上設置按鈕。 選擇范圍 清除所畫 查看剛才所畫的。

 

//加載基本地圖和導航
function loadMap(){
    try {
           map = new TMap("mapDiv"); //初始化地圖對象
            map.centerAndZoom(new TLngLat(103.388611,35.563611), 4);//中國
        map.enableHandleMouseScroll(); //允許鼠標雙擊放大地圖
       } catch(err) {
        alert('圖加載不成功，請稍候再試！你可以先使用其他功能！');
       }
   }

<div class = 'btn-wrap'>
    <input type="button" id="btn1" value="選擇范圍"/>
    <input type="button" id="btn2" value="清除所畫"/>
    <input type="button" id="btn3" value="查看剛才畫的"/>
</div>

2.加載多邊形測距工具。

 

//加載多邊形測距工具。
function loadPolygonTool(){
    var config = {
        strokeColor:"blue", //折線顏色
        fillColor:"#FFFFFF",    //填充顏色。當參數為空時，折線覆蓋物將沒有填充效果
        strokeWeight:"3px", //折線的寬度，以像素為單位
        strokeOpacity:0.5,  //折線的透明度，取值范圍0 - 1
        fillOpacity:0.5,        //填充的透明度，取值范圍0 - 1
        showLabel:false             //是否顯示頁面，默認為true.
    };
    //創建測面工具對象
    polygonTool = new TPolygonTool(map,config);
    //注冊測面工具繪制完成后的事件
    TEvent.addListener(polygonTool,"draw",onDrawPolygon);
}

 

3.繪制多邊形，保存頂點數據。   保存的方法是，當我們點擊按鈕的時候，就給鼠標注冊一個 點擊事件。 繪制多邊形的時候每點擊地圖一次，就調用點擊事件獲取點擊的位置的經緯度坐標保存進數組。  也就一邊繪制多邊形，一邊得到多邊形的頂點坐標。   最后雙擊結束繪制，這個時候，在同一個位置點擊兩次，會獲取到兩個同樣的經緯度，所以要給最后得到的頂點坐標去掉最后兩位。  結束繪制的時候清除地圖的點擊事件。  

 

//繪制多邊形
function drawPolygon() {
    polygonTool.clear();//清除所畫的多邊形
    map.clearOverLays();
    polygonTool.open();
    PolygonPoints.length=0;  //清零保存的坐標
    if(mapclick!=""){
        TEvent.removeListener(mapclick); //避免加載多次點擊事件
    }

    mapclick = TEvent.addListener(map,"click",function(p){
        polygonTool.open();
        var lnglat = map.fromContainerPixelToLngLat(p);//獲取點擊處的坐標
        PolygonPoints.push(lnglat.getLng());
        PolygonPoints.push(lnglat.getLat());
        if(PolygonPoints.length>20){
            alert("不能超過10個點！請重新選擇范圍。");
            polygonTool.close();
            PolygonPoints.length=0;
            TEvent.removeListener(mapclick);
        }
    });
}

 

點擊按鈕選擇范圍  

 

雙擊結束時調用 保存坐標到PolygonPoints中。

 

 

//關閉測面工具時觸發
function onDrawPolygon(bounds,line)
{
    polygonTool.close();
    PolygonPoints.length=PolygonPoints.length-2;//最后雙擊會把最后一個坐標保存兩次。
    TEvent.removeListener(mapclick);//關閉單擊事件（保存坐標）
}

 

經過上面的步驟就可以 實現繪制 區域，並得到頂點坐標。   很多應用中就可以把得到的坐標提交保存到數據庫去，以備后用了。

本demo中就不保存到后台 ，直接用我們得到的坐標數據把我們剛剛繪制的地圖 重現出來。

 

4.清除地圖。polygonTool.clear();map.clearOverLays();

 

5.根據上面得到的數組重新  調用天地圖api畫出我們剛得到的多邊形狀。

 

function  drawPolygonByPoint(){　//根據點坐標來畫多邊形
    map.removeOverLay(polygon);
    var points = [];
    if(PolygonPoints.length!=0){
        for(var i=0;i<PolygonPoints.length;i=i+2){
            points.push(new TLngLat(PolygonPoints[i],PolygonPoints[i+1]));
        }
        //創建面對象
        polygon = new TPolygon(points,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5, fillOpacity:0.5});
            //向地圖上添加面
            map.addOverLay(polygon);
        }else{
            alert("沒有選擇區域！");
        }

    }

6.按鈕事件委托。

 

//給幾個按鈕添加點擊事件。事件委托。
$(".btn-wrap").click(function(event) {
    var target = event.target;
    var id = target.id;
    switch(id){
        case 'btn1':
        polygonTool.close();
        TEvent.removeListener(mapclick);
        drawPolygon();
        break;
        case 'btn2':
        polygonTool.close();
        TEvent.removeListener(mapclick);
        polygonTool.clear();
        map.clearOverLays()
        break;
        case 'btn3':
        polygonTool.close();
        TEvent.removeListener(mapclick);
        drawPolygonByPoint();
        break;
    }
});

 

 

天地圖繪制多邊形效果圖：

 

 

到這里，我們就實現了在天地圖上繪制多邊形狀。  繪制矩形也很類似。  其實是很簡單的。

唯一值得一提的大概就是 在繪制的時候前添加 了點擊事件來保存頂點坐標。

 

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

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

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