版權聲明：本文為博主原創文章，轉載請注明出處。
上一文章講了如何在天地圖上顯示坐標軌跡。
本文介紹如何在天地圖上繪制電子區域（電子范圍或電子柵欄），并且，我們要將我們繪制的電子區域的坐標數據保存到數組里，以用于提交到后臺，或根據數據來繪制電子區域。 ? ?天地圖中有繪制多邊形的接口跟繪制矩形的接口。 我們就從這里入手。
?
調用接口其實不難。這里稍微要繞一下的地方是如何在調用 繪制多邊形接口的同時把我們繪制的多邊形的頂點坐標保存下來。
本文我們要實現。
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運用的內容請關注本系列后續文章。轉載請注明出處
