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);
1

There are 1 answers

0
ericire On

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.

style: function(feature2) {
    //on dédoublonne les features pour calculer size
    var uniqueGids = {};
    var size = feature2.get('features').length;
    for (var i = 0; i < size; ++i) {
    var feature = feature2.get('features')[i];
    var gid = feature.get('gid');
    if (!(gid in uniqueGids)) {
    uniqueGids[gid] = true;
    }
    }
    size = Object.keys(uniqueGids).length;