显示具有多层的弹出窗口 - openlayers

Question

我正在使用 geoserver 和 openlayers 通过单击我已显示带有一层的弹出窗口来显示弹出窗口。 但是当我有多个图层时，我无法显示弹出窗口。

map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Group({
                layers: [
                    new ol.layer.Group({
                        layers: [
                            new ol.layer.Tile({
                                source: new ol.source.Stamen({
                                    layer: 'baselayer'
                                })
                            }),


new ol.layer.Image({
                        title:'Sometitle',
                        source: new ol.source.ImageWMS(
                        {
                            ratio:1,
                            url:"http://localhost:wp/wms",
                            params:{
                                'LAYERS':'layer:layername',
                            }
                        })
                    }),
                     new ol.layer.Image({
                        title:'sometitle2',
                        source: new ol.source.ImageWMS(
                        {
                            ratio:1,
                            url:"http://localhost:wp/wms",
                            params:{
                                'LAYERS':'layer:layername',   
                            }
                        })
                    }),

然后使用弹出代码，

//弹出脚本

var popup = new ol.Overlay.Popup();
map.addOverlay(popup);


//Displaying popup on click

map.on('singleclick', function(evt) {

    console.log("In singleClick");


    //Check for visible layers
    var data = [];

    layer = map.getSource(); //
    var url = layer.getGetFeatureInfoUrl(
        evt.coordinate, viewResolution, view.getProjection(),    
        reqwest({        
            url: url,
            type: 'json',
        }).then(function (data) {
            if (data.features.length == 0) {
              popup.hide(); //If user clicks outside
              return;
            }
            for (var i = 0; i < data.features.length; i++) 
            {
            console.log("In for");

            var feature = data.features[i]; //Read features of JSON array
            var props = feature.properties; //Read properties of feature array
            var data1 = [];
            var data2 = [];

最后，在弹出窗口的所有代码之后（这对我来说显示单层的弹出窗口有用）我使用这一行来呈现我的弹出窗口。

popup.show(evt.coordinate,popup);

Answer 1

如果您发现拥有单独的图层更容易，例如在 GIS StackExchange 问题中，您只显示基岩地质：

source: new ol.source.ImageWMS({
    url: 'http://ogc.bgs.ac.uk/cgi-bin/BGS_Bedrock_and_Superficial_Geology/wms',
    params: {
        'FORMAT': 'image/png',
        'LAYERS': 'GBR_BGS_625k_BLS',
        'TRANSPARENT': 'TRUE'
    },
    attributions: bgsAttrib,
}),

在信息请求中，您可以指定要查询的其他图层，这样您就可以在一个弹出窗口中获得基岩和表层地质：

source.getGetFeatureInfoUrl( evt.coordinate,
                             view.getResolution,
                             view.getProjection(),
                             { 'QUERY_LAYERS': 'GBR_BGS_625k_BLS,GBR_BGS_625k_SLS',
                               'INFO_FORMAT': 'text/html',
                               'FEATURE_COUNT': '10'} );