GetFeatureInfo query only for visible layers in OpenLayers 6

Question

I'm a newby with JS and OL, and I have an Openlayers 6 map with different WMS layers grouped into several ol.layer.Group . 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

This code works well for just one layer (wmsLayer5, in this case)

map.on('singleclick', function (evt) {
if (!wmsLayer5.getVisible()) return;
document.getElementById('info').innerHTML = '';
const viewResolution = /** @type {number} */ (vista.getResolution());
const url = wmsLayer5.getSource().getFeatureInfoUrl(
    evt.coordinate,
    viewResolution,
    'EPSG:25830',
    {'INFO_FORMAT': 'text/html'}
    );
    if (url) {
        fetch(url)
        .then((response) => response.text())
        .then((html) => {
            document.getElementById('info').innerHTML = html;
        });
    }
});

But I need a code to iterate over all layers and only call getFeatureInfo if they are visible. I've tried this one, but doesn't work and doesn't return any message in the console

map.on('singleclick', function (evt1) {
            document.getElementById('info').innerHTML = '';
            var viewResolution = /** @type {number} */
            (vista.getResolution());
            var url = '';
            document.getElementById('info').innerHTML ='';
            layers.forEach(function (layer, i, layers) {
                if (layer.getVisible() ) {
                    url = layer.getSource().getGetFeatureInfoUrl(
                        evt1.coordinate, 
                        viewResolution, 
                        'EPSG:25830', {
                        'INFO_FORMAT': 'text/html',
                            'FEATURE_COUNT': '300'
                    });
                    if (url) {
                        fetch(url)
                        .then((response) => response.text())
                        .then((html) => {
                            document.getElementById('info').innerHTML += html;
                        });
                    }
                }
            });
        
        });

Any suggestion to fix it?

Answer 1

This method has been deprecated since version 6.13 (4 months ago) and won't be changed before next major release. I didn't use suggested replacement layer.getData() . Following code iterates through all the layers and queries only visible ones and of type Image.

    map.on("click", onMouseClick);
    function onMouseClick(browserEvent) {
        let coordinate = browserEvent.coordinate;
        let pixel = map.getPixelFromCoordinate(coordinate);
        map.forEachLayerAtPixel(pixel, function (layer) {
            if (layer instanceof ol.layer.Image) {
                if (layer.get("visible")) {
                    let url = layer.getSource().getFeatureInfoUrl(coordinate, map.getView().getResolution(), "EPSG:3857", {
                        INFO_FORMAT: "application/json",
                    });
                    if (url) {
                        fetch(url)
                            .then(function (response) {
                                return response.text();
                            })
                            .then(function (json) {
                                let data = JSON.parse(json);
                                if (data.features.length > 0) {
                                    //Do something with data.features
                                }
                            });
                    }
                }
            }
        });
    }