Sources

#Data source (Source) Add a data source to the map style.

CanvasSource

Load canvas format data sources and build visualization layers.

Case

//Add to map
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]
   ]
});

// renew
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'); // Remove

GeoJSONSource

Load GeoJson format data sources and build visualization layers.

Parameters

Name	Type	Description
id	String	RequiredData source id.
options	Object	RequiredData source properties. name type description data Object | String RequiredData object or URL. type String RequiredData source type, "geojson" data source format needs to correspond to the corresponding projection.

Case

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


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

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

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

Instance members

getClusterChildren

For cluster sources, gets the children of the given cluster at the next zoom level (as an array of GeoJSON attributes).

Parameters

Name	Type	Description
callback	Function	RequiredCallback function. (Function)(error, features) => {...}.
clusterId	Number	RequiredThe cluster_id attribute value of the cluster.

Case

// Retrieve a subset of clusters on click
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

For a cluster source, get the original points belonging to the cluster (as an array of GeoJSON features).

Parameters

name	type	default value	description
clusterId	Number		RequiredThe cluster_id attribute value of the cluster.
limit	Number	10	optionalThe maximum number of features to be returned.
offset	Number	0	optionalNumber of features to skip.
callback	Function		optionalCallback function. (Function)(error, features) => {...}.

Case

// Retrieve the original point of the cluster on click
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) => {
    //Print the original point of the cluster on the console
        console.log('Cluster leaves:', error, features);
    });
});

Reference Example.

setData

Set up GeoJSON data and re-render the map.

Parameters

Name	Type	Description
data	Object | String	RequiredA GeoJSON data object or a URL. For larger GeoJSON files, it’s better to use the latter.

Case

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

Reference Example.

ImageSource

Load the image format data source and build a visualization layer.

Case

//Add to map
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]
   ]
});

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

// Synchronously update url and coordinates
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'); // Remove

RasterSource

Load the tile data source and build a visualization layer. Supports WMS, TMS, and WMTS format data sources.

Case

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

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

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

VectorSource

Load a vector tile data source and build a visualization layer. First, you need to load the data source, and then load the layer by specifying the data source and layer using source and source-layer. Supports the company’s self-developed vector maps and MVT format data sources.

Case

//Load vector slice data source
this.map.addSource("source-id", {
        type: "vector",
        tiles: [ "<your source url>"],
      });
//Load point 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","Huaya Primary School, Longshan Town, Ju County"],["has","dwmc"]],
      });  

VideoSource

Load the video format data source and build a visualization layer.

Case

//Add to map
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

Raster DEM tile source.

Parameters

Name	Type	Description
options	Object	RequiredData source properties. name type default value description type String RequiredThe data source type is "raster-dem". attribution String optionalContains the attributes that need to be displayed when showing the mapping to the user. maxzoom Number 22 optionalThe maximum zoom level available for the tile. When the map is displayed at a higher zoom level, data from the largest zoomed tile is used. minzoom Number 0 optionalThe minimum zoom level available for the tile. tiles String optionalAn array of one or more tile source urls. tileSize Number 512 optionalThe minimum visible size of the tiles displayed in the layer. Configurable only in raster layer.

Case

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

//Add terrain
map.setTerrain({'source': 'dem', 'heightMultiplier': 1});

//remove terrain
map.setTerrain(null)