[GIS] Get all overlapping feature information using WMS GetFeatureInfo, OL3, Geoserver

geoservergetfeatureinfoopenlayers

I've built a simple ol3 map with wms-polygon overlay functionality from a local geoserver 2.8.0. I added a working "WMS GetFeatureInfo" from the ol3 examples.
My problem is that I have some identical overlapping polygons with diffrent attributes. When I click on a polygon (with 10 identical copies) I just get the info from one feature (maybe the top one).

Instead of this I need a results from all of the identical overlapping features.

Does anybody know how to implement this, below is my attempt?

This is my code:

  var wmsSource = new ol.source.TileWMS({
    url: 'http:localhost:8082/geoserver/wms',
    params: {'LAYERS': 'gdi:M4_Porjektkarte'},
    serverType: 'geoserver',
   });

  var wmsLayer = new ol.layer.Tile({
    source: wmsSource
  });

  var view = new ol.View({
    center: [0,0],
    zoom: 3
  });

  var map = new ol.Map({
    layers: [wmsLayer],
    target: 'map',
    view: view
  });

  map.on('singleclick', function(evt) {
    document.getElementById('info').innerHTML = '';
    var viewResolution = /** @type {number} */ (view.getResolution());
    var url = wmsSource.getGetFeatureInfoUrl(
        evt.coordinate, viewResolution, 'EPSG:3857',
        {'INFO_FORMAT': 'text/html'});
    if (url) {
      document.getElementById('info').innerHTML =
          '<iframe seamless src="' + url + '"></iframe>';
    }
  });

Best Answer

you need to parse the response getted back to grap all the features. consider the following code snip:

map.on('singleclick', function(evt) {
      var url = wms_layer.getSource().getGetFeatureInfoUrl(
          evt.coordinate, viewResolution, viewProjection,
          {'INFO_FORMAT': 'text/javascript',
           'propertyName': 'formal_en'});
      if (url) {
        var parser = new ol.format.GeoJSON();
        $.ajax({
          url: url,
          dataType: 'jsonp',
          jsonpCallback: 'parseResponse'
        }).then(function(response) {
          var result = parser.readFeatures(response);
          if (result.length) {
            var info = [];
            for (var i = 0, ii = result.length; i < ii; ++i) {
              info.push(result[i].get('formal_en'));
            }
            container.innerHTML = info.join(', ');
          } else {
            container.innerHTML = '&nbsp;';
          }
        });
      }
    });

inspired from this example

Related Question