Angular5 Openlayers4 - PullRequest
Новая
       33

Angular5 Openlayers4

0 голосов
/ 12 июня 2018

Я пытаюсь создать карту с несколькими слоями, которые я могу установить видимыми как ложные или истинные.Это мой код для настройки карты: 

  this.map = new OlMap({
              target: 'map',
              layers: [
                new OlTileLayer({
                  source: new OSM()
                }), new Group({
                  layers: [
                    new OlTileLayer({
                      source: new TileJSON({
                        url: 'https://api.tiles.mapbox.com/v3/mapbox.20110804-hoa-foodinsecurity-3month.json?secure',
                        crossOrigin: 'anonymous'
                      })
                    }),
                    new OlTileLayer({
                      source: new TileJSON({
                        url: 'https://api.tiles.mapbox.com/v3/mapbox.world-borders-light.json?secure',
                        crossOrigin: 'anonymous'
                      })
                    })
                  ]
                })
              ],
              view: this.view
            });

Работает нормально, я вижу карту и все слои.С помощью флажка я хочу установить для определенного слоя значение false или true.

Как получить идентификатор каждого добавленного слоя и как установить видимость false.Я использую openlayers4 с Angular5

Спасибо большое!

Ответы [ 2 ]

0 голосов
/ 15 июня 2018

Если у вас есть id или любое другое свойство, определенное для ваших слоев, вы можете получить их, используя map.getLayers(), и использовать foreach, чтобы найти слой с этим свойством, используя layer.get()

Пример: 

new OlTileLayer({
    id: 'osm',
    source: new OSM()
})

Вы можете получить этот слой и установить его видимым, используя этот 

map.getLayers().forEach(function(layer) {
    if(layer.get('id') == 'osm') {
        layer.setVisible(false);
    }
});

Чтобы реализовать это с помощью флажка, вам, вероятно, придется назначить это свойство слоя в качестве значения флажка и сравнить с layer.get('id')

Обратите внимание, что это не обязательно должен быть id, вы можете использовать любое имя, которое вам нравится.И кажется, что вы используете группы слоев, и если вы хотите получить слой группы, вам нужно получить слои из группы вместо карты, как layergroup.getLayers()

0 голосов
/ 12 июня 2018

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

var floodZones=new ol.layer.Tile({
  source: new ol.source.TileWMS({
  extent: [-8459941, 4191197.5, -8400060, 4333020.5],
  url:'/geoserver/Property_Map/wms',
  params: {'Layers':'Property_Map:flood_3857', 'TILED':true},
  transition:0,
  serverType:'geoserver',
  version: '1.1.0'
 })
});



document.getElementById("flood").addEventListener("click", function(){
  if(!toggleFlood){
     map.removeLayer(floodZones)
  } else {
  map.addLayer(floodZones)
  }
  toggleFlood=!toggleFlood
  });
window.toggleFlood=true;
...