您的当前位置:首页正文

Ol3自定义点聚合

来源:花图问答
官网示例

     但是在实际需求中,我们可能要根据自己的业务来筛选所聚合的要素的某一个来显示特定的信息,而不仅仅是显示要素的数量。比如,我要显示的是每个聚合点所聚合的要素中某个属性在当前聚合点中值最大的一个,并显示最大值,把聚合点的Property设置为最大值所对应的要素的Property。这样就稍微有点麻烦了。

    最初,我是在每一次分辨率变化重新聚合后,遍历所有聚合点,并遍历每个聚合点所聚合的子要素,找出满足筛选条件的子要素来打到目的。但是这种做法有很大的性能问题。在官网上的例子中是2万个点聚合的实例没有一点卡顿,被我这么一弄,我本地1800多个点就有点卡顿了,而且比较影响体验。最后不得不去github下载源码查看点聚合是怎么实现的,在观看源码过程中,我发现了一个createCluster_方法,这正是我想要找到的东西。源码如下:

.Cluster中createCluster_方法

从源码中可以发现,createCluster_方法正是创建聚合点的方法,其中还有一个遍历要聚合的子要素的过程,我们暂且不管for循环里面的代码做的事什么,我们完全可以把自己的业务加到这个for循环内,实现之前我要实现的功能。就这样我在源码中做了如下修改(Cluster的源码位置在openlayers/src/ol/source/cluster.js):

修改后的源码