mapbox學習-控件

控件就是用來控制地圖的小部件，相似於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: 鷹眼圖控件 [例子