openlayers中如何获取聚合点的中心点?

如何去获取聚合点的中心点,代码如下:
<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);
    });
});


clipboard.png

请问如何能获取到聚合点的中心?

阅读 5.8k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进