如何在使用地理服务器显示的多个图层的地图单击上显示多个要素信息

Question

var element = document.getElementById('popup');
var popup = new ol.Overlay({
          element: element,
          positioning: 'bottom-center',
          stopEvent: false
      });
      map.addOverlay(popup);
var Source_ATM =
        new ol.source.TileWMS({
        url: 'http://localhost:8080/geoserver/BMC/wms',
        params: {
            'LAYERS': 'BMC:atm',
            'VERSION': '1.1.0',
            'FORMAT': 'image/png',
            'TILED': true
        },
        id:"atm",
        serverType:'geoserver'
        });

    var Layer_ATM = new ol.layer.Tile({
        source: Source_ATM,
    });
    Layer_ATM.setVisible(false);
    //block_boundary Layer
    var Source_BlockBoundary =
        new ol.source.TileWMS({
        url: 'http://localhost:8080/geoserver/BMC/wms?',
        params: {
            'LAYERS': 'BMC:block_boundary',
            'VERSION': '1.1.0',
            'FORMAT': 'image/png',
            'TILED': true
        },
        id:"block_boundary",
        serverType:'geoserver'
    });
    var Layer_block_boundary = new ol.layer.Tile({
        source: Source_BlockBoundary,
    });
    Layer_block_boundary.setVisible(false);
    function featureinfoFun() {
                  map.on('singleclick', function (evt) {
                      var view = map.getView();
                      var viewResolution = view.getResolution();
                      var source = Layer_block_boundary.getSource();
                      //var source2=Layer_test.getSource();
                      var url = source.getGetFeatureInfoUrl(
                        evt.coordinate, viewResolution, view.getProjection(),
                        { 'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 50 });
                      if (url) {
                          var coordinate = evt.coordinate;
                          popup.setPosition(coordinate);
                          $(element).popover("destroy");
                          $(element).popover({
                              'placement': 'top',
                              'html': true,
                              'content': '<iframe style="width: 105%;"seamless src="' + url + '"></iframe>'
                          });
                          $(element).popover('show');
                          $(element).css('display', 'block');
                          //$(element).popup.classList.toggle('show');
                          //$(element).popup.close();
                      }
                  });
            }

    .ol-popup {
            position: absolute;
            background-color: white;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            bottom: 12px;
            left: -50px;
            min-width: 280px;
          }
          .ol-popup:after, .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
          }
          .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
          }
          .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
          }
          .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
          }
          .ol-popup-closer:after {
            content: "✖";
          }

    <div id="map1" class="map" style="position: fixed; height:100%; margin-top: 28px;">
                    <!--div class="ol-toggle-options ol-unselectable"><a title="Toggle options toolbar" onClick="toggleControlPanel()" href="#toggle"></a></div-->
                    <div id="popup" class="ol-overlay-container" style="width:200px;height: 0px;">
                    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                        <div id="popup-content" class="popover-content"></div>

这是我的代码。请帮我显示两个图层的特征信息。请帮我写代码。我想显示多个图层，当我单击一个图层和另一个图层时，它将显示来自地理服务器的两个图层的属性信息

Answer 1

要显示来自两个图层的信息，您需要发出两个getFeatureInfo请求（每个图层一个）。或者，您可以通过将LAYERS和QUERY_LAYERS参数设置为以逗号分隔的图层名称列表来组合请求中的两个图层（如果要指定样式，则还需要将两个样式名称添加到STYLES参数中）。

最简单的方法是在调用 getFeatureInfoUrl 时将 LAYERS & QUERY_LAYERS 添加到参数块中