常用的量測功能
[info] 小提示:
程式碼連結:我是連結
現在需要測量地圖上長度及面積,並標註上長度單位的功能。
首先讓我們產生一個按鈕,用來呼叫開始量測長度的事件
<div id="MyControl" style="position: absolute;z-index: 1;">
<button>MeasureLength</button>
</div>
綁上按鈕的事件
document.querySelectorAll('#MyControl button')[0].onclick = function() {
mapView.MeasureProperty.EPSG = 3857;
mapView.MeasureLength();
};
點擊按鈕後,左鍵點擊地圖上任一點開始進行測量工作,選擇要測量的距離,照提示雙擊完成量測
再來讓我們來測量面積,同樣的新增一個按鈕到剛剛的MyControl之中
<div id="MyControl" style="position: absolute;z-index: 1;">
<button>MeasureLength</button>
<button>MeasureArea</button>
</div>
綁上按鈕的事件
document.querySelectorAll('#MyControl button')[1].onclick = function() {
mapView.MeasureProperty.EPSG = 3857;
mapView.MeasureArea();
};
點擊按鈕後,左鍵點擊地圖上任一點開始進行測量工作,點擊設定要量測的面積後,照提示雙擊完成量測
[warning] 注意事項:
上面兩段按鈕事件程式碼中,設定
mapView.MeasureProperty.EPSG
目的是為了測量時所要使用的單位。EPSG設定成
3857
會以「公尺」為單位表示,設為0
的話就是跟圖台相同,如設定為4326
的話就會拿到「經緯度」,但「單位」不會被正確顯示出來,故設定4326
時必須把顯示「單位」的字串同時也修改。這部分能參考js2d中【MapView.MeasureProperty】說明。
最後加上一個按鈕,用來清除量測的所有標註
<div id="MyControl" style="position: absolute;z-index: 1;">
<button>MeasureLength</button>
<button>MeasureArea</button>
<button>Clear</button>
</div>
綁上按鈕的事件
document.querySelectorAll('#MyControl button')[2].onclick = function() {
mapView.ClearMeasure();
};