how to disable layer in Openlayers

Question

I have some layers inside a LayerSwitcher.I want to show them but i would like to disable one of them, I mean it must be visible inside layerSwitcher but you will not be able to interact with it. This is my LayerSwitcher: For example i would like to disable on yellow layers. Here is part of my code to add layers

    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)

and

tiffRaster.setVisible(true)

should do it.