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

2019-04-18  本文已影响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


上一篇下一篇

猜你喜欢

热点阅读