如何去获取聚合点的中心点,代码如下:
<div id="mapCon">
</div>
<script type="text/javascript">
//此示例创建10000个要素
var count = 10000;
var features = new Array(count);
var e = 4500000;
for (var i = 0; i < count; ++i) {
var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
features[i] = new ol.Feature(new ol.geom.Point(coordinates));
}
//矢量要素数据源
var source = new ol.source.Vector({
features: features
});
//聚合标注数据源
var clusterSource = new ol.source.Cluster({
distance: 40,
source: source
});
//加载聚合标注的矢量图层
var styleCache = {};
var clusters = new ol.layer.Vector({
source: clusterSource,
style: function (feature, resolution) {
var size = feature.get('features').length;
var style = styleCache[size];
if (!style) {
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: '#3399CC'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff'
})
})
})
];
styleCache[size] = style;
}
return style;
}
});
//实例化Map对象加载地图,默认加载聚合标注图层
var map = new ol.Map({
layers: [
new ol.layer.Tile({
title: "天地图矢量图层",
source: new ol.source.XYZ({
url: xxx
wrapX: false
})
}),
new ol.layer.Tile({
title: "天地图矢量注记图层",
source: new ol.source.XYZ({
url: xxx
wrapX: false
})
}),
//聚合标注图层
clusters
],
//地图容器div的ID
target: 'mapCon',
view: new ol.View({
//地图初始中心点
center: [0, 0],
minZoom: 2,
zoom: 2
})
});
var currentFeatrues = clusterSource.getSource().getFeatures();
//如果聚合标注数据源中没有要素,则重新添加要素
if (currentFeatrues.length == 0) {
clusterSource.getSource().addFeatures(features);
clusters.setSource(clusterSource);
map.addLayer(clusters);
}
map.on('pointermove', function (e) {
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
map.forEachFeatureAtPixel(pixel, function (feature, layer) {
console.log(111);
});
});
请问如何能获取到聚合点的中心?