Leaflet.js: Как удалить несколько слоев из карты

Question

Я использую Leaflet.js для карты. Теперь я хочу удалить добавленные слои с карты. При нажатии кнопки ввода # все отмеченные флажки должны быть изменены на непроверенные, и все соответствующие слои должны быть удалены с карты.

Чтобы удалить слой с карты, необходим идентификатор слоя. Этот идентификатор равен идентификатору соответствующего флажка. Вот почему я использую jQuery, чтобы получить идентификаторы всех отмеченных флажков и сохранить их значение в объекте, здесь называется someObj.idsChecked.

Когда я пытаюсь использовать сохраненное значение VAL, чтобы удалить один слой не работает, пока console.log отображает требуемое значение. Вот например: mapcat52.

При вставке предыдущего идентификатора, жестко закодированного в функцию, например map.removeLayer (mapcat52) работает так, как ожидалось.

Где ошибка в коде или в моих мыслях?
Любая помощь очень ценится.

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> 

... 

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

Согласно листовка API док http://leafletjs.com/reference.html#map-removelayer, removeLayer принимает параметр ILAYER: removeLayer(<ILayer> layer) но вы передаете ему строку: $(this).attr("id")

Похоже, у вас уже есть объект слоя в переменной: mapcat52. Вы можете сохранить объекты слоя при их создании, а затем искать их по идентификатору, чтобы перейти к 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

Я бы сказал, что самый простой способ, чтобы удалить/добавить (переключаемые) слои из карты будет использовать a LayerGroup.

Прежде чем добавлять отдельные слои к карте, добавьте их в LayerGroup, а затем добавьте эту LayerGroup на свою карту.

Затем, когда вам нужно удалить слои, просто вызовите функцию clearLayers().

ЗАКАНЧИВАТЬ API для LayerGroup http://leafletjs.com/reference.html#layergroup

Пример

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

Когда удалить флажок

assetLayerGroup.clearLayers();