Leaflet.js: Cách xóa nhiều lớp khỏi bản đồ

Question

Tôi đang sử dụng Leaflet.js cho bản đồ. Bây giờ tôi muốn xóa các lớp đã thêm khỏi bản đồ. Bằng cách nhấp vào đầu vào #, tất cả các hộp kiểm đã chọn sẽ được thay đổi thành không được chọn và tất cả các lớp tương ứng sẽ bị xóa khỏi bản đồ.

Để xóa lớp khỏi bản đồ, cần phải có id của lớp. Id này bằng id của hộp kiểm tương ứng. Đó là lý do tại sao tôi sử dụng jQuery để lấy các id của tất cả các hộp kiểm được chọn và lưu trữ giá trị của chúng trong một đối tượng, ở đây được gọi là someObj.idsChecked.

Khi tôi cố gắng sử dụng các giá trị được lưu trữ val để loại bỏ một lớp nó không hoạt động trong khi console.log hiển thị giá trị truy nã. Ví dụ: mapcat52.

Trong khi chèn id trước đó được mã hóa cứng vào hàm như map.removeLayer (mapcat52), nó hoạt động như mong đợi.

Lỗi trong mã hoặc suy nghĩ của tôi ở đâu?
Bất kỳ trợ giúp nào được đánh giá cao.

HTML

<input type="button" id="selectnone" value="deselect all" /> 

<!-- checkboxes --> 
<input id="mapcat52" type="checkbox" name="maplayer" class="maplayer"> 
<label for="mapcat52">Map Layer One</label> 

<input id="mapcat53" type="checkbox" name="maplayer" class="maplayer"> 
<label for="mapcat53">Map Layer Two</label> 

... 

Các JS:

$('#selectnone').click(function() { 
    var someObj = {}; 
    someObj.idsChecked = []; 

    $("input:checkbox").each(function() { 
     if ($(this).is(":checked")) { 

      someObj.idsChecked.push($(this).attr("id")); 
     } 
    }).attr('checked', false); 

    $.each(someObj.idsChecked,function(id, val) { 

      // displays the wanted value, e.g. "mapcat52" if checkbox with this id is checked 
      console.log(val); 

      // does not work: inserted value 
      map.removeLayer(val); 

      // works: hard coded value of the leaflet.js/input id 
      map.removeLayer(mapcat52); 
     }); 

}); 

Answer 1

Theo Tờ rơi API doc http://leafletjs.com/reference.html#map-removelayer, removeLayer mất một tham số ILayer: removeLayer(<ILayer> layer) nhưng bạn đang đi qua nó một String: $(this).attr("id")

Dường như bạn có đối tượng lớp trong một biến: mapcat52. Bạn có thể lưu các đối tượng lớp khi bạn tạo chúng, sau đó nhìn họ lên bởi id để vượt qua để removeLayer:

var layers = new Array(); 

// create layer 
var mapcat52 = new MyCustomLayer(latlng); 

// save to layers list 
layers["mapcat52"] = mapcat52; 
... 

// remove layers 
$.each(someObj.idsChecked, function(id, val) { 
    // look up layer object by id 
    var layerObj = layers[val]; 
    // remove layer 
    map.removeLayer(layerObj); 
}); 

Answer 2

Tôi có thể nói một cách đơn giản nhất để loại bỏ/thêm (chuyển đổi) lớp khỏi bản đồ sẽ được sử dụng a Lớp nhóm.

Trước khi thêm các lớp riêng lẻ vào bản đồ, hãy thêm chúng vào một nhóm lớp thay thế và sau đó thêm lớp đó vào bản đồ của bạn.

Sau đó, khi bạn phải xóa các lớp, chỉ cần gọi hàm clearLayers().

Kiểm tra các API cho LayerGroup http://leafletjs.com/reference.html#layergroup

Ví dụ

var map = L.map('leafletMap', {minZoom:11}).setView([37.8, -96], 11); 
var assetLayerGroup = new L.LayerGroup(); 
var marker1 = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'); 
var marker2 = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'), 
assetLayerGroup.addLayer(marker1); 
assetLayerGroup.addLayer(marker2); 

Khi chọn hộp kiểm xoá được kiểm tra

assetLayerGroup.clearLayers();