MapBoxGL Api方法

264 阅读3分钟

一、addLayer 添加图层

参数 object

  1. id: 唯一值
  2. type: 类型("fill""line""symbol""circle""heatmap""fill-extrusion""raster""hillshade""background""sky"
    • fill:带有可选描边边界的填充多边形。
    • line:描边的线条
    • symbol:图标或文本标签
    • circle:一个填满的圆圈
    • heatmap:热图
    • fill-extrusion:(3D)多边形
    • raster:光栅贴图纹理,如卫星图像
    • hillshade:基于DEM数据的客户端山体阴影可视化。目前,该实现仅支持Mapbox Terrain RGB和Mapzen Terrarium
    • background:地图的背景颜色或图案
    • sky: 始终在所有其他层后面渲染的贴图周围的球形圆顶
  3. layout  可off以设置一些layout属性

参数beforeId

  • beforeId: 之前插入新图层的现有图层的ID,导致新图层在视觉上出现在现有图层下方。如果未指定此参数,该图层将附加到图层数组的末尾,并在视觉上显示在所有其他图层之上

二、moveLayer 将图层移动到不同的位置

参数:

1、id: 移动的图层的ID

2、beforeId:插入新图层的现有图层的ID,id图层将出现在beforeId图层下方。如果省略beforeId,该图层将附加到图层数组的末尾,并出现在地图上的所有其他图层之上。

三、removeLayer 删除图层

参数:

     1、id: 删除图层的ID

注: 图层删除前需判断是否存在  

if (map.getLayer('state-data')) map.removeLayer('state-data');

四、setLayerZoomRange  设置指定样式图层的缩放范围。缩放范围包括渲染图层的最小缩放级别最大缩放级别

示例: 

map.setLayerZoomRange('my-layer'25);

五、setCenter 设置地图的地理中心点。相当于 jumpTo({center: center})

map.setCenter([-74, 38]);

六、jumpTo  更改中心、缩放、方位和音高的任何组合,无需动画过渡

map.jumpTo({center: [0, 0]});
// jump with zoom, pitch, and bearing options
map.jumpTo({
   center: [0, 0],
   zoom: 8,
   pitch: 45, // 所需的间距(以度为单位)。间距是朝向地平线的角度,以度为单位,范围在085度之间。例如,音高:0提供了直视地图的外观,而音高:60将用户的视角向地平线倾斜。增加音高值通常用于显示3D对象
   bearing: 90 // 所需的轴承(以度为单位)。方位是“向上”的指南针方向。例如,bearing: 90使地图定向,使东方向上
});

七、flyTo  更改中心点

map.flyTop({
    center:[0,0]
})

八、getZoom() 获取当前zoom

map.getZoom();

九、setData 设置GeoJSON数据并重新渲染地图

参数:

  • data:GeoJSON数据对象或一个数据对象的URL。在大型GeoJSON文件的情况下,后者更可取。
map.addSource('source_id', {  
    type'geojson',  
    data: {  
        type'FeatureCollection',  
        features: []  
        }  
});  
const geojsonSource = map.getSource('source_id');  
// Update the data after the GeoJSON source was created  
geojsonSource.setData({  
    "type""FeatureCollection",  
    "features": [{  
    "type""Feature",  
    "properties": {"name""Null Island"},  
    "geometry": {  
        "type""Point",  
        "coordinates": [ 00 ]  
        }  
    }]  
});

十、getLayoutProperty  返回指定样式层中layout属性的值

参数:

  1. layerId 要从中获取布局属性的图层的ID
  2. name(必填) 要获取的布局属性的名称。
const layoutProperty = map.getLayoutProperty('mySymbolLayer''icon-anchor');

十一、setLayoutProperty 在指定的样式层中设置布局属性的值

参数:

  1. layerId 要从中获取布局属性的图层的ID
  2. name 要获取的布局属性的名称。
  3. value 布局属性的值。必须是适合该属性的类型
map.setLayoutProperty('my-layer''visibility''none');

十二、getPaintProperty 返回指定样式层中Paint属性的值

参数:

  1. layerId 要从中获取Paint属性的图层的ID
  2. name 要获取的Paint属性的名称。
const paintProperty = map.getPaintProperty('mySymbolLayer''icon-color');

十三、setPaintProperty  在指定的样式图层中设置油漆属性的值

参数:

  1. layerId 要从中获取Paint属性的图层的ID
  2. name 要获取的Paint属性的名称。
  3. value: 要设置的Paint属性的值。必须是适合该属性的类型