MapboxGL 常用API记录

MapboxGL 常用API记录

1. Map 对象相关

1.1 地图方法

地图样式布局属性 get 与 set，如：获取地图图层显示或隐藏属性值，设置地图图层显示或隐藏

• getlayoutproperty(layerId, name) 返回指定样式层中布局属性的值
• setlayoutproperty(layerId, name, value, options = {}) 设置指定样式层中布局属性的值

map.getLayoutProperty('clickedLayer', 'visibility') // => 'none'/'visible'
map.setLayoutProperty('clickedLayer', 'visibility', 'none') // 设置图层隐藏
map.setLayoutProperty('clickedLayer', 'visibility', 'visible') // 设置图层显示

地图样式绘制属性 get 与 set，如：获取地图图层填充颜色属性值，设置地图图层填充色

• getpaintproperty(layerId, name) 返回指定样式层中绘制属性的值
• setlayoutproperty(layerId, name, value, options = {}) 设置指定样式层中绘制属性的值

map.getpaintproperty('clickedLayer', 'fill-color') // => '#ffffff'
map.setPaintProperty('clickedLayer', 'fill-color', '#faafee'); // 设置图层填充颜色

地图刷新

const sourceId = 'sourceId'
const layerId = 'layerId'
const sourceObj = {
    type: 'geojson',
    data: 'path/to/data.geojson'
}
const layerObj = {
    id: layerId,
    source: sourceId,
    type: 'fill'
}

// 1. 第一次将数据源与地图图层添加至地图中
map.addSource(sourceId, sourceObj)
map.addLayer(layerObj)
// 2. 通过id获取数据源与地图图层，判断是否存在，如果存在进行第3步，如果不存在进行第4步
const source = map.getSource(sourceId) // 不存在 source => undefined
const layer = map.getLayer(layerId) // 不存在 layer => undefined
// 3. 移除地图中的数据源与地图图层
map.removeSource(sourceId)
map.removeLayer(layerObj)
// 4. 再次将数据源与地图图层添加至地图中
map.addSource(sourceId, sourceObj)
map.addLayer(layerObj)

fitbounds(bounds, options?, eventData?) 地图缩放至BBOX

const bbox = [[-79, 43], [-73, 45]];
map.fitBounds(bbox, {
    padding: {top: 10, bottom:25, left: 15, right: 5}
});

remove() 销毁地图

清理并释放与此地图关联的所有内部资源。

这包括 DOM 元素、事件绑定、Web Worker 和 WebGL 资源。

当您使用完地图并希望确保它不再消耗浏览器资源时，请使用此方法。 之后，您不得在地图上调用任何其他方法。

map.remove()

1.2 地图事件

load 地图加载完成

在下载了所有必要的资源并且地图的第一次视觉完整渲染发生后立即触发

// 初始化地图对象
const map = new mapboxgl.Map({ // map options });
// 设置地图事件监听
// 当地图加载完成的时候触发
map.on('load', function() {
    console.log('A load event occurred.');
});