这可能是一系列愚蠢的问题,但是当我查看https://deck.gl/docs/api-reference/geo-layers/mvt-layer时,我不明白如何制作一个 MVTLayer 来获取没有 React 片段的自托管图 block 。有人可以帮忙吗?既然无构建也正在成为网络编程中的一个话题,这会引起人们的极大兴趣。
我想要实现的是一个简单的HTML(例如index.html)文件,它使用像<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f6b6a6c642168634f37213b213a" rel="noreferrer noopener nofollow">[email protected]</a>/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 示例.
最佳答案
您可以使用Scripting API有关更多“简单”示例,here您有一个使用 MVTLayer
的示例。
Deck.gl 提供了该库的独立捆绑版本 - 类似于 d3.js 的 native JavaScript 脚本接口(interface)。
就这么简单
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
})
]
});
关于javascript - 如何使用 Deck.gl MVtLayer 显示自托管图 block ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66191443/