MVTLayer
is a derived TileLayer
that makes it possible to visualize very large datasets through MVTs (Mapbox Vector Tiles). Behaving like TileLayer
, it will only load, decode and render MVTs containing features that are visible within the current viewport.
Data is loaded from URL templates in the data
property.
This layer also handles feature clipping so that there are no features divided by tile divisions.
import DeckGL from '@deck.gl/react';
import {MVTLayer} from '@deck.gl/geo-layers';
function App({viewState}) {
const layer = new MVTLayer({
data: `https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v7/{z}/{x}/{y}.vector.pbf?access_token=${MAPBOX_TOKEN}`,
minZoom: 0,
maxZoom: 23,
getLineColor: [192, 192, 192],
getFillColor: [140, 170, 180],
getLineWidth: f => {
switch (f.properties.class) {
case 'street':
return 6;
case 'motorway':
return 10;
default:
return 1;
}
},
lineWidthMinPixels: 1
});
return <DeckGL viewState={viewState} layers={[layer]} />;
}
To install the dependencies from NPM:
npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/layers @deck.gl/geo-layers
import {MVTLayer} from '@deck.gl/geo-layers';
new MVTLayer({});
To use pre-bundled scripts:
<script src="https://unpkg.com/deck.gl@^8.0.0/dist.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^8.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/layers@^8.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/geo-layers@^8.0.0/dist.min.js"></script>
new deck.MVTLayer({});
Inherits all properties from TileLayer
and base Layer
, with exceptions indicated below.
If using the default renderSubLayers
, supports all GeoJSONLayer
properties to style features.
data
(String | Array | JSON)Required. It defines the remote data for the MVT layer.
String: Either a URL template or a TileJSON URL.
Array: an array of URL templates. It allows to balance the requests across different tile endpoints. For example, if you define an array with 4 urls and 16 tiles need to be loaded, each endpoint is responsible to server 16/4 tiles.
JSON: A valid TileJSON object.
See TileLayer
's data
prop documentation for the URL template syntax.
The getTileData
prop from the TileLayer
class will not be called.
uniqueIdProperty
(String)Optional. Needed for highlighting a feature split across two or more tiles if no feature id is provided.
An string pointing to a tile attribute containing a unique identifier for features across tiles.
highlightedFeatureId
(Number | String)null
Optional. When provided, a feature with ID corresponding to the supplied value will be highlighted with highlightColor
.
If uniqueIdProperty
is provided, value within that feature property will be used for ID comparison. If not, feature id will be used.
loadOptions
(Object, optional)On top of the default options, also accepts options for the following loaders:
binary
(Boolean, optional)Use tile data in binary format to improve performance. It removes the need for serialization and deserialization of data transferred by the worker back to the main process.
Remarks:
GeoJsonLayer
in the renderSubLayers
callback.onDataLoad
(Function, optional)Called if data
is a TileJSON URL when it is successfully fetched
Receives arguments:
tileJSON
(Object) - the loaded TileJSONgetRenderedFeatures
(Function)Get the rendered features in the current viewport.
If a uniqueIdProperty
is provided only unique properties are returned.
Requires pickable
prop to be true.
Parameters:
maxFeatures
(Number, optional): Max number of features to retrieve when getRenderedFeatures is called. Default to null
.Returns:
Remarks:
getRenderedFeatures
every time onViewStateChange
is executed, use a debounce function instead. onViewStateChange
and onViewportLoad
.Aside from all members of the Tile class, tile instances from the MVTLayer
also include the following fields:
dataInWGS84
(Array)A list of features in world coordinates (WGS84).
Usage example:
const onViewportLoad = tiles => {
tiles.forEach(tile => {
// data in world coordinates (WGS84)
const dataInWGS84 = tile.dataInWGS84;
});
};
new MVTLayer({
id: "..."
data: "..."
onViewportLoad
})