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

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 添加到参数块

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

How to show multiple feature info on a map click of multiple layers displayed using geoserver

html

javascript

geoserver

openlayers-3