使用复选框简化在自定义控件中打开和关闭图层的切换吗? [英] Simplify the toggling of layers on and off in a custom control with checkboxes?

问题描述

此问题是

This question is an off-shoot of this question I recently posted. I am wondering if there is a better way to check and toggle layers off/on when using a custom layers control. (Note: I also have a button that clears all the layers, if pressed.)

我的自定义图层控件(L.Control.extend)看起来像这样:

My custom layers control (L.Control.extend) looks like this:

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按钮):

And my JS looks like so (for the clearAll button):

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

要切换图层的开/关:

For the toggling of layers off/on:

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

但是，关于上述链接问题的张贴者建议:

But, a poster on that linked question above suggested:

"，您可以通过读取输入更改中的checked属性并相应地删除/添加图层来做一些简单的操作，而不是测试图层是否在地图上.使用您的方法，您可能最终没有-of-sync复选框(已选中，而从地图中删除了该图层，反之亦然)."

有人对我如何以更有效的方式完成此操作有任何提示吗?

推荐答案

$("#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/

这篇关于使用复选框简化在自定义控件中打开和关闭图层的切换吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！