1

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?

jpinilla
  • 115
  • 6
  • If you expect results from multiple layers you will need to change `document.getElementById('info').innerHTML = html;` to `document.getElementById('info').innerHTML += html;` to display more than one. – Mike Jun 19 '22 at 17:38
  • I've changed that, but still doesn't work. No error messages in the console either. – jpinilla Jun 19 '22 at 17:46
  • You should use method "forEachLayerAtPixel" https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#forEachLayerAtPixel let pixel = map.getPixelFromCoordinate(evt1.coordinate); – ivom Jun 19 '22 at 18:23
  • @ivom it seems that this method is deprecated, isn't it? Anyway, I'd need a slightly more detailed description since my knowledge on these matters is quite restricted. – jpinilla Jun 21 '22 at 09:48

1 Answers1

0

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
                                }
                            });
                    }
                }
            }
        });
    }
ivom
  • 51
  • 4
  • I've tried it, using console.log(data.features) in the "if" clause, but nothing appears in the console. – jpinilla Jun 26 '22 at 17:08