Node.js 如何使用d3.js从Mapbox检索矢量图块并转换为geojson？

我试图复制Mike Bostock的例子：

由于Observable语言不是本机Javascript，因此我无法让示例运行

特别是以下两个功能我无法使用：

• VectorTile=（等待要求）https://bundle.run/@地图盒/矢量-tile@1），矢量文件

• Protobuf=require（“pbf@3/dist/pbf.js“

require（）

不是Javascript命令。那么，我怎样才能得到这两个库呢

我尝试的是：

• 通过
  标记插入库
• 使用

  等待加载
  ：
  
  let VectorTile = await fetch('https://bundle.run/@mapbox/vector-tile@1.3.1');
  let Protobuf = await fetch('https://unpkg.com/pbf@3.0.5/dist/pbf.js');
  
  

• 我不确定

  require（）

  是否来自node.js。因此，我使用node.js进行了尝试，但也没有找到有效的解决方案

---

所以，我的问题是：我怎样才能让迈克·博斯托克的例子发挥作用？或者以更一般的方式：我应该如何从Mapbox加载矢量图块，以便像Mike在本例中所做的那样将其转换为geojson格式？

关于第一个问题，为了让Mike Bostock的示例起作用，您可以记住以下注意事项：

承诺是Observable自动处理的东西，而node.js或浏览器中的JavaScript则不会，所以您应该处理它们

添加所有必要的库，同时请记住，您对它们的调用方式可能与Mike的调用方式不同。例如，默认情况下，如果使用Pbf库，则应该使用Pbf，而不是Protobuf（yes

require（）

来自node.js）

对于@mapbox/vector tile库，请注意它导出了3个对象，而您需要VectorTile函数（在node.js中，您可以只使用

require（）.VectorTile

）。您可以在下面看到我是如何用html实现JavaScript的

最后，您需要将生成的svg代码插入html以显示它，这也是Observable自动执行的操作

我真的不知道你应该如何“加载”向量图块，因为我在这个特定的咏叹调方面没有太多的专业知识。然而，下面我将Mike Bostock的示例转换为javascript，因此您可以看到它在Observable之外是如何工作的

文件
地图：
让VectorTile=\u mapbox\u VectorTile.VectorTile
高度=600；
宽度=954；
API_键='cfNfEQR1Qkaz-6mvWl8cpw'；//注册API密钥：https://www.nextzen.org
投影=d3.geoMercator（）
.中心（[-122.4183，37.7750]）
.scale（数学功率（2,21）/（2*Math.PI））
.平移（[宽度/2，高度/2]）。精度（0）；
路径=d3。地理路径（投影）
tile=d3.tile（）
.尺寸（[宽度、高度]）
.scale（projection.scale（）*2*Math.PI）
.翻译（投影（[0,0]）；
函数筛选器（{features}，test）{
返回{type:“FeatureCollection”，features:features.filter（test）}；
};
函数geojson（[x，y，z]，layer，filter=（）=>true）{
如果（！层）返回；
常量特征=[]；
对于（设i=0；i{
d、 层=新矢量文件（新Pbf（等待d3.1缓冲区(`https://tile.nextzen.org/tilezen/vector/v1/256/all/${d[2]}/${d[0]}/${d[1]}.mvt？api_key=${api_key}'）。层；
返回d；
}))
那么(
功能（瓷砖）{
//console.log（平铺）
map=`${tiles.map（d=>`
`)}
`
document.getElementById（'map'）。innerHTML=map；
}
);