如何在传单中显示geojson-vt生成的矢量图块？

Question

我有很多 GeoJSON 空间数据，我想在传单地图上显示它们。大约 35,000 个 GeoJSON 对象。

因为点数可能会变得非常大，所以我想使用 geojson-vt 库在客户端平铺我的数据。

现在我已经使用 geojson-vt 库成功平铺了我的数据：

var geoJson = {}; // Request to get data via API call not shown here

var tileOptions = {
        maxZoom: 18, 
        tolerance: 5, 
        extent: 4096,
        buffer: 64, 
        debug: 0, 
        indexMaxZoom: 0, 
        indexMaxPoints: 100000, 
    };

var tileIndex = geojsonvt(geoJson, tileOptions);

如何将 geojson-vt 生成的矢量切片数据集成到我的 Leaflet 地图中？

有没有推荐的插件或库可以提供帮助？

Answer 1

Geojson-vt 的

TileIndex.getTile()

返回 Mapbox 矢量切片规范的 JSON 版本：

我不知道有任何库可以显示这种格式。事实上，Mapbox 自己的演示在相当低的水平上实现了可视化：

var tile = tileIndex.getTile(z, x, y);

console.timeEnd('getting tile z' + z + '-' + x + '-' + y);

if (!tile) {
    console.log('tile empty');
    zoomOut();
    return;
}

// console.log('z%d-%d-%d: %d points of %d', z, x, y, tile.numSimplified, tile.numPoints);
// console.time('draw');

ctx.clearRect(0, 0, height, height);

var features = tile.features;

ctx.strokeStyle = 'red';
ctx.fillStyle = 'rgba(255,0,0,0.05)';

for (var i = 0; i < features.length; i++) {
    var feature = features[i],
        type = feature.type;

    ctx.beginPath();

    for (var j = 0; j < feature.geometry.length; j++) {
        var geom = feature.geometry[j];

        if (type === 1) {
            ctx.arc(geom[0] * ratio + pad, geom[1] * ratio + pad, 2, 0, 2 * Math.PI, false);
            continue;
        }

        for (var k = 0; k < geom.length; k++) {
            var p = geom[k];
            if (k) ctx.lineTo(p[0] * ratio + pad, p[1] * ratio + pad);
            else ctx.moveTo(p[0] * ratio + pad, p[1] * ratio + pad);
        }
    }

    if (type === 3 || type === 1) ctx.fill('evenodd');
    ctx.stroke();
}
drawGrid();

您也许可以使用他们的一些代码来帮助您。

自述文件和相关博客文章中有各种引用提到 Mapbox-gl-js 由 geojson-vt“提供支持”，但没有明确说明如何实现这一点。也许更好的方法是简单地使用 mapbox-gl-js GeoJSONSource。

Answer 2

这个传单插件确实帮助了我，这是一个很好的开始，它可以与传单 1.0 及更高版本一起使用。我目前在当前版本的 Leaflet 的地图应用程序中使用它，效果很好。 https://github.com/brandonshan/leaflet-geojson-vt/tree/leaflet1.0.0

Answer 3

在这个示例中，展示了如何使用L.CanvasTiles在传单地图中渲染geojson-vt。

问题在于该示例中描述的 Sumbera 的 CanvasTiles 扩展仅适用于 leaflet 0.7。我还没有找到特别针对 CanvasTiles 的存储库，更不用说找到它的 npm 包了。

Answer 4

这个库转换 将 geojson-vt 平铺对象转为 mvt，您可以在 Mapbox 地图中使用该 mvt https://github.com/mapbox/vt-pbf