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

2019-06-08 14:23:16 阅读：280 来源： 互联网

标签：javascript leaflet openstreetmap performance

通过下面的原型代码,我在步骤中添加了许多功能到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,将来可能包含更多相关的插件).我建议你看一下.

标签：javascript,leaflet,openstreetmap,performance
来源： https://codeday.me/bug/20190608/1198284.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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