[英]How to show self-hosted tiles using deck.gl MVtLayer?
這可能是一系列愚蠢的問題,但是當我查看https://deck.gl/docs/api-reference/geo-layers/mvt-layer時,我不明白如何制作一個獲取自沒有 React 片段的托管瓷磚。 有人可以幫忙嗎? 既然無構建也正在成為 web 編程中的一個東西,這會讓人感到更加感興趣。
我想要實現的是一個簡單的 HTML(例如 index.html)文件,它使用像<script src="https://unpkg.com/deck.gl@8.4.5/dist.min.js"></script>
這樣的腳本標簽<script src="https://unpkg.com/deck.gl@8.4.5/dist.min.js"></script>
和前面提到的 Deck.gl 中的示例看起來像(我更改了 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]} />;
}
而是在沒有 React 的情況下使它成為一個。 我看到它需要更多代碼來了解如何定義 canvas HTML 元素並使用它。 Maplibre 示例也可以。 :) https://codepen.io/snickell/pen/dypOWzj有一個 Maplibre 示例。
您可以使用腳本 API獲取更多“簡單”示例,這里有一個使用MVTLayer
的示例。
Deck.gl 提供了該庫的獨立捆綁版本 - 與 d3.js 類似的原生 JavaScript 腳本接口。
簡單到
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
})
]
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.