Openlayers之标注功能四：聚合标注
聚合标注，是指在不同地图分辨率下，通过聚合方式展现标注点的一种方法。
其设计目的是为了减少当前视图下加载标注点的数量，提升客户端渲染速度。因为如果在地图上添加很多标注点，当地图缩放到小级别（即大分辨率）时会出现标注重叠的现象，既不美观，渲染效率也会受到影响。此时，可以根据地图缩放级数（zoom）的大小，将当前视图的标注点进行聚合显示。
OpenLayers也考虑到加载大数据量标注点的情况，提供了相应的聚合标注功能，以提升显示速度，增强用户体验。OpenLayers封装了支持聚合的矢量要素数据源（ol.source.Cluster），通过此数据源实现矢量要素的聚合功能。
下面的示例模拟加载10000个随机矢量点要素，使用ol.source.Cluster数据源，实现矢量要素聚合显示的功能。
代码如下：
<body>
<input type="radio" id="addFeatures" name="cluster" />添加聚合标注
<input type="radio" id="removeFeatures" name="cluster" />移除聚合标注
<div id="map"></div>
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
//此示例创建10000个要素
var count = 10000;
var features = new Array(count);
var e = 4500000;
for(var i = 0; i < count; i++){
var coordinates = [2*e*Math.random()-e, 2*e*Math.random()-e];
features[i] = new ol.Feature(
new ol.geom.Point(coordinates)
);
}
//矢量要素数据源
var source = new ol.source.Vector({
features: features
});
//聚合标注数据源
var clusterSource = new ol.source.Cluster({
distance: 40, //聚合的距离参数，即当标注间距离小于此值时进行聚合，单位是像素
source: source //聚合的数据源，即矢量要素数据源对象
});
//加载聚合标注的矢量图层
var styleCache = {}; //用于保存特定数量的聚合群的要素样式
var clusters = new ol.layer.Vector({
source: clusterSource,
style: function (feature, resolution){
var size = feature.get('features').length; //获取该要素所在聚合群的要素数量
var style = styleCache[size];
console.log(size);
if(!style){
style = [
new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: '#fff'
}),
fill: new ol.style.Fill({
color: '#3399CC'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff'
})
})
})
];
styleCache[size] = style;
}
return style;
}
});
map.addLayer(clusters);
//添加聚合标注
document.getElementById('addFeatures').onclick = function(){
//当前聚合标注数据源中的要素
var currentFeatures = clusterSource.getSource().getFeatures();
//如果聚合标注数据源中没有要素，则重新添加要素
if(currentFeatures.length == 0){
clusterSource.getSource().addFeatures(features);
clusters.setSource(clusterSource);
map.addLayer(clusters);
}
}
//移除聚合标注
document.getElementById('removeFeatures').onclick = function(){
clusterSource.getSource().clear(); //移除聚合标注数据源中的所有要素
map.removeLayer(clusters); //移除标注图层
}
</script>
</body>
ol.source.Cluster的关键参数如下：
- source：聚合要素的数据源，本示例设置的是加载包含10000个随机矢量要素的矢量数据源对象。
- distance：聚合距离参数，当标注间距离小于此值时进行聚合，本示例设置的是40个像素。
转载自：https://blog.csdn.net/qq_35732147/article/details/81806291
