Mapbox GL JS图层切换问题：单选按钮无法双向切换

我帮你看看这个图层切换的问题～你的代码里有两个关键问题导致没法来回切换：

1. setLayoutProperty 调用时缺少可见性状态参数，Mapbox不知道你要设置成显示还是隐藏
2. 没有处理「其他图层隐藏」的逻辑，单选按钮切换时需要确保只有选中的图层显示

修正后的完整代码 #

var layerList = document.getElementById('toggle');
var inputs = layerList.getElementsByTagName('input');

// 收集所有需要切换的图层ID（单选按钮的id要和对应图层的id一致）
var allLayerIds = Array.from(inputs).map(input => input.id);

function switchLayer(e) {
  var selectedLayerId = e.target.id;
  
  // 先把所有图层统一设为隐藏状态
  allLayerIds.forEach(layerId => {
    map.setLayoutProperty(layerId, 'visibility', 'none');
  });
  
  // 再将当前选中的图层设为显示状态
  map.setLayoutProperty(selectedLayerId, 'visibility', 'visible');
}

// 给每个单选按钮绑定点击切换事件
for (var i = 0; i < inputs.length; i++) {
  inputs[i].onclick = switchLayer;
}

关键修改点说明 #

• 补全了setLayoutProperty的第三个参数：'visible'（显示）和'none'（隐藏），这是Mapbox控制图层可见性的必填参数
• 增加了「批量隐藏所有图层」的逻辑，确保每次切换只有选中的图层处于显示状态
• 完善了onclick事件的绑定，让每个单选按钮点击时都能触发完整的切换逻辑

额外优化建议 #

如果你的单选按钮默认有一个选中状态，记得在页面初始化时手动配置默认图层的可见性，比如：

// 页面加载完成后，设置默认选中的图层为显示，其他隐藏
var defaultCheckedInput = layerList.querySelector('input:checked');
if (defaultCheckedInput) {
  map.setLayoutProperty(defaultCheckedInput.id, 'visibility', 'visible');
  allLayerIds.forEach(layerId => {
    if (layerId !== defaultCheckedInput.id) {
      map.setLayoutProperty(layerId, 'visibility', 'none');
    }
  });
}

内容的提问来源于stack exchange，提问作者user5036080