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

问题描述

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

<块引用>

我的自定义图层控件 (L.Control.extend) 如下所示:

var overlaysMenuCtrl = L.Control.extend({onAdd:函数(地图){var container = L.DomUtil.create('div', 'legend');容器.innerHTML ='<input type="checkbox" id="airfields" class="check">Airfields<input type="checkbox" id="docks" class="check">Docks... 等等 ...<button id="clearAll">清除所有图层</button>';返回容器；}});

<块引用>

我的 JS 看起来像这样(对于 clearAll 按钮):

$("#clearAll").click(function(event) {event.preventDefault();$(".check").each(function(i, el) {如果(el.checked){//触发事件.$(el).change();//取消勾选复选框.el.checked = 假；}})});

<块引用>

对于图层的关闭/打开切换:

$(".check").change(function(){var layerClicked = $(this).attr("id");开关(layerClicked){案例机场":如果(map.haslayer(机场)){map.removeLayer(机场)；} 别的 {map.addLayer(机场)；}休息;//...等等...}});

<块引用>

但是，关于上述链接问题的海报建议:

您可以通过在输入更改时读取选中的属性并相应地删除/添加图层来稍微简单一点，而不是在地图上测试图层的存在.使用您的方法，您最终可能没有-of-sync 复选框(当图层从地图中移除时勾选，反之亦然)."

有人对我如何以更有效的方式做到这一点有任何建议吗?

解决方案

$("#clearAll").click(function(event) {event.preventDefault();$(".check").each(function(i, el) {el.checked = 假；//首先设置新状态(未选中).$(el).change();//触发事件.})});$(".check").change(function() {var layerClicked = $(this).attr("id");开关(layerClicked){案例机场":toggleLayer(this.checked, 机场);休息;案例码头":toggleLayer(this.checked, docks);休息;//...等等...}});功能切换层(选中，层){如果(选中){map.addLayer(层);} 别的 {map.removeLayer(层);}}

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

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

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

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:

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

Does anyone have any tips on how I could have done this in a more efficient way?

解决方案

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

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

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