版本：9.0.0

Sources

CanvasSource

加载 canvas 格式数据源，并构建可视化图层。

案例

// 添加到地图
map.addSource('some id', {
   type: 'canvas',
   canvas: 'idOfMyHTMLCanvas',
   animate: true,
   coordinates: [
       [-76.54, 39.18],
       [-76.52, 39.18],
       [-76.52, 39.17],
       [-76.54, 39.17]
   ]
});

// 更新
var mySource = map.getSource('some id');
mySource.setCoordinates([
    [-76.54335737228394, 39.18579907229748],
    [-76.52803659439087, 39.1838364847587],
    [-76.5295386314392, 39.17683392507606],
    [-76.54520273208618, 39.17876344106642]
]);

map.removeSource('some id');  // 移除

Source

将数据源添加到地图样式。

GeoJSONSource

加载 GeoJson 格式数据源，并构建可视化图层。

参数

名称

类型

描述

String

必填数据源 id。

options

Object

必填数据源属性。

名称	类型	描述
data	Object \| String	必填数据对象或 URL。
type	String	必填数据源类型， "geojson" 数据源格式需要与相应的 projection 对应。

案例

// 加载 geojson 数据
map.addSource('sourceId', {
   type: 'geojson',
   data: {
       "type": "FeatureCollection",
       "features": [{
           "type": "Feature",
           "properties": {},
           "geometry": {
               "type": "Point",
               "coordinates": [
                   -76.53063297271729,
                   39.18174077994108
               ]
           }
       }]
   }
});


// 添加图层
map.addLayer({
    'id': 'park-boundary',
    'type': 'fill',
    'source': 'sourceId',
    'paint': {
        'fill-color': '#00bdff',
        'fill-opacity': 0.8
    },
    'filter': ['==', '$type', 'Polygon']
});

// 加载 geojson url
map.addSource('some id', {
    type: 'geojson',
    data: 'path/data.geojson'
});

// 添加图层
map.addLayer({
    'id': 'park-boundary',
    'type': 'fill',
    'source': 'sourceId',
    'paint': {
        'fill-color': '#00bdff',
        'fill-opacity': 0.8
    },
    'filter': ['==', '$type', 'Polygon']
});

实例成员

getClusterChildren

对于集群源，在下一个缩放级别上获取给定集群的子级（作为 GeoJSON 特性的数组）。

参数

名称	类型	描述
callback	Function	必填回调函数。 (Function)(error, features) => {...}。
clusterId	Number	必填集群的 cluster_id 属性值。

案例

// 在点击时检索集群的子集
map.on('click', 'clusters', (e) => {
    const features = map.queryRenderedFeatures(e.point, {
        layers: ['clusters']
    });

    const clusterId = 'features[0].properties.cluster_id';

    clusterSource.getClusterChildren(clusterId, (error, features) => {
        if (!error) {
            console.log('Cluster children:', features);
        }
    });
});

getClusterLeaves

对于集群源，获取属于集群的原始点（作为 GeoJSON 特征的数组）。

参数

名称	类型	默认值	描述
callback	Function		必填回调函数。 (Function)(error, features) => {...}。
clusterId	Number		必填集群的 cluster_id 属性值。
limit	Number	10	可选要返回的最大特征数。
offset	Number	0	可选要跳过的特征数。

案例

// 在点击时检索集群的原始点
map.on('click', 'clusters', (e) => {
    const features = map.queryRenderedFeatures(e.point, {
        layers: ['clusters']
    });

    const clusterId = features[0].properties.cluster_id;
    const pointCount = features[0].properties.point_count;
    const clusterSource = map.getSource('clusters');

    clusterSource.getClusterLeaves(clusterId, pointCount, 0, (error, features) => {
    // 在控制台打印集群的原始点
        console.log('Cluster leaves:', error, features);
    });
});

参考示例。

setData

设置 GeoJSON 数据并重新渲染地图。

参数

名称	类型	描述
data	Object \| String	必填一个 GeoJSON 数据对象或一个 URL。对于较大的 GeoJSON 文件，最好使用后者。

案例

// 更新 geojson 数据
map.getSource('sourceId').setData({
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "properties": { "name": "Null Island" },
      "geometry": {
          "type": "Point",
          "coordinates": [ 0, 0 ]
      }
  }]
});

