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: 鹰眼图控件 [例子