Question

这个问题是this question I recently posted的背叛。我想知道在使用自定义图层控件时是否有更好的方法来检查和切换图层。 （注意：如果按下，我还有一个清除所有图层的按钮。）

我的自定义图层控件（L.Control.extend）如下所示：

var overlaysMenuCtrl = L.Control.extend({
    onAdd: function(map){
        var container = L.DomUtil.create('div', 'legend');
        container.innerHTML = 
'<input type="checkbox" id="airfields" class="check">Airfields
<input type="checkbox" id="docks" class="check">Docks
... and so on ...
<button id="clearAll">Clear All Layers</button>';
return container;
 }
});

我的JS看起来是这样的（对于clearAll按钮）：

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

关闭/打开图层：

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

但是，上面这个相关问题的海报建议：

“通过在输入更改时读取checked属性并相应地删除/添加图层，而不是在地图上测试图层存在，您可以稍微简化一下。使用您的方法，您最终可能会结束-of-sync复选框（勾选，而图层从地图中删除，反之亦然）。“

有没有人知道如何以更有效的方式完成这项工作？

Answer 1

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

  $(".check").each(function(i, el) {
    el.checked = false; // Set new status (unchecked) first.
    $(el).change(); // Trigger the event.
  })
});

$(".check").change(function() {
  var layerClicked = $(this).attr("id");
  switch (layerClicked) {
    case "airfields":
      toggleLayer(this.checked, airfields);
      break;
    case "docks":
      toggleLayer(this.checked, docks);
      break;
      // ...and so on...
  }
});

function toggleLayer(checked, layer) {
  if (checked) {
    map.addLayer(layer);
  } else {
    map.removeLayer(layer);
  }
}

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

使用复选框简化在自定义控件中打开和关闭图层的过程？

1 个答案: