Question

我是新来开放图层的人，目前正在尝试实现一个地图，当检查图层时，我将在其中显示一组信息。目前我有这段代码来显示图层图块

new LayerGroup({
      title: 'Sample Layer Group',
      fold: 'open',
      layers: [
        new Tile({
          title: 'Layer 1',
          visible: false,
          source: new TileWMS({
            url: '',
            ....
            ]
          })
        }),});

我想做的是，只要我选中或取消选中此层，就可以获取该状态（无论是否可见）。

我尝试使用map.getLayerGroup().getActive()，但每次都只收到true。

感谢您的帮助！

Answer 1

如果我对您的理解正确，那么您实际上正在寻找getVisible方法。基于一些OL例子，看看我为您制作的这个例子。

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
    <title>Group Layer</title>
  </head>
  <body>
    <div style="margin: 1rem;">
      <input type="checkbox" id="groupVisible" checked>Group | 
      <input type="checkbox" id="layer1Visible" checked>Layer 1 | 
      <input type="checkbox" id="layer2Visible" checked>Layer 2
    </div>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      const layer1 = new ol.layer.Tile({
        source: new ol.source.TileWMS({
          url: 'https://ahocevar.com/geoserver/wms',
          params: {'LAYERS': 'ne:ne', 'TILED': true},
          serverType: 'geoserver',
          crossOrigin: 'anonymous'
        })
      });
      const layer2 = new ol.layer.Tile({
        extent: [-13884991, 2870341, -7455066, 6338219],
        source: new ol.source.TileWMS({
          url: 'https://ahocevar.com/geoserver/wms',
          params: {'LAYERS': 'topp:states', 'TILED': true},
          serverType: 'geoserver',
          // Countries have transparency, so do not fade tiles:
          transition: 0
        })
      });
      const groupLayer = new ol.layer.Group({
        layers: [layer1, layer2]
      });
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          groupLayer
        ],
        view: new ol.View({
          center: [-10997148, 4569099],
          zoom: 4
        })
      });
      const groupChk = document.getElementById('groupVisible');
      const layer1Chk = document.getElementById('layer1Visible');
      const layer2Chk = document.getElementById('layer2Visible');
      function log() {
      console.log(
`group: ${groupLayer.getVisible()} layer1: ${layer1.getVisible()} layer2: ${layer2.getVisible()}`
      );
      }
      groupChk.addEventListener('click', function () { groupLayer.setVisible(groupChk.checked); log(); });
      layer1Chk.addEventListener('click', function () { layer1.setVisible(layer1Chk.checked); log(); });
      layer2Chk.addEventListener('click', function () { layer2.setVisible(layer2Chk.checked); log(); });
    </script>
  </body>
</html>

让我知道这是否是您想要的。

更改可见性打开层后，Openlayers地图将获取图层组图层图块标题和可见性状态

1 个答案: