在打开的层级js文件中，复选框逻辑失效

Question

在我的代码中，我的底层有两个网格，另一个是实用层，底层有单选按钮，点击时使用的逻辑是工作的。

{

    var baseLayerGroup= new ol.layer.Group({
    layers:[
        openstreetmapstandard,openstreetmaphumanitarian
    ]
})
map.addLayer(baseLayerGroup);

//Layer Switcher Logic for Baselayer
var baseLayerElements = document.querySelectorAll('.sidebar1 > input[type=radio]');
for(let baseLayerElement of baseLayerElements){
    baseLayerElement.addEventListener('change',function(){
        let baseLayerElementValue = this.value;
        baseLayerGroup.getLayers().forEach(function(element, index, array){
            let baseLayerTitle = element.get('title');
            element.setVisible(baseLayerTitle === baseLayerElementValue);        
        })
    })
}
var dataLayerGroup= new ol.layer.Group({
    layers:[
        Sector_office,Roads
    ]
})

我的复选框逻辑是 。

Sector_office.setVisible(true);
Roads.setVisible(false);
var toggleLayer = function(inputEl){
     map.getLayers().forEach(function(layer){
          if (layer.get('name') === inputEl.name)
          layer.setVisible(inputEl.checked);
          });
        };
map.addLayer(dataLayerGroup);

但我的复选框逻辑不工作，这里是我的html页面。

   <input type="checkbox" onClick="toggleLayer(this);" value="Sector_office" checked>Sector office<br> 
    <input type="checkbox" onClick="toggleLayer(this);" value="Roads" checked>Roads<br>
  </div>

Answer 1

在我看来，你的代码有几个问题。

在处理函数中，你引用的是 name 属性，但我在html中没有看到这样的属性。这将导致 false. 所以你必须设置 name 属性或使用 value 属性。

的 onclick 事件处理程序接收一个参数 MouseEvent 参数。要在处理程序中获取dom元素的引用，你可以使用 this 或者你可以使用事件参数属性 target.

恢复。

处理者

const toggleLayer = function(e){
    const chk = e.target.
    map.getLayers().forEach(function(layer){
        if (layer.get('name') === chk.value)
        layer.setVisible(chk.checked);
    });
};

html

<input type="checkbox" onclick="toggleLayer(event)"
    value="Sector_office" checked>Sector office<br> 
<input type="checkbox" onclick="toggleLayer(event)"
    value="Roads" checked>Roads<br>