Get Attributes from Multiple overlapping WMS layers

Question

I am working with Openlayers to consume WMS from GeoServer. I have loaded multiple layers and get attributes for one layer using getGetFeatureInfoUrl. But this approach gets attributes for the specific layer on which getGetFeatureInfoUrl method is called.

I have overlapping layers , hence I need to get attributes from all overlapping layer at a specific point.

Below is how I am doing it :

var wmsSource = new ol.source.TileWMS({
    url: url,
    params: { 'LAYERS': 'localhost:village_maps', 'TILED': true },
    serverType: 'geoserver',
    // Countries have transparency, so do not fade tiles:
    transition: 0,
    transparent: true,
    opacity: 0.5,
    //format: new ol.format.GeoJSON()
});
map.on('singleclick', function (evt) {

      var viewResolution = (view.getResolution());
      var url = wmsSource.getGetFeatureInfoUrl(
        evt.coordinate, viewResolution, 'EPSG:3857',
        { 'INFO_FORMAT': 'application/json'}); //text/html

      if (url) {
          var parser = new ol.format.GeoJSON();
          var lookup = {};
          $.ajax({
              url: url,
              dataType: 'json',
              method: 'GET',
              success: function (response) {
                  var result = parser.readFeatures(response);
                  //if ((result.length > 0) && (wmsLayer.getVisible() == true)) {
                  if (result.length > 0)
                  {
                      var coord = evt.coordinate;
                      var content = '<p>';

                      for (var i = 0, ii = result.length; i < ii; ++i)
                      {
                          // Gets attributes from wmsSource only, But I have multiple other sources as well !
                          var text = result[i];
                          var props = text.getProperties();
                          var txt = text.getId();
                          content = content + '<strong>ID:' + txt + '</strong><br>';
                          content = content + '<strong>District:' + props.district + '</strong><br>';

                      }

                      content = content + '</p>';
                      content_element.innerHTML = content;
                      overlay.setPosition(coord);
                  }
              }
          });
      }        
  });

Is it like for every layer I need to url again and then render the json ? or is there a better way to accomplish this.

Answer 1

Example of multiple WMS layers in a single OpenLayers layer

For this service http://ogc.bgs.ac.uk/cgi-bin/BGS_Bedrock_and_Superficial_Geology/wms?service=WMS&version=1.3.0&request=GetCapabilities this would display 2 of the 6 sublayers:

    source: new ol.source.TileWMS({
        url: 'http://ogc.bgs.ac.uk/cgi-bin/BGS_Bedrock_and_Superficial_Geology/wms',
        params: {
            'FORMAT': 'image/png',
            'LAYERS': 'GBR_BGS_625k_BLS,GBR_BGS_625k_SLS',
            'TRANSPARENT': 'TRUE'
        },
        attributions: bgsAttrib,
    }),

To show and hide individual WMS layers update the LAYERS parameter, for example to hide the SLS layer and only show BLS:

source.updateParams({'LAYERS': 'GBR_BGS_625k_BLS'});