Mapbox GL JS 切换图层功能首次触发需点击两次问题求解

你出现首次点击需要两次才能生效的核心原因是按钮初始状态和图层实际可见性属性的匹配逻辑有漏洞：

• Mapbox GL JS中如果图层没有显式设置visibility属性，默认是可见状态，但调用map.getLayoutProperty(图层id, 'visibility')返回值是undefined，不是你预期的'visible'
• 你初始化按钮时直接写死了link.className = 'active'，但点击事件的判断逻辑默认只认显式的'visible'值，第一次点击时拿到undefined会判断为图层不可见，执行显示操作（相当于没变化），第二次才能拿到显式设置后的'visible'值，执行隐藏操作，所以出现需要点击两次的问题。

1. 同步按钮初始状态和图层实际可见性 #

创建按钮时不要硬编码active类，同时修改点击判断逻辑兼容默认可见的场景：

for (const id of toggleableLayerIds) {
  // Skip layers that already have a button set up.
  if (document.getElementById(id)) {
    continue;
  }

  // 新增：判断图层初始可见性，兼容未显式设置visibility的默认情况
  const initialVisibility = map.getLayoutProperty(id, 'visibility')
  const isInitiallyVisible = initialVisibility === 'visible' || initialVisibility === undefined

  // Create a link.
  const link = document.createElement('a');
  link.id = id;
  link.href = '#';
  link.textContent = id;
  link.className = isInitiallyVisible ? 'active' : ''; // 修改这里，不要硬写active
 
  // Show or hide layer when the toggle is clicked.
  link.onclick = function (e) {
    const clickedLayer = this.textContent;
    e.preventDefault();
    e.stopPropagation();

    const visibility = map.getLayoutProperty(
      clickedLayer,
      'visibility'
    );
    // 新增：兼容visibility为undefined的默认可见情况
    const isCurrentVisible = visibility === 'visible' || visibility === undefined
    if (isCurrentVisible) {
      // 图层当前可见，点击后隐藏
      map.setLayoutProperty(clickedLayer, 'visibility', 'none')
      this.classList.remove('active')
    } else {
      // 图层当前隐藏，点击后显示
      map.setLayoutProperty(clickedLayer, 'visibility', 'visible')
      this.classList.add('active')
    }
  }
  // 原有把link插入DOM的逻辑保持不变即可
}

2. 可选优化方案 #

如果你的图层都是初始化默认显示的，也可以在图层添加时就显式设置visibility: 'visible'，从根源避免undefined的返回值，原有逻辑不用改也能正常运行。

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