聚合標註，是指在不同地圖分辨率下，通過聚合方式展現標註點的一種方法。
其設計目的是爲了減少當前視圖下加載標註點的數量，提升客戶端渲染速度。因爲如果在地圖上添加很多標註點，當地圖縮放到小級別（即大分辨率）時會出現標註重疊的現象，既不美觀，渲染效率也會受到影響。此時，可以根據地圖縮放級數（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個像素。