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>

这是我的代码。请帮我显示两个图层的功能信息。请帮我代码。我想显示多个图层，当我点击一个图层和另一个图层时，它将显示来自两个图层的geoserver的属性信息

Answer 1

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

最简单的方法是添加LAYERS＆amp;调用QUERY_LAYERS

时，getFeatureInfoUrl到param块

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

1 个答案: