控制元件就是用來控制地圖的小部件，類似于word里面用來編輯文本格式的各種小工具，控制元件是附著在地圖上的，有了地圖，控制元件才有意義，很多地圖框架都有控制元件的概念，如openlayers，leaflet等，mapbox的控制元件有特定的格式，內部的控制元件具有這種格式，如果要自己撰寫格式，則也需要遵循該格式，
class CustomControl{
onAdd(map) {
this._map = map;
this._container = document.createElement("div");
return this.;
}
onRemove() {
DOM.remove(this._container);
}
getDefaultPosition() {
return 'bottom-left';
}
}
控制元件類至少需要包含onAdd和onRemove方法, onAdd這是添加控制元件元素并實作對地圖控制的關鍵方法；onRemove一般用于在地圖銷毀的時候移除控制元件元素，也推薦使用；getDefaultPosition用來設定控制元件的默認位置，可以省略，省略后添加元素的默認位置是右上角，
地圖實體操作控制元件的三個方法
addControl 添加地圖控制元件
map.addControl(anyControl, 'top-left');
方法首先會判斷anyControl是否具有onAdd方法，不存在則會報錯，然后呼叫控制元件的onAdd方法，并將地圖實體map傳入并在頁面上添加控制元件元素，添加控制元件后會將控制元件保存在快取陣列中，用來后續備用，如移除，
removeControl 移除地圖控制元件
map.removeControl(anyControl);
方法首先會判斷anyControl是否具有onRemove方法，不存在則會報錯，然后在快取陣列中查找對應的控制元件，找到則在快取中移除，最后呼叫控制元件的onRemove方法，在頁面上移除控制元件元素，
hasControl 判斷是否存在地圖控制元件
map.hasControl(anyControl);
方法判斷快取陣列中是否存在anyControl，存在則回傳true
官方控制元件
mapbox-gl-accessibility: 視覺障礙控制元件，添加后點擊地物會有一個小方塊
mapbox-gl-boundaries： 顯示/隱藏爭議邊界(僅支持印度)
mapbox-gl-compare：卷簾工具，比較兩幅地圖 官方例子
mapbox-gl-controls：添加距離測量，切換底圖，點擊查看地圖要素資訊，懸浮查看地圖要素資訊等
mapbox-gl-directions：導航控制元件，支持開車，步行，自行車 官方例子
mapbox-gl-draw：繪制和編輯 官方例子
mapbox-gl-elevation：高程探測控制元件
mapbox-gl-export：地圖匯出控制元件(PDF/PNG)
mapbox-gl-geocoder：地理編碼控制元件 官方例子
mapbox-gl-infobox：資訊窗控制元件
mapbox-gl-legend：圖例控制元件 例子
mapbox-gl-opacity: 修改切片圖層透明度 例子
mapbox-gl-style-switcher：底圖切換控制元件 例子
mapboxgl-minimap: 鷹眼圖控制元件 [例子
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/285872.html
標籤：GIS