单击地图(GeoServer 图层）时会显示多个信息框

Multiple info boxes showing up when I click on map (GeoServer layers)

本文关键字：显示 信息 地图 GeoServer 图层 单击      更新时间：2023-09-26

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

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

如何使一次只显示一个信息框？（因此，如果两个图层彼此重叠并且用户单击地图，则将显示位于另一个图层之上的图层的属性信息。

一位在线用户向我解释了如何做到这一点，但没有提供代码。他给出了以下解释：

  • 循环访问图层列表
  • 在每个图层上调用 get（"visible"） 以获取图层切换器设置的可见性状态
  • 对于每个可见图层，将其名称追加到可见图层名称列表中
  • 将可见图层名称列表连接到包含逗号分隔图层名称的单个字符串中
  • 将逗号分隔的可见图层名称字符串作为附加参数QUERY_LAYERS在testSource.getFeatureInfoUrl的最后一个参数中的地图
    • 中传递"

如何创建此代码？

.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);
我相信

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

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

现在，您将获得单击的层的源代码，并能够将其与提到的代码一起使用。

相关文章：