How to get GetFeatureInfoUrl from multiple layers in OpenLayers 3

Question

I have multiple layers in a map with layer group now onclick I want to get the GetFeatureInfoUrl for the different layers on which I am clicking but the problem is that I am getting only the Info for the last layer appended not the others.

Here is my code:

 var wms_layer;
    var map = new ol.Map({
        target: 'map',
        layers: [
        new ol.layer.Group({
            'title': 'Base maps',
            layers: [
            new ol.layer.Tile({
                title: 'Water color',
                type: 'base',
                visible: false,
                source: new ol.source.Stamen({
                    layer: 'watercolor'
                })
            }),
            new ol.layer.Tile({
                title: 'OSM',
                type: 'base',
                visible: true,
                source: new ol.source.OSM({
                    attributions: [
                    'All maps © <a href="https://www.opencyclemap.org/">OpenCycleMap</a>',
                    ol.source.OSM.ATTRIBUTION
                    ],
                    url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png'
                })
            })
            ]
        }),
        new ol.layer.Group({
            title: 'Hisar Data Layers',
            layers: [
            new ol.layer.Tile({
                title: 'Habitations',
                source: new ol.source.TileWMS({
                    url: 'http://192.168.2.2:8080/geoserver/HissarFullData/wms?service',
                    params: {
                        'LAYERS': 'HissarFullData:habitations',
                        'VERSION': '1.1.0',
                        'FORMAT': 'image/png',
                    },
                    serverType: 'geoserver'
                })
            }),
           wms_layer = new ol.layer.Tile({
                title: 'Hisar PWD',
                source: new ol.source.TileWMS({
                    url: 'http://192.168.2.2:8080/geoserver/HissarFullData/wms?service',
                    params: {
                        'LAYERS': 'HissarFullData:pwd',
                        'VERSION': '1.1.0',
                        'FORMAT': 'image/png',
                    },
                    serverType: 'geoserver'
                })
            }),
            new ol.layer.Tile({
                title: 'Hisar Block',
                source: new ol.source.TileWMS({
                    url: 'http://192.168.2.2:8080/geoserver/HissarFullData/wms?service',
                    params: {
                        'LAYERS': 'HissarFullData:block_boundary',
                        'VERSION': '1.1.0',
                        'FORMAT': 'image/png',
                    },
                    serverType: 'geoserver'
                })
            })
            ]
        })
        ],
        view: new ol.View({
            center: ol.proj.transform([75.7217, 29.1492], 'EPSG:4326', 'EPSG:3857'),
            zoom: 10,
            minZoom: 5,
            maxZoom: 17
        })
    });
    var layerSwitcher = new ol.control.LayerSwitcher({
        tipLabel: 'Layers' // Optional label for button
    });
    map.addControl(layerSwitcher);
    var viewProjection = map.getView().getProjection();
    var viewResolution = map.getView().getResolution();
    map.on('click', function (evt) {
        var url = wms_layer.getSource().getGetFeatureInfoUrl(
            evt.coordinate, viewResolution, viewProjection,
            {
                'INFO_FORMAT': 'text/html',
            });
        if (url) {
            document.getElementById('info').innerHTML =
            '<iframe style="width:100%;height:110px;border:0px;" id="iframe" seamless src="' + url + '"></iframe>';
            $('#myModal').modal('show');
        }
    });

Whenever I click on the map I always getting info of the HissarFullData:block_boundary layer. I am using Layer switcher with this .

Answer 1

As mentioned by @user30184 in comments the important parameter here is QUERY_LAYERS&

To do a GetFeatureInfo request for multiple layers you need to list all those layers you want information on in the QUERY_LAYERS& parameter.

So consider these queries:

In this the GetMap request is based on the GBR_BGS_625k_BLS layer LAYERS=GBR_BGS_625k_BLS& and the GetFeatureInfo request queries for information on the same layer QUERY_LAYERS=GBR_BGS_625k_BLS&

