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**//

如何在openlayers 3中选择集群层中的所有功能

2 个答案: