復選框邏輯在打開的圖層 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

對於我所看到的，您的代碼中有幾個問題。

在處理程序 function 中，您正在引用 dom 元素的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>