如何在openlayers 3中選擇集群層中的所有特征

Question

我有一個簡單的代碼和一個簡單的地圖，其中添加了功能並將它們聚集在一起。 直接從例子：

var vectorSource = new ol.source.Vector({
        projection: 'EPSG:4326'
    });

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

    var styleCache = {};
    var clusters = new ol.layer.Vector({
      source: clusterSource,
      style: function(feature, resolution) {
        var size = feature.get('features').length;
        var style = styleCache[size];
        var src;
        if (!style) {
            if( size == 1 ){
                src = 'images/location-single.png';
            }else{
                src = 'images/location-multi.png';
            }
            style = [
            new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 5,
                    fill: new ol.style.Fill({
                    color: '#5bc0de'
                    })
                })
            }),
            new ol.style.Style({
                image: new ol.style.Icon(({
                    // scale: 1 + rnd,
                    // rotateWithView: (rnd < 0.9) ? true : false,
                    // rotation: 360 * rnd * Math.PI / 180,
                    anchor: [0.45, 1],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'fraction',
                    // opacity: rnd,
                    src: src
                })),
                text: new ol.style.Text({
                  text: size.toString(),
                  fill: new ol.style.Fill({
                    color: '#000'
                  })
                })
            })

            ];
            styleCache[size] = style;
        }
        return style;
      }
    });


    var map = new ol.Map({
        target: 'map', // The DOM element that will contains the map
        renderer: 'canvas', // Force the renderer to be used
        layers: [
            // Add a new Tile layer getting tiles from OpenStreetMap source
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            clusters
        ],
        // Create a view centered on the specified location and zoom level
        view: new ol.View({
            center: ol.proj.transform([2.1833, 41.3833], 'EPSG:4326', 'EPSG:3857'),
            zoom: 6
        })
    });

現在我的集群功能工作正常。 但是我需要顯示集群中每個點的坐標，我嘗試使用 map.forEachFeatureAtPixel，但它確實適用於集群中的所有功能。 我如何選擇它們？

Answer 1

哦。 我想我明白了！ 集群是一個特征並獲得了它的屬性。 因此我們可以使用 .getProperties() 獲取集群中的所有功能

如：

map.on('singleclick', function(event) {
    map.forEachFeatureAtPixel(event.pixel, function(feature) {
        var featuresInCluster = feature.getProperties().features;
    });
});

但我真的很想知道是否還有其他方法？

Answer 2

   /***First create a select interaction object by assigning the cluster layer you created**/

   var select = new ol.interaction.Select({
        layers: [clusters]
    });

    /**Then add the created select object**/
    map.addInteraction(select);

    var selectedFeatures = select.getFeatures();

     /**Then write this code**/
    selectedFeatures.on('add', function (event) {
        // event.target only contains the clustered point
        var feature = event.target.item(0);
       console.log(feature)
    });


    /***HOPE IT WILL WORK**//