常用的量測功能


[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();
};
Copyright © PilotGaea 2022 Version:13.0 all right reserved,powered by Gitbook修訂時間: 2024-01-31 10:41:30