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

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

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

?

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

本文我們要實現。

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

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

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

?

步驟：

?

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

?

[javascript]?view plaincopy

//加載基本地圖和導航??

function?loadMap(){??

????try?{??

???????????map?=?new?TMap("mapDiv");?//初始化地圖對象??

????????????map.centerAndZoom(new?TLngLat(103.388611,35.563611),?4);//中國??

????????map.enableHandleMouseScroll();?//允許鼠標雙擊放大地圖?????

???????}?catch(err)?{??

????????alert('圖加載不成功，請稍候再試！你可以先使用其他功能！');??

???????}??

???}??

[html]?view plaincopy

<div?class?=?'btn-wrap'>??

????<input?type="button"?id="btn1"?value="選擇范圍"/>??

????<input?type="button"?id="btn2"?value="清除所畫"/>??

????<input?type="button"?id="btn3"?value="查看剛才畫的"/>??

</div>??

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

?

[javascript]?view plaincopy

//加載多邊形測距工具。??

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

?

[javascript]?view plaincopy

//繪制多邊形??

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中。

?

?

[javascript]?view plaincopy

//關閉測面工具時觸發??

function?onDrawPolygon(bounds,line)??

{??

????polygonTool.close();??

????PolygonPoints.length=PolygonPoints.length-2;//最后雙擊會把最后一個坐標保存兩次。??

????TEvent.removeListener(mapclick);//關閉單擊事件（保存坐標）??

}??

?

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

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

?

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

?

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

?

[javascript]?view plaincopy

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.按鈕事件委托。

?

[javascript]?view plaincopy

//給幾個按鈕添加點擊事件。事件委托。??

$(".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運用的內容請關注本系列后續文章。轉載請注明出處

總結

以上是生活随笔為你收集整理的天地图专题五：在天地图上绘制电子区域并保存数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。