Get multiple FeatureInfo from multiple WMS layers stacked on top of each other

Question

I have two layers of WMS layers stacked on top of each other and each contains its own feature information. Upper layer has style=line and bottom layer has style=color, and some lines of the upper layer will cover the features of the layer below, like this:

Each color of the layer below corresponds to a separate feature (skin color = "features":[{"type":1..., grey = "features":[{"type":2..., red = "features":[{"type":3...). I want when I click on the feature of the upper layer, it will show the FeatureInfo of the upper layer and three FeatureInfo of the layer below to table and show marker number in feature of below layer, maybe look like this:

How do i get the information of the lower layers that are in the area feature of the upper layer?

Relevant existing code:

Add layer to map:

//below layer
var belowLayer= new ol.layer.Image({
            view: new ol.View({
            projection: 'EPSG:4326'
            }),
            source: new ol.source.ImageWMS({
            url: 'http://localhost:8081/geoserver/dbpgis/wms',
            params: {LAYERS: 'dbpgis:belowlayer', 'TILED': true},
            serverType: 'geoserver',
            ratio: 1,
            }),
            visible: true,
            title: 'below'
        });
        map.addLayer(belowLayer)

       //upper layer
        var view = new ol.View({
            projection: 'EPSG:4326',
        });
        var source = new ol.source.ImageWMS({
            url: 'http://localhost:8081/geoserver/dbpgis/wms',
            params: {LAYERS: 'dbpgis:upperlayer', 'TILED': true},
            serverType: 'geoserver',
            ratio: 1,
            format: new ol.format.GeoJSON()
        });
        var upperLayer= new ol.layer.Image({
            view: view,
            source: source,
            // minZoom: 17,
            visible: true,
            title: 'upper',
        });
        map.addLayer(upperLayer);

getFeatureInfo:

//get featureinfo for upper layer
var content = document.getElementById('info');     
        map.on('click', function (evt) {
            overlayPopup.hide();
            content.innerHTML = '';
            var viewResolution = mapView.getResolution();
            var url = source.getFeatureInfoUrl(
                evt.coordinate,
                viewResolution,
                'EPSG:3857',
                {
                    'INFO_FORMAT': 'application/json',
                    'propertyName': 'feature_upper' 
                },
            );
            if (url) {
                $.getJSON(url, function(data){
                    var feature = data.features[0];
                    var props = feature.properties;
                    content.innerHTML = "<h5>Upper layer : </h5><p>" + props.feature_upper +"</p>"
                                        
                    // overlayPopup.show(content.innerHTML);
                    // console.log(props);
                })
            }else{
                alert('error');
            }
            // console.log(url);
        });  

        //get featureinfo of below layer
        var dataBelow = document.getElementById('info_qpk');
        map.on('click', function(evt){
            dataBelow .innerHTML = '';
            viewData = map.getView();
            var url = belowLayer.getSource().getFeatureInfoUrl(
            evt.coordinate,
            viewData.getResolution(),
            'EPSG:3857',
            {
            'INFO_FORMAT': 'application/json',
            'propertyName':'feature_type_1,...'
            },
            );
            // console.log(url);
            if(url){
            $.getJSON(url, function(data){
                var feature = data.features[0];
                var props = feature.properties;
                dataQPK.innerHTML = "<h5>Below layer : </h5><p>" + props.feature_type_1+ "</p>" + "<hr>"+...
                // overlayPopup.show(dataBelow.innerHTML);
            });
            }
        })

Here is my code, this only get data info at click position.

Answer 1

If you have access to the Geoserver in question, why not create a layer group from both layers, and send the getFeatureInfo request to the layer group?

To quote the documentation,

Note: If you are sending a GetFeatureInfo request against a layergroup, all the layers in that layergroup must be set as “Queryable” to get a result (See WMS Settings on Layers page)

Response will be a dictionary with features from both layers at the particular location. You only need to parse them accordingly.