在 Openlayers 3 中查询多个图层中的多个特征

Question

我一直在使用此处显示的示例 (https://astuntechnology.github.io/osgis-ol3-leaflet/ol3/05-WMS-INFO.html) 尝试从我在应用程序中设置的多个 TileWMS 图层中检索坐标处的要素。

这个例子已经过调整，现在它使用 reqwest 库以 JSONP 格式返回数据，但现在我试图找出最好的方法来调整它以包含多个层和多个特性。

我正在考虑使用 map.forEachLayerAtPixel 函数来检索地图点击位置处存在的所有图层，然后在 if 语句中调用该功能并将其添加到变量中以构建动态 html 结果表。

我不知道这是否是最好的方法，但这是我能想到的唯一方法，因此我能够以一种我可以具体布局的方式检索信息。

下面是我的地图点击功能的 javascript，但它没有返回弹出窗口，也没有显示任何错误。

我不确定我是否使用了正确的方法，下面有什么看起来不正确的地方吗？

谢谢

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

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

  if($(window).width() <= 767 && document.getElementById('sidebar').style.display == 'block') {
    $('#sidebar').toggle();
    $(".navbar-collapse.in").collapse("hide");
    map.updateSize();
    return false;
  }
  // Hide existing popup and reset it's offset
    popup.hide();
    popup.setOffset([0, 0]);

    var displayedLayers = [];
    var content = "";

    map.forEachLayerAtPixel(evt.pixel, function(layer) {
      displayedLayers.push(layer.get('name'));
    });

    if ($.inArray('layer62', displayedLayers) > -1) {
      var url = layer62
                    .getSource()
                    .getGetFeatureInfoUrl(
                        evt.coordinate,
                        map.getView().getResolution(),
                        map.getView().getProjection(),
                        {
                            'INFO_FORMAT': 'text/javascript',
                            'format_options': 'callback:results',
                            'propertyName': 'definition'
                        }
                    );

        reqwest({
            url: url,
            type: 'jsonp',
            jsonpCallbackName: 'results'
        }).then(function (data) {
            var feature = data.features[0];
            var props = feature.properties;
            content += "<h4>Flood Zone 3</h4><p>" + props.definition + "</p>";
        });
    }    
    if ($.inArray('layer63', displayedLayers) > -1) {
      var url = layer63
                    .getSource()
                    .getGetFeatureInfoUrl(
                        evt.coordinate,
                        map.getView().getResolution(),
                        map.getView().getProjection(),
                        {
                            'INFO_FORMAT': 'text/javascript',
                            'format_options': 'callback:results',
                            'propertyName': 'definition'
                        }
                    );

        reqwest({
            url: url,
            type: 'jsonp',
            jsonpCallbackName: 'results'
        }).then(function (data) {
            var feature = data.features[0];
            var props = feature.properties;
            content += "<h4>Flood Zone 2</h4><p>" + props.definition + "</p>";
        });
    }
    return content;
    popup.show(evt.coordinate, content);    
});

Answer 1

编辑原始答案，因为它不正确，这个似乎有效。它只是基于您的代码的测试，但改变了弹出窗口的处理方式：

var layers = [
new ol.layer.Tile({
    source: new ol.source.TileWMS({
        url: 'http://demo.opengeo.org/geoserver/wms?',
        params: {
            'LAYERS': 'ne:ne',
                'TILED': true,
                'version': '1.1.0'
        },
        serverType: 'geoserver',
    })
}),
new ol.layer.Tile({
    source: new ol.source.TileWMS({
        url: 'http://demo.opengeo.org/geoserver/wms?',
        params: {
            'LAYERS': 'ne:ne',
                'TILED': true,
                'version': '1.1.0'
        },
        serverType: 'geoserver',
    })
})


];
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var popup = new ol.Overlay( /** @type {olx.OverlayOptions} */ ({
    element: container,
    autoPan: true,
    autoPanAnimation: {
        duration: 250
    }
}));
var map = new ol.Map({
    layers: layers,
    target: 'map',
    overlays: [popup],
    view: new ol.View({
        center: [327641, 4149464],
        zoom: 3,
        //EPSG: 25830
    })
});

map.on('singleclick', function (evt) {
 content.innerHTML = "";

    var displayedLayers = [];
    var responses = 0;

    var url = layers[0].getSource()
        .getGetFeatureInfoUrl(
    evt.coordinate,
    map.getView().getResolution(),
    map.getView().getProjection(), {
        'INFO_FORMAT': 'text/javascript',
            'format_options': 'callback:parseResponse',
            'propertyName': 'name'
    });

    reqwest({
        url: url,
        type: 'jsonp',
        jsonpCallbackName: 'parseResponse'
    }).then(function (data) {
        var feature = data.features[0];
        var props = feature.properties;
        content.innerHTML += "<h4>First Layer</h4><p>" + props.name + "</p>";
       popup.setPosition(evt.coordinate);
    });

    // Second layer
    var url = layers[1].getSource()
        .getGetFeatureInfoUrl(
    evt.coordinate,
    map.getView().getResolution(),
    map.getView().getProjection(), {
        'INFO_FORMAT': 'text/javascript',
            'format_options': 'callback:parseResponse',
            'propertyName': 'name'
    });

     reqwest({
        url: url,
        type: 'jsonp',
        jsonpCallbackName: 'parseResponse'
    }).then(function (data) {
        var feature = data.features[0];
        var props = feature.properties;
        content.innerHTML += "<h4>Second layer</h4><p>" + props.name + "</p>";
       popup.setPosition(evt.coordinate);
    });

});  

Jsfiddle 在这里：http://jsfiddle.net/fbma/1pchmpoo

Answer 2

对于任何在 openlayers 3+ getGetFeatureInfoUrl 函数中使用多层的人来说，我的解决方案是传递参数 LAYERS、QUERY_LAYERS 和 FEATURE_COUNT。特别是最后一个，因为甚至包括前两个层中的所有层，geoserver 确实采用了所有层，但假设 FEATURE_COUNT 为 1 所以下一个例子完成了工作

var url = layers[0].getSource()
    .getGetFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(), {
        **'LAYERS':'ne:ne,ne:ne2,ne:ne3,ne:ne4,ne:ne5', 
        'QUERY_LAYERS': 'ne:ne,ne:ne2,ne:ne3,ne:ne4,ne:ne5',
        'FEATURE_COUNT':100000**,
    'INFO_FORMAT': 'text/javascript',
        'format_options': 'callback:parseResponse',
        'propertyName': 'name'
});