Question

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

从创建features开始：

 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方法应该得到＆＃34; name＆＃34;从功能，但唯一可以打印出来的是几何，它就像对象上的名称从群集中消失。例如，执行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方法无法获取该功能的名称，它返回＆＃34; undefined＆＃34;这很奇怪。救命？有什么帮助吗？就像在群集中添加功能时，功能就会停止存在。

Answer 1

因此，通过群集，OL3会创建一个新功能，用于包装其下的所有群集功能。如果查看聚类功能，可以在值属性下看到：

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
  }
}

并从群集，非聚集和当前未以聚类（以可视方式）的特征获取弹出窗口。

修改：Example with Popups

Answer 3

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

“isCluster”功能不应检查是否有一个或多个功能，因为它仍然是一个群集，即使它只包含一个功能

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

因此，最好以相同的方式处理所有集群，并可选择单独处理要素对象。

Answer 4

请注意您的图层及其来源，我的错误是我应该设置：

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

代替：

layer.getSource().getFeatures()

从OpenLayers中的群集中获取功能？

4 个答案: