显示多个图层，只有一个触发器

Question

我正在创建一个带有侧面菜单的叠加层项目，该项目使我可以使用复选框打开 /关闭图层。

在HTML文件的主体上，我使用class =“ visible0,1,2,3”是触发式集体的触发因素。 HTML示例：

<fieldset id="layer0">
                <label class="checkbox" for="visible0">
                  <input id="visible0" class="visible" type="checkbox"/> <i class="fa-solid fa-flag" style="color:#009436"></i>Layer0 
                </label> 
                <label class="checkbox" for="visible1">
                   <input id="visible1" class="visible" type="checkbox"/> <i class="fa-solid fa-flag" style="color:#005994"></i>Layer1 
                </label>                                

对于Main.js I定义了de Map，这是带有切换器函数的主要基础层组，用于更改地图baselayer和vectorlayers，并可以使用HTML复选框类打开和关闭。

// MAP
const map = new Map({
  view: new View({
      center: fromLonLat([3.4, 48.6]),
      zoom: 9.5
      //layers: layers,
    }),
  
  target: 'map'

// Layer Group for map base layer switcher

const baseLayerGroup = new LayerGroup({
  title: 'Base maps',
  layers: [
    openStreetMapStandard, openStreetHumanitarian, stamenTerrain, waterColor, osmFRHOT,
  ]
})

map.addLayer(baseLayerGroup);


    // Vector layers
   const layer0JSON = new VectorLayer({
      source: new VectorSource({
        url: './data/vector_data/layer0.json',
        format: new GeoJSON(),     
        }),
        visible: false,
        title: 'layer0JSON',     
    })
map.addLayer(layer0JSON)

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

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

现在，我已经定义了3层，我创建了一个具有1和2的组组，并使用功能打开元素：

const group1 = new LayerGroup({
  title: 'group1',
  layers: [
    layer1JSON, layer2JSON,
  ]
})

map.addLayer(group1);

// Menu function on off

var bindLayerButtonToggle = (btnId, layer) => {
  document.getElementById(btnId).onclick = function () {
    layer.setVisible(!layer.getVisible());
  };
}

// on off menu 
bindLayerButtonToggle("visible0", layer0JSON);
bindLayerButtonToggle("visible1", group1);

如果BindlayerButTontoggle上的图层是一个简单的层，则一切都可以使用，但如果其组为组。我想知道是否与BaselayerGroup发生冲突。我试图定义地图中的所有图层组，试图从单个矢量layerer const加载多个JSON文件，但没有运气。

解决这种情况的任何想法。