百度地圖--點(diǎn)聚合效率優(yōu)化

結(jié)果:

3398個(gè)點(diǎn)? 56ms;

8368個(gè)點(diǎn):91ms;

92908個(gè)點(diǎn):666ms;

118044個(gè)點(diǎn):728ms;


優(yōu)化步驟:

1.將官方聚合代碼每次循環(huán)操作一次DOM 元素提出去,處理完之后再統(tǒng)一操作DOM。這個(gè)大大降低處理時(shí)間。

? ?2.源代碼中? ?_addToClosestCluster() ;方法中的?this._map.getDistance(center, position);方法修改為直接 計(jì)算平面距離(后面會(huì)放代碼);

3.經(jīng)過以上兩步處理之后,聚合效率已經(jīng)大大提升;但是還有個(gè)問題是:初次聚合的時(shí)候,如果數(shù)據(jù)量大將會(huì)等待很久(實(shí)測(cè)11W數(shù)據(jù)會(huì)等待6s左右),這個(gè)時(shí)間都耗在 :數(shù)據(jù)初始化時(shí)的?indexOf() 方法上。該方法是? 一個(gè)一個(gè)判斷 這些個(gè)點(diǎn)是否已經(jīng)添加進(jìn)待聚合點(diǎn)點(diǎn)中。如下圖:


返回item在source中的索引位置

這個(gè)就看各人需求了,我是把這個(gè)方法遺棄了。節(jié)約了6s。

4.?動(dòng)態(tài)設(shè)置網(wǎng)格大小 :_gridSize。根據(jù)地圖層級(jí)設(shè)置網(wǎng)格大小,不僅會(huì)優(yōu)化聚合處理效率,對(duì)展示也比較友好。

最終效果:采用默認(rèn)的60px
最終效果:根據(jù)層級(jí)設(shè)置聚合網(wǎng)格大小


最后放上修改后的代碼(有大神路過請(qǐng)放過。。。):https://github.com/chenluweixi/tiny-tools/blob/master/markerclusterer_demo.js


重點(diǎn)參看對(duì)象:https://github.com/MecDog/Bmap-markerCluster


在后續(xù)使用中 偶然發(fā)現(xiàn)一個(gè),重寫了聚合插件的github用戶,大家可以參考下。代碼效率更高些:https://github.com/shichuanpo/bmapMarkerCluster/blob/master/MarkerClusterer.js


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容