OpenLayers 3 - Several WMS layers, how to get Feature Info only from visible ones?

Question

I have an Openlayers map with several WMS layers from which I want to request feature information through "getGetFeatureInfoUrl". Visibility of layers can be turned on/off in the layer tree. I'd like to, upon clicking somewhere in the map:

• Get Feature Info ONLY for layers that are currently visible
• and, if there are more than one layers at the chosen location, get the Feature Info for all of them.

I used the sample code from the OpenLayers website. I tried variants of this code bit

var url = layers[2].getSource().getGetFeatureInfoUrl(
    evt1.coordinate, viewResolution, 'EPSG:3857', {
        'INFO_FORMAT': 'text/html',
            'FEATURE_COUNT': '300'
    });

like

var url = layers[].getSource().getGetFeatureInfoUrl( or var url = layers[1,2].getSource().getGetFeatureInfoUrl( , but either no Feature Info is delivered, or merely for the last layer - regardless of whether it is visible or not.

I created a JSFiddle with two sample layers here: http://jsfiddle.net/kidalex/j34xzaa3/5/

Similar questions were asked before, like here: https://gis.stackexchange.com/questions/114297/querying-multiple-wms-layers-in-ol3-and-adding-to-a-single-popup-window ; but I cannot fathom how to apply the solutions (JS/OL newbie here).

Answer 1

You should iterate over your layers and only call getFeatureInfo if they are visible and not the base layer, try something like:

map.on('singleclick', function (evt1) {
    document.getElementById('info').innerHTML = '';
    var viewResolution = /** @type {number} */
    (view.getResolution());
    var url = '';
    document.getElementById('info').innerHTML ='';
    layers.forEach(function (layer, i, layers) {
        if (layer.getVisible() && layer.get('name')!='Basemap') {
            url = layer.getSource().getGetFeatureInfoUrl(evt1.coordinate, viewResolution, 'EPSG:3857', {
                'INFO_FORMAT': 'text/html',
                    'FEATURE_COUNT': '300'
            });
            if (url) {
                document.getElementById('info').innerHTML +=
                    '<iframe seamless src="' + url + '"></iframe>';
            }
        }
    });

});

EDIT: grammar