http://ogc.bgs.ac.uk/cgi-bin/BGS_Bedrock_and_Superficial_Geology/wms?REQUEST=GetFeatureInfo&SERVICE=WMS&VERSION=1.3.0&LAYERS=GBR_BGS_625k_BLS&STYLES=default&FORMAT=image/png&BGCOLOR=0xFFFFFF&TRANSPARENT=TRUE&CRS=EPSG:4326&BBOX=49.3249168839067,-10.3982024209475,61.0455548096319,3.17166214686146&WIDTH=1020&HEIGHT=881&I=736&J=652&info_format=text/html&QUERY_LAYERS=GBR_BGS_625k_BLS&

In the next example the GetMap request is the same (it serves the purpose of providing an image to be used to provide an image coordinate I=736&J=652& but this time we want information for three layers QUERY_LAYERS=GBR_BGS_625k_BLS,GBR_BGS_625k_SLT,GBR_BGS_625k_BLT&

http://ogc.bgs.ac.uk/cgi-bin/BGS_Bedrock_and_Superficial_Geology/wms?REQUEST=GetFeatureInfo&SERVICE=WMS&VERSION=1.3.0&LAYERS=GBR_BGS_625k_BLS&STYLES=default&FORMAT=image/png&BGCOLOR=0xFFFFFF&TRANSPARENT=TRUE&CRS=EPSG:4326&BBOX=49.3249168839067,-10.3982024209475,61.0455548096319,3.17166214686146&WIDTH=1020&HEIGHT=881&I=736&J=652&info_format=text/html&QUERY_LAYERS=GBR_BGS_625k_BLS,GBR_BGS_625k_SLT,GBR_BGS_625k_BLT&

You don't have to query the layer that is used to generate the GetMap request even, so GetMap is based on GBR_BGS_625k_BLS, but GetFeatureInfo is for GBR_BGS_625k_SLT and GBR_BGS_625k_BLT

http://ogc.bgs.ac.uk/cgi-bin/BGS_Bedrock_and_Superficial_Geology/wms?REQUEST=GetFeatureInfo&SERVICE=WMS&VERSION=1.3.0&LAYERS=GBR_BGS_625k_BLS&STYLES=default&FORMAT=image/png&BGCOLOR=0xFFFFFF&TRANSPARENT=TRUE&CRS=EPSG:4326&BBOX=49.3249168839067,-10.3982024209475,61.0455548096319,3.17166214686146&WIDTH=1020&HEIGHT=881&I=736&J=652&info_format=text/html&QUERY_LAYERS=GBR_BGS_625k_SLT,GBR_BGS_625k_BLT&

So in your example case if you want all layers to be queried independently of which WMS layer is clicked the code may look something like:

map.on('click', function (evt) {
    var url = wms_layer.getSource().getGetFeatureInfoUrl(
        evt.coordinate, viewResolution, viewProjection,
            {
                'INFO_FORMAT': 'text/html',
                'QUERY_LAYERS': 'HissarFullData:block_boundary,HissarFullData:habitations,HissarFullData:pwd'
            });
        ...

Answer 2

You have to use the LAYERS params if you want to filter your layers with QUERY_LAYERS, here is how i handle it

   clickHandler(event) {
    const viewResolution = this.mMap.getView().getResolution();
    const viewProjection = this.mMap.getView().getProjection();
    const { layers } = this.props
    var coordinate = event.coordinate;

    var url = ""
    let content = this.popupContent
    let popup = this.popup
    let queryLayers = ''

    if(layers){
        layers.forEach(function(lyr,i){
            queryLayers += `cahibi1:${lyr.Title}${(i<layers.length-1)?',' :''}`
        })
        console.log(queryLayers)
    }
    this.mMap.getLayers().forEach(function (lyr) {
        if (lyr.getSource()["getGetFeatureInfoUrl"] !== undefined) {

            url = lyr.getSource().getGetFeatureInfoUrl(
                coordinate, viewResolution, viewProjection,
                { 
                    'INFO_FORMAT': 'text/html' ,
                    'QUERY_LAYERS':queryLayers,
                    'LAYERS':  queryLayers
                });
            console.log('url', url)
            if (url) {
                popup.setPosition(coordinate);
                content.innerHTML =
                    '<iframe seamless src="' + url + '"></iframe>';
            }
        }
    })
}