OpenLayers单触发器控制多图层组显隐失效问题求解

LayerGroup显隐控制失效和baseLayerGroup没有关联，核心是图层挂载逻辑错误：

• 你定义完layer1JSON、layer2JSON后，直接通过map.addLayer()把两个图层挂载到了地图的根图层集合下，此时这两个图层的直接父容器是map本身
• 后续创建group1时，你虽然把两个图层放进了group的layers数组，但并没有把它们从map根图层集合中移除，再调用map.addLayer(group1)时，两个图层的直接父容器仍为map根集合，不受group的显隐状态控制
• OpenLayers的显隐继承规则是：图层最终是否渲染，取决于从自身到最顶层父容器的所有visible属性是否都为true，且只有直接父子层级才会传递显隐状态。你切换group的显隐时，两个子图层因为不属于group的直接子节点，自然不会响应状态变化。

第一步：修正图层挂载逻辑 #

所有归入图层组的子图层，不要单独调用map.addLayer()添加，只需要放在对应LayerGroup的layers数组中，最后统一将图层组、不需要分组的单独图层添加到地图即可。
首先删除原有代码中重复添加子图层的两行：

// 删除以下两行重复挂载的代码
// map.addLayer(layer1JSON)
// map.addLayer(layer2JSON)

调整后的图层定义、挂载代码如下：

// 定义底图组
const baseLayerGroup = new LayerGroup({
  title: 'Base maps',
  layers: [
    openStreetMapStandard, openStreetHumanitarian, stamenTerrain, waterColor, osmFRHOT,
  ]
})
map.addLayer(baseLayerGroup);

// 定义所有矢量图层，定义完成后暂不挂载到map
const layer0JSON = new VectorLayer({
  source: new VectorSource({
    url: './data/vector_data/layer0.json',
    format: new GeoJSON(),     
  }),
  visible: false,
  title: 'layer0JSON',     
})

const layer1JSON = new VectorLayer({
  source: new VectorSource({
    url: './data/vector_data/layer1.json',
    format: new GeoJSON(),     
  }),
  visible: false,
  title: 'layer1JSON',     
})

const layer2JSON = new VectorLayer({
  source: new VectorSource({
    url: './data/vector_data/layer2.json',
    format: new GeoJSON(),     
  }),
  visible: false,
  title: 'layer2JSON',     
})

// 定义图层组，将归组的子图层放入layers数组
const group1 = new LayerGroup({
  title: 'group1',
  visible: false, // 组的初始显隐和子图层保持一致
  layers: [
    layer1JSON, layer2JSON,
  ]
})

// 统一挂载：只加独立图层、图层组，不重复加组内子图层
map.addLayer(layer0JSON)
map.addLayer(group1);

第二步：优化复选框绑定逻辑 #

针对checkbox控件，用change事件替代onclick，同时初始化时同步复选框状态和图层初始显隐，避免状态错位：

const bindLayerButtonToggle = (btnId, layer) => {
  const checkbox = document.getElementById(btnId);
  // 初始化时对齐复选框和图层的显隐状态
  checkbox.checked = layer.getVisible();
  // 监听change事件适配所有checkbox交互场景（含键盘操作）
  checkbox.addEventListener('change', () => {
    layer.setVisible(checkbox.checked);
  });
}

// 绑定控制关系
bindLayerButtonToggle("visible0", layer0JSON);
bindLayerButtonToggle("visible1", group1);

• OpenLayers的LayerGroup和普通VectorLayer一样原生支持setVisible()/getVisible()方法，挂载逻辑正确时，切换组的显隐会自动作用于组内所有子图层，不需要手动遍历子图层逐个设置状态
• 同一个图层实例只能挂载到一个父容器（map或某个LayerGroup）中，不要重复调用addLayer，也不要把同一个图层放到多个图层组里，否则会出现要素重复渲染、显隐控制异常的问题
• 如果后续需要给组内的子图层加独立的复选框开关，直接给对应子图层调用bindLayerButtonToggle绑定即可，组开关和子开关的逻辑会自动叠加：组关闭时无论子图层开关状态如何都不会显示，组开启时子图层的开关才会生效，符合常规图层树的交互逻辑。

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