参考示例。

ImageSource

加载 image 格式数据源，并构建可视化图层。

案例

// 添加到地图
map.addSource('some id', {
   type: 'image',
   url: 'path/name.png',
   coordinates: [
       [-76.54, 39.18],
       [-76.52, 39.18],
       [-76.52, 39.17],
       [-76.54, 39.17]
   ]
});

// 更新坐标
var mySource = map.getSource('some id');
mySource.setCoordinates([
    [-76.54335737228394, 39.18579907229748],
    [-76.52803659439087, 39.1838364847587],
    [-76.5295386314392, 39.17683392507606],
    [-76.54520273208618, 39.17876344106642]
]);

// 同步更新 url 和坐标
mySource.updateImage({
   url: 'path/name.png',
   coordinates: [
       [-76.54335737228394, 39.18579907229748],
       [-76.52803659439087, 39.1838364847587],
       [-76.5295386314392, 39.17683392507606],
       [-76.54520273208618, 39.17876344106642]
   ]
})

map.removeSource('some id');  // 移除

RasterSource

加载瓦片数据源，并构建可视化图层。支持 WMS、TMS、WMTS 格式数据源。

案例

    //加载 WMS
    this.map.addSource("source-id", {
             type: "raster",
             tiles: ["<your wms source url>"],
             tileSize: 256,
      });

    // 加载 TMS
    this.map.addSource("source-id", {
        type: 'raster',
        tiles: ['<your tms source url>'],
        tileSize: 256,
        zoomOffset: -1
        });

    // 加载 WMTS
    this.map.addSource("source-id", {
      tiles: ["<your wmts source url>"],
      type: "raster",
          });

VectorSource

加载矢量切片数据源，并构建可视化图层。首先需要加载数据源，然后加载图层通过 source、source-layer 指定数据源与图层。支持公司自研矢量地图、 MVT 格式数据源。

案例

//加载矢量切片数据源
this.map.addSource("source-id", {
        type: "vector",
        tiles: [ "<your source url>"],
      });
// 加载点图层
this.map.addLayer({
        id: "drawpointlayer",
        type: "circle",
        layout: {
          visibility: "visible",
        },
        source: "source-id",
        "source-layer": "mvt",
        paint: {
          "circle-radius": 10,
          "circle-color": "#ff0000"
        },
         filter: ["all",["==","$type", "Point"],["==","dwmc","莒县龙山镇花崖小学"],["has","dwmc"]],
      });  

VideoSource

加载 video 格式数据源，并构建可视化图层。

案例

// 添加到地图
map.addSource('some id', {
   type: 'video',
   url: [
       'path/name1.mp4',
       'path/name2.webm'
   ],
   coordinates: [
       [-76.54, 39.18],
       [-76.52, 39.18],
       [-76.52, 39.17],
       [-76.54, 39.17]
   ]
});

RasterDemSource

栅格DEM瓦片源。

参数

名称

类型

描述

options

Object

必填数据源属性。

名称	类型	默认值	描述
type	String		必填数据源类型为 "raster-dem" 。
attribution	String		可选包含向用户展示映射时需要显示的属性。
maxzoom	Number	22	可选瓦片可用的最大缩放级别。当以更高的缩放级别显示地图时，将使用来自最大缩放的图块的数据。
minzoom	Number	0	可选瓦片可用的最小缩放级别。
tiles	String		可选一个或多个 tile 源 url 的数组。
tileSize	Number	512	可选图层中显示瓦片的最小可见尺寸。仅可在栅格层中配置。

案例

map.addSource('dem', {
    'type': 'raster-dem',
    'tiles': [
        "<tiles url>"// 如 "http://***/dem/{z}/{x}/{y}.png"
    ],
    'tileSize': 512,
    'maxzoom': 14
});

// 添加地形
map.setTerrain({'source': 'dem', 'heightMultiplier': 1});

// 移除地形
map.setTerrain(null)

CanvasSource​

案例​

Source

GeoJSONSource​

参数​

案例​

实例成员​

getClusterChildren​

参数​

案例​

getClusterLeaves​

参数​

案例​

setData​

参数​

案例​

ImageSource​

案例​

RasterSource​

案例​

VectorSource​

案例​

VideoSource​

案例​

RasterDemSource​

参数​

案例​