CODEWITHSUNDEEP
openlayers-3
Yung Fei
Yung Fei

Reputation: 75

Get Features in heatmap openlayers3

I want to get all features when I click on heat map in openlayers 3...It is possible or not? How to count the features in heat map and give heat map total count features label? thanks

Upvotes: 0

Views: 1148

Answers (1)

giser_yugang
giser_yugang

Reputation: 6176

Openlayers3 can do this easily,You can use getFeatures() to get all the features.

var features = heatlayer.getSource().getFeatures()
alert('count: '+features.length);

This method returns an array containing all the features,so you can use length to count.

<!DOCTYPE html>
<html>
  <head>
    <title>heatlayer count example</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
    <style>
      .map {
        max-width: 566px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var raster = new ol.layer.Tile({
        source: new ol.source.OSM()
      });
      
      var heatlayer = new ol.layer.Heatmap({
        source: new ol.source.Vector(),
        blur: parseInt(14),
        radius: parseInt(8)
      });
      
            var adddata = [[104.807799,30.232233],[106.803599,31.233225]];
      //addfeature
      for(var i = 0;i < adddata.length ; i++){
        var feature = new ol.Feature({
          geometry:new ol.geom.Point([adddata[i][0],adddata[i][1]])
        });
        heatlayer.getSource().addFeature(feature);
    }
      

      var map = new ol.Map({
        layers: [raster,heatlayer],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
          })
        }),
        view: new ol.View({
		  projection: 'EPSG:4326',
          center:[104.07, 30.7],
          zoom: 2
        })
      });

      map.on('click', function(event){
        var features = heatlayer.getSource().getFeatures()
        alert('count: '+features.length);
      });
       
    </script>
  </body>
</html>

Upvotes: 1

Related Questions