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格式数据源，并构建可视化图层。

参数

名称	类型	描述
id	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>"],
      });
// 加载点layer
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]
   ]
});