如何使用 deck.gl MVtLayer 显示自托管磁贴？

Question

这可能是一系列愚蠢的问题，但当我查看 https://deck.gl/docs/api-reference/geo-layers/mvt-layer 时，我不明白如何制作一个 MVTLayer 来获取没有 React 片段的自托管图块。有人可以帮忙吗？既然 buildless 也正在成为 web 编程中的一件事，这会让人感到更大的兴趣。

我想要实现的是一个简单的 HTML（例如 index.html）文件，它使用 <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 示例

Answer 1

你可以使用 Scripting API for more 'simple' examples, here 你有一个使用 MVTLayer 的例子。

Deck.gl 提供了一个独立的捆绑版本的库 - 一个类似于 d3.js.[=13 的原生 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
    })
  ]
});

如何使用 deck.gl MVtLayer 显示自托管磁贴？

How to show self-hosted tiles using deck.gl MVtLayer?

javascript

mapbox

deck.gl