通过下面的原型代码,我在步骤中添加了许多功能到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');
}

解决方法:

很快渲染很多东西的秘诀就是……不能渲染很多东西.

这可能看似矛盾,但实际上它很简单.您不需要渲染所有内容,只需渲染：

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

默认情况下,Leaflet实际上简化了矢量几何以节省一些时间(道格拉斯 – 多达几个像素),但它简化了所有几何(计算成本很高)并且仅基于几何的边界框渲染(它渲染了不可见的大几何图形,并渲染了几乎只有一点点可见的大几何图形的所有点.

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

一般的想法是数据集受制于预计算步骤(这需要非常重要的时间但可以在线程外完成),将数据切割成瓦片.在瓷砖中切片意味着只显示大几何形状的可见部分,从而节省了大量时间.它还将运行一些线条简化,具体取决于瓦片金字塔的级别.

这些地图图块遵循与栅格图块相同的标准,因此可以围绕共享可见性算法.

据我所知,geojson-vt和Leaflet只有一个工作实现：Leaflet.VectorGrid(或者你可以查看plugins list,将来可能包含更多相关的插件).我建议你看一下.