This may be in the series of dumb questions, but when I look at https://deck.gl/docs/api-reference/geo-layers/mvt-layer , I do not understand how to make a MVTLayer that fetches self-hosted tiles without React pieces. Can someone help? This would feel to be even large interest now that buildless is also becoming a thing in web programming.
What I would like to achieve is a simple HTML (eg index.html) file that uses a script tag like <script src="https://unpkg.com/deck.gl@8.4.5/dist.min.js"></script>
and the example from the aforementioned Deck.gl that looks like (I changed the URL)
import DeckGL from '@deck.gl/react';
import {MVTLayer} from '@deck.gl/geo-layers';
function App({viewState}) {
const layer = new MVTLayer({
data: `https://<selfhostedurl>/{z}/{x}/{y}.pbf`,
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]} />;
}
but instead make this a without React. I see it requires a bit more code on how to define a canvas HTML element and use it. Maplibre example would be OK too. :) There is one Maplibre example at https://codepen.io/snickell/pen/dypOWzj .
You can use the Scripting API for more 'simple' examples, here you have an example of using MVTLayer
.
Deck.gl offers a standalone bundled version of the library - a native JavaScript scripting interface like that of d3.js.
As simple as
const deckgl = new deck.DeckGL({
container: 'map',
mapStyle: 'https://maps-api-v2.us.carto.com/user/public/carto/sql/{z}/{x}/{y}?source=SELECT * FROM ne_10m_railroads_public&api_key=default_public&format=mvt',
initialViewState: {
latitude: 41.4,
longitude: 2.18,
zoom: 5,
},
controller: true,
layers: [
new deck.MVTLayer({
data: 'https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt',
getLineColor: [192, 192, 192],
lineWidthMinPixels: 1
})
]
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.