如何清除所有层和清除输入复选框？

Question

我正在使用LeafletJS并构建一个带有复选框的自定义层输入控件，以切换/关闭各个映射层。

我的目标是创建一个“清除所有层”按钮，当单击该按钮时，将清除地图上的所有层，并从复选框中删除所有的复选标记。

问题是：

当使用自定义层控件时，切换层关闭/打开很好，但我似乎不知道如何在从地图中移除这些层后从输入框中删除这些复选标记。

这是我的设置：

我的HTML (注意，这是通过L.Control.extend()完成的)：

<input type="checkbox" id="airfields" class="check">Airfields
<input type="checkbox" id="docks" class="check">Docks
... and so on

我的JS：

$(".check").change(function(){
    var layerClicked = $(this).attr("id");
        switch(layerClicked){
            case "airfields":
                if (map.haslayer(airfields)){
                     map.removeLayer(airfields);
                } else {
                      map.addLayer(airfields);
                }
             break;
           // ...and so on...
         }
      });

上面的代码显然从映射中删除了层，但是它并没有从输入元素中删除检查点。

Answer 1

如果我的理解是正确的，您是缺少一个“清除所有”按钮，将取消您的所有复选框，并删除相关的图层地图？

在这种情况下，您只需对按钮单击操作，检索所有复选框，如果选中，读取，如果选中，则触发它们的"change"事件并取消它们。

$("#clearAll").click(function(event) {
  event.preventDefault();

  $(".check").each(function(i, el) {
    if (el.checked) {
      // Trigger the event.
      $(el).change();
      // Untick the checkbox.
      el.checked = false;
    }
  })
});

演示：http://jsfiddle.net/3v7hd2vx/43/

注意:您可以通过读取输入更改时选中的属性并相应地删除/添加层，而不是在地图上测试图层的存在，这样做可以稍微简单一些。使用您的方法，您可能会结束与不同步复选框(勾选，而该层是从地图中删除，反之亦然)。

类似于：

if (this.checked) { map.addLayer(layer); }
else { map.removeLayer(layer); }