开关-添加或删除图层

Question

我需要移除我的层。我的代码是一次又一次地添加层，而不是删除。

这是我的复选框。

<label class="checkbox-inline">Boundary<input type="checkbox" id="layer1" onclick="firstlayer()"></label>

这是我的js部分

layer1.onclick = function () {

var boundary = new TileLayer({
source: new TileWMS({
url: 'http://localhost:8080/geoserver/wms',
params: {'LAYERS': 'HGMUAE:boundary', 'TILED': true},
serverType: 'geoserver',
// Countries have transparency, so do not fade tiles:
transition: 0,
}),
})

map.addLayer(boundary)

};

function firstlayer() {
if (document.getElementById("layer1").checked) {
boundary.setVisibility(true);
} else {
boundary.setVisibility(false);
}
}

该怎么办？我需要开关。请提前引导感谢

Answer 1

我假设JavaScript中的layer1是id为"的输入元素；层1"；。将其onclick属性设置为匿名函数将替换HTML中定义的onclick处理程序，因此重复单击将创建一个新的磁贴。

为了解决点击动作的顺序，算法设计可以类似于：

click: if( layer has not been created)
create layer
store layer object (in variable boundary)
add to map
record that its visible (in checkbox value)
else if (layer is visible)
delete/remove from map
record that is not visible
else ( layer has been created and is not visible)
add layer in variable boundary to map
record that it is visible.

尽管其中大部分可以写成一个单独的函数，但在编码之前应该考虑几个假设和问题：

• 是否有从地图中删除平铺的功能
• 第三次点击操作是不是应该在地图中重新安装磁贴而不重新创建它
• "；改变"；事件比"；点击"；使用复选框时
• 重新加载页面是否可以将复选框设置为重新加载之前的值？(例如，在Firefox中，您是否需要在页面加载时显式重置一个或多个表单元素？(

我建议模拟一些代码，以便使用"；点击"；事件，并查看它是否可以更改或需要更改以使用"；改变"；生产中的事件。

一些概念代码可能有助于更好地解释这个想法：

function firstLayer(event) {
var boundary = new Tile ( /* arguments */);
map.addLayer(boundary);
var visible = true; // this.checked should be the same
this.onclick = function() {
if( visible) {
map.removeLayer( boundary);
}
else {
map.addLayer( boundary);
}
};
}