? ? 對于點聚合這個需求,在Openlayers3中有現成的類來實現,就是ol.source.Cluster類。具體的參數說明有興趣的可以去參考官網的API,這里就不多說了。在官網的示例中,點聚合默認在每個聚合點的圓中間顯示所聚合的要素的數量:
? ? ?但是在實際需求中,我們可能要根據自己的業務來篩選所聚合的要素的某一個來顯示特定的信息,而不僅僅是顯示要素的數量。比如,我要顯示的是每個聚合點所聚合的要素中某個屬性在當前聚合點中值最大的一個,并顯示最大值,把聚合點的Property設置為最大值所對應的要素的Property。這樣就稍微有點麻煩了。
? ? 最初,我是在每一次分辨率變化重新聚合后,遍歷所有聚合點,并遍歷每個聚合點所聚合的子要素,找出滿足篩選條件的子要素來打到目的。但是這種做法有很大的性能問題。在官網上的例子中是2萬個點聚合的實例沒有一點卡頓,被我這么一弄,我本地1800多個點就有點卡頓了,而且比較影響體驗。最后不得不去github下載源碼查看點聚合是怎么實現的,在觀看源碼過程中,我發現了一個createCluster_方法,這正是我想要找到的東西。源碼如下:
從源碼中可以發現,createCluster_方法正是創建聚合點的方法,其中還有一個遍歷要聚合的子要素的過程,我們暫且不管for循環里面的代碼做的事什么,我們完全可以把自己的業務加到這個for循環內,實現之前我要實現的功能。就這樣我在源碼中做了如下修改(Cluster的源碼位置在openlayers/src/ol/source/cluster.js):
? ? 大功造成,上面標注的部分就是我加上去的代碼,短短的幾行代碼就實現了我剛才所說的需求,而且對聚合的性能影響甚微。需要注意的是,修改完的源碼要重新編譯才能正常使用,至于編譯的方法可以去看公瑾的文章:OpenLayers3自定義編譯? ?在這篇文章中,最后編譯的命令是用的自定義的配置文件編譯的,如果沒有自定義編譯需求,可以直接用openlayers目錄中config/ol.json這個配置文件來完全編譯。