如何使用leaflet.js提高将大量特征插入地图的性能

Question

使用下面的原型代码，我将许多功能逐步添加到 osm 中。我正在加载大约 8500 个多边形特征。其中一些有很多坐标，所以总共大约有 150MB 的文本数据。一一加载它们会导致浏览器崩溃。分块加载它是有效的，但它也不快。特别是如果您想在加载完成后滚动或缩放。我有点不好意思一次性加载所有内容，因为这是 150MB 的数据。

我有哪些选择可以改善体验？需要明确的是：我不是在谈论加载本身。我在谈论具有特征的地图的渲染。

这是代码存根：

addToMap = function (id, totalCount) {
    var idTo = id+99;
    jQuery.get('getData.php', {id: id, idTo: idTo}, function (result) {
        var geojson;

        function onEachFeature(feature, layer) {
            layer.on({
                mouseover: highlightFeature,
                mouseout: resetHighlight,
                click: zoomToFeature
            });
        }

        function resetHighlight(e) {
            geojson.resetStyle(e.target);
            info.update();
        }

        geojson = L.geoJson(result, {
            style: getStyle,
            onEachFeature: onEachFeature
        }).addTo(map);

        if (id < totalCount) {
            jQuery('#count').html(idTo+' of '+totalCount);
            addToMap(idTo+1, totalCount);
        } else {
            jQuery('#loader').remove();
        }
    }, 'json');
}

Answer 1

非常快速地渲染很多东西的秘诀是......不要渲染很多东西。

这可能看起来很矛盾，但实际上很简单。你不需要渲染一切，你只需要渲染：

• 屏幕内的东西（加上一点屏幕外边距）
• 测量小于一个像素的东西（因为没有人会注意到亚像素伪影）

默认情况下，Leaflet 确实简化了矢量几何图形以节省一些时间（douglas-peucker 最多几个像素），但它简化了所有几何图形（计算成本高）并且仅基于几何图形的边界框进行渲染（它呈现不可见的大几何图形，并呈现只有一小部分可见的大几何图形的所有点）。

幸运的是，最近的一些发展对此有所帮助：矢量切片和geojson-vt. 请阅读https://www.mapbox.com/blog/introducing-geojson-vt/

总体思路是，数据集要经过预计算步骤（这需要很长的时间，但可以在线程外完成），将数据切成小块。切片切片意味着只显示大几何图形的可见部分，从而节省大量时间。它还将运行一些线条简化，具体取决于瓷砖金字塔的级别。

这些地图瓦片遵循与栅格瓦片相同的标准，因此可以共享可见性算法。

据我所知，geojson-vtand Leaflet只有一个工作实现：Leaflet.VectorGrid（或者您可以查看插件列表，将来可能包含更多相关插件）。我建议你看看它。