我得到1000点(约),并显示与自定义图标以及集群在地图上,但同时有时集群是重叠的。如果我增加距离可达集群的70则没有簇重叠。我想做到这一点的距离30或群集this.abc 40是数据源
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
})
});
提前致谢
我曾经面对的OpenLayers 5.同样的问题,不幸的是我无法找到它完全消除了问题的解决方案。但是,您可以通过增加“距离”属性的值,缓解它。