Question

使用下面的原型代码，我在步骤中添加了许多功能到osm中。我在其中加载了大约8500个多字形特征。它们中的一些具有很多坐标，因此总共约150MB的文本数据。逐个加载它们会导致浏览器崩溃。以块的形式加载，但它也不快。特别是如果要在加载完成后滚动或缩放。我有点害羞地将它全部加载到150GB的数据中。

我有哪些选择来改善体验？要明确：我不是在谈论装载本身。我正在谈论使用这些功能渲染地图。

这是代码存根：

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实际上简化了矢量几何以节省一些时间（道格拉斯 - 多达几个像素），但它简化了所有几何（计算成本很高）并且仅基于几何形状渲染＃ 39;边界框（呈现不可见的大几何图形，并呈现大几何图形的所有点，只有一小部分可见）。

幸运的是，最近的一些发展有助于此：矢量图块和geojson-vt。请阅读https://www.mapbox.com/blog/introducing-geojson-vt/

一般的想法是数据集需要进行预计算步骤（这需要花费很多时间，但可以在线程外完成），将数据切割成切片。在瓷砖中切片意味着只显示大几何形状的可见部分，从而节省了大量时间。它还将根据tile金字塔的级别进行一些简化行。

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

据我所知，geojson-vt和Leaflet只有一个有效的实现：Leaflet.VectorGrid（或者您可以查看plugins list，其中可能包含更多相关的插件未来）。我建议你看一下。

Answer 2

除了其他答案：

将GeoJson转换为TopoJson以减小其大小。这是一个实用程序 - https://github.com/topojson/topojson
根据缩放级别，仅显示重要或足够大的部分功能。（正如IvanSanchez写的那样）

如何提高使用leaflet.js将大量功能插入到地图中的性能

2 个答案: