openlayers聚合图层批量删除点位:
最近在做项目的时候,遇到一个大坑,就是openlayers聚合图层下,批量移除点位的时候,会造成严重卡顿,极度影响用户体验感,必须把这个坑记住,以防下次再犯利用openlayers 的removeFeature()方法批量移除:
当我们再图层上移除批量点位的时候,一般大部门的开发者应该都跟我一样,会选着用这种方法:
tempSbSource.forEachFeature(function(e){
if(e.values_.obj.sblx=='16'){
tempSbSource.removeFeature(e);
}
},tempSbSource);
原因分析:
如果是单纯的Source,用这种方法,是一点问题没有,甚至代码写的飞起的感觉,但是聚合图层的时候,用这种写法就会有问题,因为聚合图层的source每次改变的时候,都会触发聚合的重绘,所以会使浏览器卡顿,影响用户体验
解决方案:
我们最好用两个source来塞到聚合图层里面,第一个source作为聚合图层的原生Source,再定义一个克隆的source,我们定义为cloneSource,用这个cloneSource来做业务处理,数据的删减,最后再把cloneSource给聚合图层,这样就不会触发聚合图层的重绘,导致浏览器卡顿问题,因为这样,聚合图层就重绘一次。