Angular 角度5开放层4
我正在尝试创建一个带有多个图层的地图,我可以设置Visible false或true。这是我设置地图的代码:Angular 角度5开放层4,angular,openlayers,visibility,layer,Angular,Openlayers,Visibility,Layer,我正在尝试创建一个带有多个图层的地图,我可以设置Visible false或true。这是我设置地图的代码: this.map = new OlMap({ target: 'map', layers: [ new OlTileLayer({ source: new OSM() }), new Group({
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。我正在使用openlayers4和Angular5
太多了 首先,我要将映射控件外的层定义为变量,因为这样可以通过复选框上的事件侦听器轻松地关闭它们。这里的语法会有点不同,因为我没有使用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;
如果为图层定义了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()
,问题是当我有10个图层时,我需要定义10个变量,我有12个,复制和粘贴,然后更改名称和参数,如果您的朋友。如果它们没有命名,那么您的复选框如何知道打开/关闭哪一个?当它们有一个固定的数字时,创建那个数量的变量是可以的,如果您愿意,您可以将它们添加到数组中