小册子：如何显示地图上的所有图层？

Question

我想创建一个按钮，点击后会切换到所有图层，除了某些特定的图层。我无法完成这项工作。

我将如何显示，除了一个名为“东西”和“stuff2”的覆盖所有层？

var map = L.map("map"); 
 
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map); 
 

 
map.setView([48.85, 2.35], 11); 
 

 
var airfields = L.marker([48.85, 2.35]).addTo(map); 
 
var docks = L.marker([48.85, 2.33]).addTo(map); 
 
var stuff = L.marker([48.83602344356167,2.3617172241210938]).addTo(map); 
 
var stuff2 = L.marker([48.840542852103084,2.3246383666992183]).addTo(map); 
 

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

 
    $(".check").each(function(i, el) { 
 
    \t 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; 
 
    case "stuff": toggleLayer(this.checked, stuff); 
 
     break; 
 
     case "stuff2": toggleLayer(this.checked, stuff2); 
 
     break; 
 
     // ...and so on... 
 
    } 
 
}); 
 

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

#map { 
 
    height: 300px; 
 
}

<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script> 
 
<link href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="map"></div> 
 
<br /> 
 
<input type="checkbox" id="airfields" class="check" checked>Airfields 
 
<br /> 
 
<input type="checkbox" id="docks" class="check" checked>Docks 
 
<br /> 
 
<input type="checkbox" id="stuff" class="check" checked>stuff 
 
<br /> 
 
<input type="checkbox" id="stuff2" class="check" checked>stuff2 
 
<br /> 
 
<button id="clearAll"> 
 
    Clear All 
 
</button> 
 
<button id="showAll"> 
 
    Show All 
 
</button>

Answer 1

根本就等同于"#clearAll"但迫使一些复选框和其他关闭（你"stuff"和"stuff2"）

var map = L.map("map"); 
 
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map); 
 

 
map.setView([48.85, 2.35], 11); 
 

 
var airfields = L.marker([48.85, 2.35]).addTo(map); 
 
var docks = L.marker([48.85, 2.33]).addTo(map); 
 
var stuff = L.marker([48.83602344356167,2.3617172241210938]).addTo(map); 
 
var stuff2 = L.marker([48.840542852103084,2.3246383666992183]).addTo(map); 
 

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

 
    $("#airfields")[0].checked = true; 
 
    $("#docks")[0].checked = true; 
 
    $("#stuff")[0].checked = false; 
 
    $("#stuff2")[0].checked = false; 
 

 
    $(".check").each(function(i, el) { 
 
    $(el).change(); // Trigger the event. 
 
    }) 
 
}); 
 

 
$("#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; 
 
    case "stuff": 
 
     toggleLayer(this.checked, stuff); 
 
     break; 
 
    case "stuff2": 
 
     toggleLayer(this.checked, stuff2); 
 
     break; 
 
     // ...and so on... 
 
    } 
 
}); 
 

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

#map { 
 
    height: 300px; 
 
}

<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script> 
 
<link href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="map"></div> 
 
<br /> 
 
<input type="checkbox" id="airfields" class="check" checked>Airfields 
 
<br /> 
 
<input type="checkbox" id="docks" class="check" checked>Docks 
 
<br /> 
 
<input type="checkbox" id="stuff" class="check" checked>stuff 
 
<br /> 
 
<input type="checkbox" id="stuff2" class="check" checked>stuff2 
 
<br /> 
 
<button id="clearAll"> 
 
    Clear All 
 
</button> 
 
<button id="showAll"> 
 
    Show All 
 
</button>