Ol3自定义点聚合

    对于点聚合这个需求,在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这个配置文件来完全编译。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,944评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,087评论 19 139
  • 梦见海棠花开, 你坐在漫天花雨下的石凳上。 我步履缓缓, 沿着小径向你走去。 路上时不时有邪祟出现, 我或是拔出桃...
    姀月阅读 664评论 5 10
  • 你无聊的时候才会想起我 不然就会逐渐远去 我不甘心,紧紧地靠近你 你就不断地来切割我的灵魂 你无聊的时候才会想起我...
    积极人生阅读 1,218评论 0 4
  • 商务谈判中, 我们有时需要出动公司高层领导去拜访客户。 做好准备工作,谈判就成功了一半。 今天就来谈谈拜访客户的礼...
    米娅C阅读 987评论 0 4