Question

我使用我在GeoServer中添加的图层创建了一个地图。

我创建了GetFeatureInfoUrl函数，以便在单击图层时获取属性表。但是当我点击地图时，所有图层的所有信息框都会显示出来。即使关闭了一个图层（位于另一个图层的顶部），也会出现其属性信息。

如何制作，以便一次只显示一个信息框？（因此，如果两个图层彼此叠加并且用户单击地图，则会显示另一个图层上的图层的属性信息。）

一位在线用户向我解释了如何操作，但没有提供代码。他提出了以下解释：

遍历图层列表
在每个图层上调用get（＆＃34;可见＆＃34;）以获取图层切换器设置的可见性状态
对于每个可见图层，将其名称附加到可见图层名称列表
将可见图层名称列表加入包含逗号分隔图层名称的单个字符串
将逗号分隔的可见图层名称字符串作为附加参数QUERY_LAYERS传递给testSource.getGetFeatureInfoUrl＆＃34;

如何创建此代码？

HTML：

<!DOCTYPE html>
<html>
  <head>
        <title>Map</title>
        <link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css">
        <link rel="stylesheet" href="ol3-layerswitcher.css">
        <script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
        <script src="ol3-layerswitcher.js"></script>

  </head>
  <body>
    <div id="map" style="width:100%;"></div>
    <script src="javascript4.js"></script>
    <div id="info2"></div>
    <div id="info3"></div>
  </body>
</html>

JavaScript的：

var testSource2 = new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/wms',
params: {'LAYERS': 'Marine:Great_Britain', 'TILED': true},
    serverType: 'geoserver'
});

var testSource3 = new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/wms',
params: {'LAYERS': 'Marine:Bedrock_Geology', 'TILED': true},
    serverType: 'geoserver'
});

var layers = [
    new ol.layer.Tile({
      source: new ol.source.MapQuest({layer: 'osm'})
    }),

        new ol.layer.Group({
            title: 'Layers',
            layers: [

                //Implementing layers

                new ol.layer.Tile({
                    title: 'Great Britain',
                    source: testSource2
                }),

                new ol.layer.Tile({
                    title: 'Geology - Bedrock',
                    source: testSource3
                }),
            ]
        })
  ];

  var map = new ol.Map({
    layers: layers,
    target: 'map',
    view: new ol.View({
      center: [51480.6, 7216744.2], //UK
      zoom: 5
    })
  });



//Function to get features from layer
map.on('singleclick', function(evt) {
    document.getElementById('info2').innerHTML = '';
    viewResolution = map.getView().getResolution();
    var url = testSource2.getGetFeatureInfoUrl(
        evt.coordinate, viewResolution, 'EPSG:3857',
        {'INFO_FORMAT': 'text/html'});
    if (url) {
      document.getElementById('info2').innerHTML =
          '<iframe seamless src="' + url + '"></iframe>';
    }
});

//Function to get features from layer
map.on('singleclick', function(evt) {
    document.getElementById('info3').innerHTML = '';
    viewResolution = map.getView().getResolution();
    var url = testSource3.getGetFeatureInfoUrl(
        evt.coordinate, viewResolution, 'EPSG:3857',
        {'INFO_FORMAT': 'text/html'});
    if (url) {
      document.getElementById('info3').innerHTML =
          '<iframe seamless src="' + url + '"></iframe>';
    }
});


  //Layer switcher to turn layers on and off
   var layerSwitcher = new ol.control.LayerSwitcher({
   tipLabel: 'Legend'
});
map.addControl(layerSwitcher);

Answer 1

我认为问题在于您没有检查map.on('singleclick')是否点击了哪个图层。创建一个map.on('singleclick')处理程序，因为两个侦听器中的代码完全相同。

map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
    var source = layer.getSource();        
   ...
});

现在，您将获得已点击的图层的来源，并可以将其与您提到的代码一起使用。

点击地图时显示多个信息框（GeoServer图层）

1 个答案: