React中Mapbox某图层可见时禁用另一图层点击的问题

在React应用的Mapbox地图内有两个图层，我同时是React和Mapbox的新手。希望实现当其中一个图层可见时，禁用另一个图层的点击功能，通过React的复选框值控制各图层的可见性。现有代码如下：

export default function Map () {   
  const [checkedLayer, setCheckedLayer] = useState(true);
  const [checkedOtherLayer, setCheckedOtherLayer] = useState(true);

  //when a checkbox is on or off make layer visible or not
  const handleVisibility = (event) => { 
    let visible ; let layer;  
    event.target.checked ? visible = 'visible' : visible = 'none'
    
    if (event.target.id === 'mylayer') { 
      setCheckedLayer(event.target.checked);   
      layer = 'mylayer';
    } 

    if (event.target.id === 'myotherlayer') { 
      setCheckedOtherLayer(event.target.checked);   
      layer = 'myotherlayer';
    } 

    map.current.setLayoutProperty(layer, 'visibility', visible); 
  }; 

useEffect(() => { 
  if (map.current) return; // initialize map only once  
   map.current = new mapboxgl.Map({
    container: mapContainer.current, 
    style: 'mapbox://styles/mapbox/satellite-streets-v11',
    center: [lng, lat],
    zoom: zoom
  });//map  

  map.current.on('load', () => { 
     //...set layers and sources 
  });//load 

  map.current.on('click', 'mylayer', (e) => {
    console.log('other layer visibility ', map.current.getLayoutProperty('myotherlayer', 'visibility'));
   // I want to do something like 
   // if map.current.getLayoutProperty('myotherlayer', 'visibility')) == 'visible' 
   // return
   // but the above console.log keeps giving "undefined"
   // map.current.getLayoutProperty('mylayer', 'visibility') works
  }); 
     },[checkedLayer, checkedOtherLayer]);//useEffect 

  return (
    <div> 
              <Checkbox
                id="mylayer"
                checked={checkedLayer}
                onChange={handleVisibility}
                inputProps={{ 'aria-label': 'controlled' }}
              />
              <Checkbox
                id="myotherlayer"
                checked={checkedOtherLayer}
                onChange={handleVisibility}
                inputProps={{ 'aria-label': 'controlled' }}
              />
      <div ref={mapContainer} className="map-container"> </div>
    </div>
  )
}

点击mylayer时，我尝试判断myotherlayer是否可见，若可见则不执行点击逻辑，但map.current.getLayoutProperty('myotherlayer', 'visibility')始终返回undefined，而获取mylayer的visibility属性却正常，请问问题出在哪里？

• 图层ID不匹配：你在点击事件中使用的myotherlayer必须和map.current.on('load')回调里添加图层时设置的id完全一致，大小写、拼写都不能出错。如果添加图层时的ID是其他值（比如my-other-layer），调用getLayoutProperty就会返回undefined。
• 事件绑定时机错误：当前点击事件绑定在了外层useEffect中，但这个useEffect的依赖包含checkedLayer和checkedOtherLayer，且一开始判断map.current存在就直接返回，导致点击事件可能在myotherlayer加载完成前就已绑定。正确做法是把点击事件的绑定逻辑放到map.current.on('load')回调内部，确保所有图层都加载完成后再绑定事件。
• 没必要通过Mapbox API判断状态：你已经用checkedLayer和checkedOtherLayer这两个React状态控制图层可见性，直接用这些状态判断即可，完全不需要调用Mapbox的getLayoutProperty接口。比如点击mylayer时，只要checkedOtherLayer为true，就直接return跳过点击逻辑。

修改后的代码示例：

export default function Map () {   
  const [checkedLayer, setCheckedLayer] = useState(true);
  const [checkedOtherLayer, setCheckedOtherLayer] = useState(true);
  const mapContainer = useRef(null);
  const map = useRef(null);

  const handleVisibility = (event) => { 
    const visible = event.target.checked ? 'visible' : 'none';
    let layer;  

    if (event.target.id === 'mylayer') { 
      setCheckedLayer(event.target.checked);   
      layer = 'mylayer';
    } else if (event.target.id === 'myotherlayer') { 
      setCheckedOtherLayer(event.target.checked);   
      layer = 'myotherlayer';
    } 

    if (map.current && layer) {
      map.current.setLayoutProperty(layer, 'visibility', visible); 
    }
  }; 

  useEffect(() => { 
    if (map.current) return; 

    map.current = new mapboxgl.Map({
      container: mapContainer.current, 
      style: 'mapbox://styles/mapbox/satellite-streets-v11',
      center: [lng, lat],
      zoom: zoom
    });

    map.current.on('load', () => { 
      // 在这里添加你的sources和layers，确保myotherlayer的ID正确
      // ...

      // 点击事件绑定到load回调内，确保图层已加载
      map.current.on('click', 'mylayer', (e) => {
        // 直接用React状态判断，无需调用Mapbox API
        if (checkedOtherLayer) {
          return;
        }
        // 这里编写你的点击逻辑
        console.log('mylayer clicked');
      }); 
    });

    // 组件卸载时清理地图实例
    return () => {
      if (map.current) {
        map.current.remove();
        map.current = null;
      }
    };
  }, []); // 依赖设为空数组，仅初始化一次地图

  return (
    <div> 
      <Checkbox
        id="mylayer"
        checked={checkedLayer}
        onChange={handleVisibility}
        inputProps={{ 'aria-label': 'controlled' }}
      />
      <Checkbox
        id="myotherlayer"
        checked={checkedOtherLayer}
        onChange={handleVisibility}
        inputProps={{ 'aria-label': 'controlled' }}
      />
      <div ref={mapContainer} className="map-container"></div>
    </div>
  )
}

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