美文网首页
百度地图--点聚合效率优化

百度地图--点聚合效率优化

作者: 古川耕夫 | 来源:发表于2019-04-18 10:37 被阅读0次

    结果:

    3398个点  56ms;

    8368个点:91ms;

    92908个点:666ms;

    118044个点:728ms;


    优化步骤:

    1.将官方聚合代码每次循环操作一次DOM 元素提出去,处理完之后再统一操作DOM。这个大大降低处理时间。

       2.源代码中   _addToClosestCluster() ;方法中的 this._map.getDistance(center, position);方法修改为直接 计算平面距离(后面会放代码);

    3.经过以上两步处理之后,聚合效率已经大大提升;但是还有个问题是:初次聚合的时候,如果数据量大将会等待很久(实测11W数据会等待6s左右),这个时间都耗在 :数据初始化时的 indexOf() 方法上。该方法是  一个一个判断 这些个点是否已经添加进待聚合点点中。如下图:

    返回item在source中的索引位置

    这个就看各人需求了,我是把这个方法遗弃了。节约了6s。

    4. 动态设置网格大小 :_gridSize。根据地图层级设置网格大小,不仅会优化聚合处理效率,对展示也比较友好。

    最终效果:采用默认的60px 最终效果:根据层级设置聚合网格大小

    最后放上修改后的代码(有大神路过请放过。。。):https://github.com/chenluweixi/tiny-tools/blob/master/markerclusterer_demo.js

    重点参看对象:https://github.com/MecDog/Bmap-markerCluster

    在后续使用中 偶然发现一个,重写了聚合插件的github用户,大家可以参考下。代码效率更高些:https://github.com/shichuanpo/bmapMarkerCluster/blob/master/MarkerClusterer.js


    相关文章

      网友评论

          本文标题:百度地图--点聚合效率优化

          本文链接:https://www.haomeiwen.com/subject/xjqzwqtx.html