结果:
3398个点 56ms;
8368个点:91ms;
92908个点:666ms;
118044个点:728ms;
优化步骤:
1.将官方聚合代码每次循环操作一次DOM 元素提出去,处理完之后再统一操作DOM。这个大大降低处理时间。
2.源代码中 _addToClosestCluster() ;方法中的 this._map.getDistance(center, position);方法修改为直接 计算平面距离(后面会放代码);
返回item在source中的索引位置3.经过以上两步处理之后,聚合效率已经大大提升;但是还有个问题是:初次聚合的时候,如果数据量大将会等待很久(实测11W数据会等待6s左右),这个时间都耗在 :数据初始化时的 indexOf() 方法上。该方法是 一个一个判断 这些个点是否已经添加进待聚合点点中。如下图:
这个就看各人需求了,我是把这个方法遗弃了。节约了6s。
最终效果:采用默认的60px 最终效果:根据层级设置聚合网格大小4. 动态设置网格大小 :_gridSize。根据地图层级设置网格大小,不仅会优化聚合处理效率,对展示也比较友好。
最后放上修改后的代码(有大神路过请放过。。。):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
网友评论