如何使用deck.gl MVtLayer 显示自托管图块？

如何解决如何使用deck.gl MVtLayer 显示自托管图块？

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

我想要实现的是一个简单的 HTML（例如 index.html）文件，它使用像 function mostBalancedPartition(parent,files_size) { const structure = createStructure(parent); let min = Number.MAX_VALUE; const parentaray = Object.keys(structure); const rootSum = calculateChildSum(0,structure,files_size,-1); for(let i = 0;i<parentaray.length;i++){ const childArray = structure[parentaray[i]]; for(let j =0;j<childArray.length;j++){ const childSum = calculateChildSum(childArray[j],-1); const diff = Math.abs(rootSum-2*childSum); if(diff<min){ min = diff; } } } return min; } function calculateChildSum(parent,excludedChild){ let sum = 0; if(!structure[parent]) return files_size[parent]; let stack = [parent]; while(stack.length !=0){ const top = stack.pop(); if(structure[top]){ const children = structure[top]; stack = [...stack,...structure[top]]; } sum+=files_size[top]; } return sum; } function createStructure(parent){ const structure = {}; for(let i =1;i<parent.length;i++){ if(!structure[parent[i]]){ structure[parent[i]] = []; structure[parent[i]].push(i); }else structure[parent[i]].push(i); } return structure; } console.log(mostBalancedPartition([-1,1,2,5,0 ],[8475,6038,8072,7298,5363,9732,3786,5521,8295,6186])); 这样的脚本标签和前面提到的 Deck.gl 中的示例（我更改了 URL）

<script src="https://unpkg.com/deck.gl@8.4.5/dist.min.js"></script>

而是将其设为不带 React 的。我看到它需要更多关于如何定义画布 HTML 元素并使用它的代码。 Maplibre 示例也可以。 :) https://codepen.io/snickell/pen/dypOWzj 有一个 Maplibre 示例。

解决方法

您可以将 Scripting API 用于更“简单”的示例，here 您有使用 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
    })
  ]
});