棱角5 开放层4.

Question

我正在尝试创建一个具有多个图层的地图，我可以将其设置为可见的假或真。这是我设置地图的代码：

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

非常感谢！

Answer 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;

Answer 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()