如何清除所有图层并清除输入复选框? [英] How to clear all layers AND clear input checkboxes?

问题描述

我正在使用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...
         }
      });

上面的代码显然从地图上删除了图层，但是并没有从输入元素中删除选中标记.

解决方案

如果我的理解是正确的，那么您会错过一个全部清除"按钮，该按钮会取消选中所有复选框，并从地图中删除关联的图层?

在这种情况下，您只需要按一下按钮就可以操作，检索所有复选框，读取是否已选中它们，如果是，则触发它们的"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); }
 

I am using LeafletJS and building a custom layers input control with checkboxes to toggle on/off the various map layers.

My goal is to create a "clear all layers" button that, when clicked, will clear all the layers on the map AND remove all the checkmarks from the checkboxes.

---

The problem:

Toggling the layers off/on works fine when using the custom layers control, but I can't seem to figure out how to remove the checkmarks from the input boxes once the layers are removed from the map.

Here is my setup:

My HTML (note, doing this through L.Control.extend()):

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

My 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...
         }
      });

The above code obviously removes the layers from the map, but it doesn't remove the checkmarks from the input element.

解决方案

If my understanding is correct, you are missing a "clear all" button that would untick all of your checkboxes, and remove the associated layers from map?

In that case, you would simply need to act on your button click, retrieve all your checkboxes, read if they are checked, and if so, trigger their "change"event and untick them.

$("#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;
    }
  })
});

Demo: http://jsfiddle.net/3v7hd2vx/43/

Note: you could have done it slightly simpler by reading the checked property on input change and remove/add the layer accordingly, instead of testing the layer presence on map. With your method, you may end-up with out-of-sync checkboxes (ticked whereas the layer is removed from map, and vice versa).

Something like:

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

这篇关于如何清除所有图层并清除输入复选框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！