Javascript 显示带有多个层的弹出窗口-openlayers

我使用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 = [];

---

如果您发现使用单独的图层更容易，例如，在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'} );

---

将来自同一服务的WMS层与单个OpenLayers层组合起来会更有效。参见GIS StackExchange中最近的问题，该解决方案同样适用于ImageWMS。您还可以通过在QUERY_LAYERS params选项中指定WMS层名称，在GetFeatureInfoUrl调用中覆盖任何OpenLayers WMS层的LAYERS参数。请详细说明一下。就像这里，我把我的层分开。对于单层，它工作得很好。有没有办法将所有图层组合在一起，分别调用它们的功能以显示弹出窗口。

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'} );