Openlayers中如何禁用LayerSwitcher内的指定图层交互功能

如果你使用的是常用的第三方ol-layerswitcher插件，仅需要给要禁用交互的目标图层添加selectable: false配置项即可，配置完成后该图层会正常在切换器列表中展示，但用户无法点击切换显隐，也无法触发其他交互操作。

修改后的示例代码如下：

stationsLayer = new ol.layer.Vector({
    source: stationsSource,
    visible: true,
    title: "Estaciones",
    style: styleFunction,
    selectable: false // 新增该行即可禁用该图层在切换器中的交互
});
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);

如果你是自行实现的图层切换器逻辑，只需要在渲染图层列表时，读取图层的自定义配置字段，将对应图层的交互控件设置为禁用即可，参考逻辑如下：

// 图层列表渲染逻辑示例
const layerListContainer = document.getElementById('layer-switcher-list');
const allLayers = map.getLayers().getArray();

allLayers.forEach(layer => {
    const item = document.createElement('li');
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.checked = layer.getVisible();
    
    // 判断图层是否允许交互
    if (layer.get('selectable') === false) {
        checkbox.disabled = true;
    } else {
        checkbox.addEventListener('change', () => {
            layer.setVisible(checkbox.checked);
        });
    }

    item.appendChild(checkbox);
    item.append(` ${layer.get('title')}`);
    layerListContainer.appendChild(item);
});

内容的提问来源于stack exchange，提问作者Ander Canales Medina