4

我有一个包含许多不同位置的数组，包括名称和图片，当然还有经度和纬度。如果我直接把这些放到地图上，它就会变得杂乱无章。所以我尝试使用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 方法应该从特征中获取“名称”，但它唯一可以打印出来的是几何图形，就像对象上的名称从集群中消失一样。例如，执行 aclusterSource.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 方法无法获取特征的名称，它返回“未定义”，这很奇怪。帮助？请问有什么帮助吗？就像添加到集群中的功能停止存在一样。

4

4 回答 4

9

因此，通过聚类，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'));
  }
});
于 2014-11-13T22:50:51.350 回答
3

我还不能添加评论（没有足够的声誉），但我想添加我的解决方案，例如 Popups 将显示在集群和非集群特性上。就像@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
  }
}

并从集群、非集群和当前未集群（以视觉方式）的特征中获取例如弹出窗口。

编辑：弹出窗口示例

于 2015-07-11T21:40:34.513 回答
1

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

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

代替：

layer.getSource().getFeatures()
于 2020-08-24T09:28:52.283 回答
-1

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

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

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

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

于 2016-01-15T07:31:46.033 回答