Карта Openlayers получает заголовок и слой видимости слоя группы слоев при изменении видимости открытых слоев. - PullRequest
Новая
       21

Карта Openlayers получает заголовок и слой видимости слоя группы слоев при изменении видимости открытых слоев.

0 голосов
/ 04 мая 2020

Я новичок в открытии слоев и в настоящее время пытаюсь реализовать карту, где я буду отображать набор информации, когда слой будет проверен. в настоящее время у меня есть этот код для отображения плиток слоя 

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

Что я хочу сделать, это когда я проверяю или снимаю отметку с этого слоя, я буду в состоянии получить состояние, видимое оно или нет.

enter image description here

Я пытался использовать map.getLayerGroup().getActive(), но каждый раз получал только true.

спасибо за помощь!

1 Ответ

2 голосов
/ 04 мая 2020

Если я правильно вас понимаю, вы на самом деле ищете 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>

Дайте мне знать, если это то, что вы искали.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...