Angular 5 开放层 4答案

【问题标题】：Angular5 Openlayers4Angular 5 开放层 4
【发布时间】：2018-06-12 09:28:30
【问题描述】：

我正在尝试创建一个包含多个图层的地图，我可以将其设置为 false 或 true。这是我设置地图的代码：

  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。

如何获取我添加的每个图层的 id 以及如何将可见性设置为 false。我正在使用带有 Angular5 的 openlayers4

非常感谢！

【问题讨论】：

标签： angular openlayers visibility layer

【解决方案1】：

首先，我会将地图控件之外的图层定义为变量，因为这样就可以通过复选框上的事件侦听器轻松关闭和关闭它们。这里的语法会有点不同，因为我没有使用 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;

【讨论】：

问题是当我有 10 层时，我需要定义 10 个变量
是的，我有 12 个，复制和粘贴，然后更改名称和参数，如果你的朋友。如果它们没有被命名，那么您的复选框将如何知道要打开/关闭哪个？？
虽然它们有固定数量，但可以创建该数量的变量，如果您愿意，可以将它们添加到数组中

【解决方案2】：

如果您为图层定义了 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()

这样的地图

【讨论】：