Openlayer 3集群放大后重叠

Question

​

​

我得到1000个点(大约)，并显示在地图上与自定义图标以及聚类，但虽然聚类有时它是重叠的。如果我将集群的距离增加到70，则没有集群重叠。我想要实现这一点，因为距离30或40的集群this.abc是数据源

    var vectorSource = new ol.source.Vector({});
    var i = 0;


this.abc.forEach(element => {
        i++;
        var latitude = element[0];
        var longitude = element[0];
        var iconFeature = new ol.Feature({
            geometry: new 
            ol.geom.Point(ol.proj.transform([parseFloat(latitude), 
            parseFloat(longitude)], 'EPSG:4326', 'EPSG:3857')),
            data: element,
            name: layerselection + i
        });
        vectorSource.addFeature(iconFeature);
    });



var clusterSource = new ol.source.Cluster({
        distance: 30,
        source: vectorSource
    });
    var styleCache = {};

     //create the style
    var iconSuccessStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */({
            anchor: [0.5, 46],
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            opacity: 0.75,
            src: './assets/img/xyz.svg'

        }))
    });

    this.vectorLayer1 = new ol.layer.Vector({
        source: clusterSource,
        style: function (feature) {
            var size = feature.get('features').length;
            var style = styleCache[size];

            if (size == 1) {
                style = iconSuccessStyle;
                if (!styleCache[size]) {
                    styleCache[size] = {};
                }
                styleCache[size]['Green'] = style;
            }


else if (!style) {
                style = new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 16,
                        stroke: new ol.style.Stroke({
                            color: '#84B1A1',
                            width: 4
                        }),
                        fill: new ol.style.Fill({
                            color: '#00584D'
                        })
                    }),
                    text: new ol.style.Text({
                        text: size.toString(),
                        fill: new ol.style.Fill({
                            color: '#fff'
                        })
                    })
                });
                styleCache[size] = style;
            }
            return style;
        }
    });
self.map = new ol.Map({
    layers: [new ol.layer.Tile({ source: new ol.source.OSM({ "url":
         "https://mmmm.../World_Street_Map/MapServer/tile/{z}/{y}/{x}" 
        }) }), this.vectorLayer],
    target: document.getElementById('map'),
    controls: [],
    view: new ol.View({
        center: ol.proj.transform([10.4515, 51.1657], 
        'EPSG:4326','EPSG:3857'),
        zoom: 5
    })
});

提前感谢

Answer 1

我在Openlayers 5中也遇到过同样的问题。不幸的是，我找不到一个完全解决这个问题的解决方案。但是，您可以通过增加"distance“属性的值来缓解它。