Sources

CanvasSource

loadcanvasFormat 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

Source

Add a data source to the map style.

GeoJSONSource

loadGeoJsonFormat data sources and build visualization layers.

parameter

name	type	describe
id	String	Requireddata source id。
options	Object	RequiredData source properties. name type describe data Object | String Requireddata object or URL。 type String Requireddata source type, "geojson" The data source format needs to match the corresponding projection correspond.

Case

// loadgeojsondata
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']
});

// loadgeojson 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, get the children of the given cluster at the next zoom level (as GeoJSON array of attributes).

parameter

name	type	describe
callback	Function	Requiredcallback function. (Function)(error, features) => {...}。
clusterId	Number	Requiredclustered cluster_id attribute value.

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 cluster sources, get the original points belonging to the cluster (as GeoJSON array of features).

parameter

Name	Type	Default	Description
callback	Function		Requiredcallback function. (Function)(error, features) => {...}。
clusterId	Number		Requiredclustered cluster_id attribute value.
limit	Number	10	OptionalThe maximum number of features to return.
offset	Number	0	OptionalNumber of features to skip.

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);
    });
});

refer to Example。

setData

set up GeoJSON data and re-render the map.

parameter

name	type	describe
data	Object | String	Requiredone GeoJSON data object or a URL。for larger GeoJSON file, it’s better to use the latter.

Case

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

refer to Example。

ImageSource

loadimageFormat data sources and build visualization layers.

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]
]);

// Synchronous updates 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. supportWMS、TMS、WMTSFormat data source.

Case

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

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

    // loadWMTS
    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, then load the layer throughsource、source-layerSpecify the data source and layer. Support the company’s self-developed vector maps,MVTFormat data source.

Case

//Load vector tile data source
this.map.addSource("source-id", {
        type: "vector",
        tiles: [ "<your source url>"],
      });
// loading pointlayer
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

loadvideoFormat data sources and build visualization layers.

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]
   ]
});