Openlayers中使用Cluster实现点位元素重合时动态聚合与取消聚合
场景
Openlayers中使用Cluster实现缩放地图时图层聚合与取消聚合：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122143275
上面实现缩放地图时元素在指定距离内实现聚合效果。
实际场景中点位是变化的，不是静态的点位，当多个点位在动态更新的过程中如果出现了重合则自动实现聚合效果
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
1、首先模拟多个点位坐标的数据，实际场景可能是从后台或其他地方获取点位信息
//定位数据源 var positionData = [ [{ x: '-11561139.941628069', y: '5538515.7834814', carNumber: '霸道的程序猿' }, { x: '-11552039.941628069', y: '5531515.7834814', carNumber: '公众号' } ], [{ x: '-11560039.941628069', y: '5537515.7834814', carNumber: '霸道的程序猿' }, { x: '-11553039.941628069', y: '5536515.7834814', carNumber: '公众号' } ], [{ x: '-11559039.941628069', y: '5536515.7834814', carNumber: '霸道的程序猿' }, { x: '-11554039.941628069', y: '5536515.7834814', carNumber: '公众号' } ], [{ x: '-11558039.941628069', y: '5535515.7834814', carNumber: '霸道的程序猿' }, { x: '-11557039.941628069', y: '5534515.7834814', carNumber: '公众号' } ], [{ x: '-11557039.941628069', y: '5534515.7834814', carNumber: '霸道的程序猿' }, { x: '-11556039.941628069', y: '5535515.7834814', carNumber: '公众号' } ], [{ x: '-11556039.941628069', y: '5533515.7834814', carNumber: '霸道的程序猿' }, { x: '-11557039.941628069', y: '5536515.7834814', carNumber: '公众号' } ], [{ x: '-11555039.941628069', y: '5533515.7834814', carNumber: '霸道的程序猿' }, { x: '-11558039.941628069', y: '5536515.7834814', carNumber: '公众号' } ], [{ x: '-11554039.941628069', y: '5533515.7834814', carNumber: '霸道的程序猿' }, { x: '-11559039.941628069', y: '5536515.7834814', carNumber: '公众号' } ], [{ x: '-11553039.941628069', y: '5533515.7834814', carNumber: '霸道的程序猿' }, { x: '-11560039.941628069', y: '5536515.7834814', carNumber: '公众号' } ], [{ x: '-11552039.941628069', y: '5533515.7834814', carNumber: '霸道的程序猿' }, { x: '-11561039.941628069', y: '5536515.7834814', carNumber: '公众号' } ] ];
这里模拟两组坐标的点位数据，会在中间某个时刻有距离特别相近的点位。
2、创建聚合图层要素
// 创建聚合图层要素 var clusterSource = new ol.source.Vector();
3、新建聚合图层数据源
// 聚合图层数据源 var clusterSourceForLayer = new ol.source.Cluster({ source: clusterSource, distance: 50 })
这里的distance就是指的聚合的距离。
实际上就是将原来的普通的new ol.source.Vector图层数据源更换为ol.source.Cluster
4、新建聚合图层
var clusterLayer = new ol.layer.Vector({ source: clusterSourceForLayer, style: function (feature, resolution) { var size = feature.get('features').length; if (size == 1) { return new ol.style.Style({ image: new ol.style.Icon({ scale: 0.8, src: './icon/house.png', anchor: [0.48, 0.52] }), text: new ol.style.Text({ font: 'normal 12px 黑体', // // 对其方式 textAlign: 'center', // 基准线 textBaseline: 'middle', offsetY: -35, offsetX: 0, backgroundFill: new ol.style.Stroke({ color: 'rgba(0,0,255,0.7)', }), // 文本填充样式 fill: new ol.style.Fill({ color: 'rgba(236,218,20,1)' }), padding: [5, 5, 5, 5], text: `霸道的程序猿`, }) }); } else { return new ol.style.Style({ image: new ol.style.Circle({ radius: 30, stroke: new ol.style.Stroke({ color: 'white' }), fill: new ol.style.Fill({ color: 'blue' }) }), text: new ol.style.Text({ text: size.toString(), fill: new ol.style.Fill({ color: 'white' }) }) }); } } });
实际上实现聚合与不聚合效果的关键代码就是这部分的style改为函数并且根据条件动态返回。
如果包含多个元素，则返回聚合的style效果，否则就是返回普通的style效果。
5、map上添加图层
var map = new ol.Map({ layers: [layer], target: 'map', view: view }); this.map.addLayer(this.clusterLayer);
其中layer是地图图层。
然后新建一个定时器模拟定时获取点位数据
//定时器循环模拟后台获取数据实现定位效果 var index = 0; setInterval(() => { //坐标数据到头了 就重新开始 if (index > this.positionData.length - 2) { index = 0; } //根据索引获取数据 var item = this.positionData[index]; //清除上次的数据源 if (this.positonSource) { this.positonSource.clear(); } if (item) { clusterSource.clear(); for (var i = 0; i < item.length; ++i) { var feature = new ol.Feature({ geometry: new ol.geom.Point([Number(item[i].x), Number(item[i].y)]) }) //数据源添加要素 clusterSource.addFeature(feature); } } //移到下个点 index++; }, 1000);
在定时器中将聚合图层的数据源先清理，然后再将坐标要素添加进聚合图层数据源中。
其他相关代码就是离线加载地图显示的功能，可以参考
Openlayers中实现地图上打点并显示图标和文字：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118631046
6、完整示例代码
"en"> "UTF-8">缩放地图实现聚合与取消聚合-动态 "stylesheet" href="lib/ol65/ol.css" type="text/css">"map">