如何在Openlayers中禁用图层

Question

我在LayerSwitcher中有一些图层。我想展示它们，但我想禁用其中一个，我的意思是它必须在layerSwitcher中可见，但你将无法与它交互。这是我的LayerSwitcher:例如，我想禁用黄色图层。下面是我添加图层的部分代码

stationsLayer = new ol.layer.Vector({
source: stationsSource,
visible: true,
title: "Estaciones",
style: styleFunction,
});
tiffRaster = new ol.layer.Image({
title: 'PGA(gal)',
// extent: [-180, -90, -180, 90],
source: new ol.source.ImageWMS({
url: 'http://url/geoserver/faml/wms',
params: {
'LAYERS': 'faml:' + f
},
ratio: 1,
serverType: 'geoserver'
})
});
map.addLayer(tiffRaster);
map.addLayer(stationsLayer);

layerSwitcher

Answer 1

var osmLayer = new ol.layer.Tile({
source: new ol.source.OSM(),
title: "OSM"
});
var stamenLayer = new ol.layer.Tile({
source: new ol.source.Stamen({
layer: "terrain",
maxZoom: 18
}),
visible: false,
title: "Stamen"
});
var baseLayerGroup = new ol.layer.Group({
layers: [osmLayer, stamenLayer]
})
var map = new ol.Map({
target: document.getElementById("map"),
view: new ol.View({
center: ol.proj.fromLonLat([8, 50]),
zoom: 5
})
});
map.setLayerGroup(baseLayerGroup);
const radioButtons = getAllRadioButtons();
for (var i = 0; i < radioButtons.length; i++) {
radioButtons[i].addEventListener("change", function(e) {
var target = e.currentTarget;
baseLayerGroup.getLayers().forEach(function(layer) {
layer.setVisible(layer.get("title") === target.value);
});
});
}
function getAllRadioButtons() {
var arrInput = document.getElementsByTagName("input")
var arrRadio = [];
var j = 0;
for (var i = 0; i < arrInput.length; i++) {
if (arrInput[i].type == "radio") {
arrRadio[j] = arrInput[i];
j++;
}
}
return arrRadio;
}

* {
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
}
.grid-container {
display: grid;
grid-template-columns: 20vw 80vw;
grid-template-rows: 100vh;
}
.sidebar {
margin-left: 15px;
}
.map {
width: 100%;
height: 100%;
overflow: hidden;
}

<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.8.1/css/ol.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.8.1/build/ol.js"></script>
<div class="grid-container">
<div class="grid-1">
<div class="sidebar">
<h2>
Base Layers
</h2>
<div>
<input type="radio" value="OSM" name="base" checked>
<label for="OSM">OpenStreetMap</label>
</div>
<div>
<input type="radio" value="Stamen" name="base">
<label for="Stamen">Terrain</label>
</div>
</div>
</div>
<div class="grid-2">
<div id="map" class="map" tabindex="0"></div>
</div>
</div>

tiffRaster.setVisible(false)

和

tiffRaster.setVisible(true)

应该做。