如何在openlayers中应用Circle geom的Cluster Source

Question

我正在尝试将聚类应用于圆形特征。阅读了文档后，似乎对于任何不同的东西，都需要定义一个几何函数：我的尝试看起来是这样的：

var source = new ol.source.Vector({wrapX: false});
var clusterSource = new ol.source.Cluster({
geometryFunction: function(feature){
let circlePoint = new ol.geom.Point(feature.getGeometry().getCenter());
return circlePoint;
},
distance: 0,
source: source,
});
var vector = new ol.layer.Vector({
source: clusterSource,
style: function(feature, resolution) {
var styles = [style1];
if (feature.getGeometry().getType() == 'Circle') {
style2.setGeometry(new ol.geom.Point(feature.getGeometry().getCenter()));
style2.getImage().setScale(feature.getGeometry().getRadius() / (180 * resolution));
styles.push(style2);
}
return styles;
},
updateWhileAnimating: true,
visible: true
});

以及我添加的一个示例功能：

circle = new ol.geom.Circle(ol.proj.transform([_lon, _lat], 'EPSG:4326', 'EPSG:3857'), 1);
feature=new ol.Feature({
geometry: circle
});

我在5000个具有不同距离参数的圆上尝试了这种方法，它在第一次加载时显示它们，然后当我更改缩放级别时它们消失了。知道我做错了什么吗？

编辑：使用的样式：

var style1 = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0, 255,0, 0.3)'
}),
stroke: new ol.style.Stroke({
color: '#737373',
width: 2
})
});
var style2 = new ol.style.Style({
image: new ol.style.Icon({
src: 'https://www.freeiconspng.com/uploads/photoshop-tree-top-view-png-3.png'
})
});

Answer 1

也许像这样的样式函数，您需要将集群的大小乘以适合您的应用程序的值，以获得半径

style: function(feature, resolution) {
var geometry;
var features = feature.get('features');
if (features) {
// this is cluster
if (features.length == 1) {
// cluster of 1, use that feature
geometry = features[0].getGeometry();
} else {
// more than 1, use a circle based on size of the cluster
geometry = new ol.geom.Circle(feature.getGeometry().getCoordinates(), features.length * ???);
}
} else {
// some other feature, not a cluster
geometry = feature.getGeometry();
}
style1.setGeometry(geometry):
var styles = [style1];
if (geometry.getType() == 'Circle') {
style2.setGeometry(new ol.geom.Point(geometry.getCenter()));
style2.getImage().setScale(geometry.getRadius() / (180 * resolution));
styles.push(style2);
}
return styles;
},