[GIS] Getting feature data from vector source using OpenLayers 3

clusteringopenlayers

I need help concerning feature clustering in OpenLayers 3. I have a vector layer that dynamically "collects" a large number of features. All features have various properties like title, content, permalink.

Unfortunately, I only have a clue how to copy style data from the source layer (for all features that are not included into clustering at the respective zoom level).

How do I get all the other properties into the features at the cluster layer?

I would like to add feature.get('permalink') and so on, but I don't have any idea where I have to put this.

Here's my code:

// marker clustering
    clusterLayer[i] = new ol.layer.Vector({
        source: clusterSource[i],
        style: function(feature) {
          var size = feature.get('features').length;
          if(size > 1) {
              var style = new ol.style.Style({
                  image: new ol.style.Circle({
                    radius: 10,
                    stroke: new ol.style.Stroke({
                      color: '#fff'
                    }),
                    fill: new ol.style.Fill({
                      color: '#3399CC'
                    })
                  }),
                  text: new ol.style.Text({
                    text: size.toString(),
                    fill: new ol.style.Fill({
                      color: '#fff'
                    })
                  })
              });
          }
          else var style = feature.get('features')[0].getStyle();
          return style;
        }
    });

Any idea how I can add the properties from all source layer features to the features at the cluster layer?

Best Answer

Here is a code snip to help you out:

map.on('click', function(e){
  var attsCollector = [];
  map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
     //you may also use the layer argument here, so avoid processing for layers you dont want such functionality
    if (typeof feature.get('features') === 'undefined') {
      // means there is no cluster feature on click
    } else {
      var clustFeats = feature.get('features');
      //now loop through the features to get the attributes
      //I have just added the "attr1" for demo purposes
      for(var i = 0; i < clustFeats.length; i++) {
       attsCollector.push(clustFeats[i].get("attr1"));
      }
     }
  });
  //now rise your popup and populate it with the
  //collected attrs
  alert("number of features for clicked  cluster====="+attsCollector.length)
  console.log(attsCollector);
})

An here is a fiddle to see it in action

Related Question