问题描述
这可能是一系列愚蠢的问题,但是当我看到 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
})
]
});