从OpenLayers中获取聚类特性？

Question

从OpenLayers中获取聚类特性？

4

我有一个包含许多不同位置、名称和图片以及经纬度的数组。如果我直接把它们放到地图上，会变得混乱。因此，我尝试使用聚类。

首先创建要素：

 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方法，应该从Feature中获取“name”，但它只能打印出几何图形，就像对象上的名称从Clusters中消失了。例如，执行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”，这非常奇怪。有帮助吗？请求帮助！就像将要素添加到聚类中后，它们似乎停止存在一样。

- petur

4个回答

3

我还没有足够的声望，无法添加评论，但我想分享我的解决方案，例如在聚类和非聚类要素上显示弹出窗口。就像@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
  }
}

我需要翻译的内容是：从目前聚类、非聚类和未聚类特征（以可视化方式）获取弹出窗口。

编辑：带有弹出窗口的示例

- MichaelJS

1

请注意图层及其来源，我的错误在于我应该设置：
。

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

替换为：

layer.getSource().getFeatures()

- Abolfazl Mohajeri

-1

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

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

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

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

- Fredrik Bergqvist

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Timh · Accepted Answer

使用聚类技术，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'));
  }
});