使用复选框简化在自定义控件中打开和关闭图层的切换吗?

问题描述

此问题是.我想知道使用自定义图层控件时是否有更好的方法来检查和切换图层的开/关. (注意:如果按下，我还有一个按钮可以清除所有图层.)

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.)

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

$("#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复选框(已选中，而从地图中删除了该图层，反之亦然)."

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

推荐答案

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

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