Mapbox GL菜单首次点击无响应 如何正确设置图层初始可见性？

问题原因 #

你为切换按钮默认设置了active类，代表图层默认可见，但Mapbox GL JS中如果图层创建时没有显式配置visibility布局属性，调用map.getLayoutProperty(clickedLayer, 'visibility')首次获取属性时会返回undefined，而非你预期的visible，导致点击逻辑判断走反，出现首次点击无响应的问题。

解决方案 #

推荐优先选择第一种方案，从根源统一图层初始状态：

方案1：创建图层时显式声明默认可见性 #

在你调用map.addLayer添加City图层的配置中，为layout属性新增visibility配置即可：

map.addLayer({
  id: 'City',
  // 你原来的source、type等其他配置保持不变
  layout: {
    'visibility': 'visible', // 新增这行，和按钮的默认active状态对应
    // 你原来的其他layout配置保持不变
  },
  // 你原来的paint等其他配置保持不变
})

方案2：兼容未显式设置可见性的场景 #

如果你不方便修改图层添加逻辑，可以直接修改切换按钮的点击判断逻辑，把undefined也判定为默认可见状态：

link.onclick = function (e) {
  var clickedLayer = this.textContent
  e.preventDefault()
  e.stopPropagation()
  var visibility = map.getLayoutProperty(clickedLayer, 'visibility')
  // 修改判断条件，兼容未显式设置visibility的场景
  if (visibility === 'visible' || visibility === undefined) {
    map.setLayoutProperty(clickedLayer, 'visibility', 'none')
    this.className = ''
  } else {
    this.className = 'active'
    map.setLayoutProperty(clickedLayer, 'visibility', 'visible')
  }
}

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