从 OpenLayers 中的集群获取功能？

Question

我有一个包含许多不同位置的数组，包含名称和图片，当然还有经度和纬度。 如果我将这些直接放在地图上，它会变得混乱。 所以我尝试使用Clusters 。

从创建特征开始：

 for(var i = 0; i < points.length; i++){
     features[i] = new ol.Feature({
     population: 4000,
     name : points[i].name,
     geometry: new ol.geom.Point(
     ol.proj.transform([
     points[i].long,
     points[i].lat],
     'EPSG:4326', oProjection))
     });
 }

然后我用具有特征的向量填充集群：

var vSource = new ol.source.Vector({ features: features});

var vFeatures = vSource.getFeatures();

var clusterSource = new ol.source.Cluster({
                   distance: 20,
                   source: vSource});

然后我用一些图标设置集群的样式

var clusters = new ol.layer.Vector({
          source: clusterSource,
          style : new ol.style.Style({
                image: new ol.style.Icon(({
                src: 'image/image.png'})),
          text: new ol.style.Text({
                font: '18px Helvetica, Arial Bold, sans-serif',
                text: size.toString(),
                fill: new ol.style.Fill({
                color: '#fff'
                })
})
 map.add(clusters)

我后来有一个 onclick 方法应该从特征中获取“名称”，但它唯一可以打印出来的是几何图形，就像对象上的名称从集群中消失一样。 例如，执行clusterSource.getFeatures()返回一个空向量[] 。

function addOverlays(points){
    for(var i = 0; i<points.length;i++){
        var element = document.getElementById(points[i].id);
        var popup = new ol.Overlay({
            element: element,
            positioning: 'bottom-center',
            stopEvent: false
        });
        map.addOverlay(popup);
        // display popup on click
    }

    // display popup on click
    map.on('click', function(evt) {
        var feature = map.forEachFeatureAtPixel(evt.pixel,
            function(feature, layer) {
                console.log("feature on click: ",feature);
                return feature;
            });
        if (feature) {
            var geometry = feature.getGeometry();
            var coord = geometry.getCoordinates();
            popup.setPosition(coord);
            console.log(feature.get('name'));
            $(element).popover({
                'placement': 'bottom',
                'html': true,
                'content': feature.get('name') //THIS IS THE TROUBLE
            });
            $(element).popover('show');
        } else {
            $(element).popover('destroy');
        }
    });
}

addOverlay 方法无法获取特征的名称，它返回“undefined”，这很奇怪。 帮助？ 请问有什么帮助吗？ 就像添加到集群中时功能停止存在一样。

Answer 1

因此，通过聚类，OL3 创建了一个新特征，该特征将所有聚类特征包裹在其下方。 如果您查看聚类特征，您会在 values 属性下看到：

values_: Object
  features: Array[19]
  geometry: ol.geom.Point

这就是getFeatures()不起作用的原因，当使用集群特征时，它们在创建时只有这两个值。

function isCluster(feature) {
  if (!feature || !feature.get('features')) { 
        return false; 
  }
  return feature.get('features').length > 1;
}

map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(evt.pixel, 
                  function(feature) { return feature; });
  if (isCluster(feature)) {
    // is a cluster, so loop through all the underlying features
    var features = feature.get('features');
    for(var i = 0; i < features.length; i++) {
      // here you'll have access to your normal attributes:
      console.log(features[i].get('name'));
    }
  } else {
    // not a cluster
    console.log(feature.get('name'));
  }
});

Answer 2

我还不能添加评论（没有足够的声誉），但我想添加我的解决方案，例如弹出窗口将显示在集群和非集群功能上。 就像@Timh 的例子。

但是当涉及到较低的缩放级别并且集群被“溶解”时，当您单击集群中（并且技术上仍然存在）的功能时，弹出窗口将仅显示undefined 。

所以，你可以做同样的事情

if (typeof feature.get('features') === 'undefined') {
  // feature.get('whatever');
} else {
  var cfeatures = feature.get('features');
  for(var i = 0; i < cfeatures.length; i++) {
    //like in  the example of timh
  }
}

并从聚集的、未聚集的和目前未聚集的特征（以视觉方式）获得例如弹出窗口。

编辑： 弹出窗口示例

Answer 3

注意你的图层和它们的来源，我的错误是我应该设置：

layer.getSource().getSource().getFeatures()

代替：

layer.getSource().getFeatures()

Answer 4

我无法发表评论，因为我没有代表，但这是对 Timh 解决方案的评论，该解决方案很好但有缺陷（这就是为什么 radhoo 在他的评论中描述的单一功能存在问题）。

“isCluster”函数不应该检查是否有一个或多个特征，因为它仍然是一个集群，即使它只包含一个特征

function isCluster(feature) {
  return !feature || !feature.get('features');
}

所以最好以相同的方式处理所有集群，并有选择地分别处理特征对象。