使用 MapBox GL JS 将 GeoJSON 动态转换为矢量切片？

Question

我的地图的源文件是GeoJSON，但是它很大而且很慢。有没有办法使用 MapBox GL JS 将其动态转换为矢量图块？（加载GeoJSON，将文件预处理成矢量瓦片，并显示使用矢量瓦片作为底图。）看来矢量瓦片要快得多。

我已经尝试了所有可能的 GeoJSON-VT 教程和示例，例如 the one on MapBox's site，但它只是说 GeoJSON-VT 在幕后工作，所以帮助不大。其他主要适用于Leaflet，不适用于MapBox GL JS。

与此同时，我发现每个使用大型数据集的示例总是通过矢量切片来实现：

map.addSource('x', {
        "type": "vector",
        "url": "url"
    });

作为参考，我正在使用此方法加载我的文件：

map.addSource('x', {
        type: 'geojson',
        data: 'file.geojson'
    });

Answer 1

如果您的 GeoJSON 文件是静态的，您可以使用 mapbox/tippecanoe to convert the GeoJSON to an .mbtiles file. You could then either upload the file to Mapbox as a tileset (about tilesets) or you could serve your own vector tile source from a web server using the .mbtiles file (reference implementation).

如果您的 GeoJSON 文件更加动态，事情就会变得有点复杂。我从未使用过它，但 Mapbox Dataset API 可能是一个很好的解决方案。

Answer 2

据我所知，Mapbox-GL-JS 使用 GeoJSON-VT 自动将客户端加载的 GeoJSON 文件转换为浏览器中的矢量切片 - 所以它已经在做你要求的事情。

如果这仍然是 "slow"，问题可能出在实际的加载和处理上 - 因此预生成和提供矢量切片是正确的答案。

使用 MapBox GL JS 将 GeoJSON 动态转换为矢量切片？

Converting GeoJSON to Vector Tiles on the fly w/ MapBox GL JS?

geojson

mapbox

mapbox-gl-js