生活随笔
收集整理的這篇文章主要介紹了
天地图专题五：在天地图上绘制电子区域并保存数据
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請注明出處。
上一文章講了如何在天地圖上顯示坐標軌跡。
本文介紹如何在天地圖上繪制電子區(qū)域（電子范圍或電子柵欄），并且，我們要將我們繪制的電子區(qū)域的坐標數(shù)據(jù)保存到數(shù)組里，以用于提交到后臺，或根據(jù)數(shù)據(jù)來繪制電子區(qū)域。 ? ?天地圖中有繪制多邊形的接口跟繪制矩形的接口。 我們就從這里入手。
?
調(diào)用接口其實不難。這里稍微要繞一下的地方是如何在調(diào)用 繪制多邊形接口的同時把我們繪制的多邊形的頂點坐標保存下來。
本文我們要實現(xiàn)。
1.繪制多邊形并保存多邊形各頂點的數(shù)據(jù)到數(shù)組中。
2.清除我們繪制的多邊形。
3.根據(jù)我們保存的多邊形頂點數(shù)據(jù)來重現(xiàn)我們剛才清除掉的多邊形。
?
步驟：
?
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,??????????fillOpacity:0.5,????????????????showLabel:false?????????????????};??????????polygonTool?=?new?TPolygonTool(map,config);??????????TEvent.addListener(polygonTool,"draw",onDrawPolygon);??}?? ?
3.繪制多邊形，保存頂點數(shù)據(jù)。
??保存的方法是，當我們點擊按鈕的時候，就給鼠標注冊一個 點擊事件。 繪制多邊形的時候每點擊地圖一次，就調(diào)用點擊事件獲取點擊的位置的經(jīng)緯度坐標保存進數(shù)組。 ?也就一邊繪制多邊形，一邊得到多邊形的頂點坐標。 ? 最后雙擊結(jié)束繪制，這個時候，在同一個位置點擊兩次，會獲取到兩個同樣的經(jīng)緯度，所以要給最后得到的頂點坐標去掉最后兩位。 ?結(jié)束繪制的時候清除地圖的點擊事件。 ? ?
[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);??????????}??????});??}?? ?
點擊按鈕選擇范圍 ?
?
雙擊結(jié)束時調(diào)用 保存坐標到PolygonPoints中。
?
?
[javascript]?view plaincopy
function?onDrawPolygon(bounds,line)??{??????polygonTool.close();??????PolygonPoints.length=PolygonPoints.length-2;????TEvent.removeListener(mapclick);}?? ?
經(jīng)過上面的步驟就可以 實現(xiàn)繪制 區(qū)域，并得到頂點坐標。 ? 很多應用中就可以把得到的坐標提交保存到數(shù)據(jù)庫去，以備后用了。
本demo中就不保存到后臺 ，直接用我們得到的坐標數(shù)據(jù)把我們剛剛繪制的地圖 重現(xiàn)出來。
?
4.清除地圖。polygonTool.clear();map.clearOverLays();
?
5.根據(jù)上面得到的數(shù)組重新 ?調(diào)用天地圖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("沒有選擇區(qū)域！");??????????}????????}?? 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;??????}??});?? ?
?
天地圖繪制多邊形效果圖：
?
?
到這里，我們就實現(xiàn)了在天地圖上繪制多邊形狀。 ?繪制矩形也很類似。 ?其實是很簡單的。
唯一值得一提的大概就是 在繪制的時候前添加 了點擊事件來保存頂點坐標。
?
項目下載地址：https://github.com/liusaint/tiandituMap
演示地址：http://runningls.com/demos/tianditu/index.html?to=loadarea
更多天地圖api運用的內(nèi)容請關(guān)注本系列后續(xù)文章。轉(zhuǎn)載請注明出處
總結(jié)
以上是生活随笔為你收集整理的天地图专题五：在天地图上绘制电子区域并保存数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
