? ? 對于點聚合這個需求把夸,在Openlayers3中有現(xiàn)成的類來實現(xiàn)灵嫌,就是ol.source.Cluster類。具體的參數(shù)說明有興趣的可以去參考官網(wǎng)的API氛驮,這里就不多說了腕柜。在官網(wǎng)的示例中,點聚合默認(rèn)在每個聚合點的圓中間顯示所聚合的要素的數(shù)量:
? ? ?但是在實際需求中矫废,我們可能要根據(jù)自己的業(yè)務(wù)來篩選所聚合的要素的某一個來顯示特定的信息盏缤,而不僅僅是顯示要素的數(shù)量。比如蓖扑,我要顯示的是每個聚合點所聚合的要素中某個屬性在當(dāng)前聚合點中值最大的一個唉铜,并顯示最大值,把聚合點的Property設(shè)置為最大值所對應(yīng)的要素的Property律杠。這樣就稍微有點麻煩了潭流。
? ? 最初竞惋,我是在每一次分辨率變化重新聚合后,遍歷所有聚合點灰嫉,并遍歷每個聚合點所聚合的子要素拆宛,找出滿足篩選條件的子要素來打到目的。但是這種做法有很大的性能問題讼撒。在官網(wǎng)上的例子中是2萬個點聚合的實例沒有一點卡頓浑厚,被我這么一弄,我本地1800多個點就有點卡頓了根盒,而且比較影響體驗钳幅。最后不得不去github下載源碼查看點聚合是怎么實現(xiàn)的,在觀看源碼過程中炎滞,我發(fā)現(xiàn)了一個createCluster_方法敢艰,這正是我想要找到的東西。源碼如下:
從源碼中可以發(fā)現(xiàn)册赛,createCluster_方法正是創(chuàng)建聚合點的方法盖矫,其中還有一個遍歷要聚合的子要素的過程,我們暫且不管for循環(huán)里面的代碼做的事什么击奶,我們完全可以把自己的業(yè)務(wù)加到這個for循環(huán)內(nèi)辈双,實現(xiàn)之前我要實現(xiàn)的功能。就這樣我在源碼中做了如下修改(Cluster的源碼位置在openlayers/src/ol/source/cluster.js):
? ? 大功造成柜砾,上面標(biāo)注的部分就是我加上去的代碼湃望,短短的幾行代碼就實現(xiàn)了我剛才所說的需求,而且對聚合的性能影響甚微痰驱。需要注意的是证芭,修改完的源碼要重新編譯才能正常使用,至于編譯的方法可以去看公瑾的文章:OpenLayers3自定義編譯? ?在這篇文章中担映,最后編譯的命令是用的自定義的配置文件編譯的废士,如果沒有自定義編譯需求,可以直接用openlayers目錄中config/ol.json這個配置文件來完全編譯蝇完。