复选框逻辑在开放层 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

对于我所看到的，您的代码中有几个问题。

在处理程序函数中，您引用了 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>