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';
    }
}

控件类至少需要包含onAddonRemove方法, 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: 鹰眼图控件 [例子

posted @ 2021-05-20 15:31  mangata  阅读(108)  评论(0编辑  收藏  举报