in an interface based on openlayers 6.12 I have this code for clusters to put the number of features inside each cluster. Only I noticed that if I zoom out twice quickly, the size number is doubled (in features2 I have two features with the same gid while there is only one originally). How does this happen and how can I fix it please?
//la source
var clusterSource = new ol.source.Cluster({
distance: 20,
source: centroides_prescriptionsSource,
});
//le layer
var styleCache = {};
var ClusterLayer = new ol.layer.Vector({
source: clusterSource,
minResolution: 2,
maxResolution: 10500,//2500,
style: function(feature2) {
var size = (feature2.get('features').length);
//console.log('size2',size)
var style = styleCache[size - 1];
if (!style) {
if (size<=50){
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: 'rgba(204, 153, 255,0.8)'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: 'black'
})
}),
zIndex: size
});
}
else if (size<=100){
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: 'rgba(140, 26, 255,0.8)'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: 'white'
})
}),
zIndex: size
});
}
else if (size>100){
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: 'rgba(77, 0, 153,0.8)'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: 'white'
})
}),
zIndex: size
});
}
styleCache[size - 1] = style;
};
return style;
},
name: 'Centroïdes',
description: "caviar centroides prescriptions",
boutonLegende: true,
legendType: 'legende_centroides'
});
function onMoveStart(evt) { centroides_prescriptionsSource.refresh() }
map.on('movestart', onMoveStart);
The only reliable solution I found is to remove duplicate features in feature2, which of course consumes more time especially when there are many of them.