对于点聚合这个需求，在Openlayers3中有现成的类来实现，就是ol.source.Cluster类。具体的参数说明有兴趣的可以去参考官网的API，这里就不多说了。在官网的示例中，点聚合默认在每个聚合点的圆中间显示所聚合的要素的数量：
官网示例
但是在实际需求中，我们可能要根据自己的业务来筛选所聚合的要素的某一个来显示特定的信息，而不仅仅是显示要素的数量。比如，我要显示的是每个聚合点所聚合的要素中某个属性在当前聚合点中值最大的一个，并显示最大值，把聚合点的Property设置为最大值所对应的要素的Property。这样就稍微有点麻烦了。
最初，我是在每一次分辨率变化重新聚合后，遍历所有聚合点，并遍历每个聚合点所聚合的子要素，找出满足筛选条件的子要素来打到目的。但是这种做法有很大的性能问题。在官网上的例子中是2万个点聚合的实例没有一点卡顿，被我这么一弄，我本地1800多个点就有点卡顿了，而且比较影响体验。最后不得不去github下载源码查看点聚合是怎么实现的，在观看源码过程中，我发现了一个createCluster_方法，这正是我想要找到的东西。源码如下：
ol.source.Cluster中createCluster_方法
从源码中可以发现，createCluster_方法正是创建聚合点的方法，其中还有一个遍历要聚合的子要素的过程，我们暂且不管for循环里面的代码做的事什么，我们完全可以把自己的业务加到这个for循环内，实现之前我要实现的功能。就这样我在源码中做了如下修改（Cluster的源码位置在openlayers/src/ol/source/cluster.js）：
修改后的源码
大功造成，上面标注的部分就是我加上去的代码，短短的几行代码就实现了我刚才所说的需求，而且对聚合的性能影响甚微。需要注意的是，修改完的源码要重新编译才能正常使用，至于编译的方法可以去看公瑾的文章：OpenLayers3自定义编译 在这篇文章中，最后编译的命令是用的自定义的配置文件编译的，如果没有自定义编译需求，可以直接用openlayers目录中config/ol.json这个配置文件来完全编译。
网友评论