10

マップに Leaflet.js を使用しています。ここで、追加したレイヤーをマップから削除したいと思います。入力 #button をクリックすると、チェックされているすべてのチェックボックスがオフに変更され、対応するすべてのレイヤーがマップから削除されます。

マップからレイヤーを削除するには、レイヤーの ID が必要です。この ID は、対応するチェックボックスの ID と同じです。そのため、jQuery を使用して、チェックされているすべてのチェックボックスの ID を取得し、その値をオブジェクト (ここではsomeObj.idsChecked ) に格納しています。

保存された値valを使用して 1 つのレイヤーを削除しようとすると、 console.logに必要な値が表示されている間は機能しません。たとえば、mapcat52.

map.removeLayer(mapcat52)のような関数にハードコードされた以前の ID を挿入すると、期待どおりに機能します。

私のコードまたは私の考えのどこにエラーがありますか?
どんな助けでも大歓迎です。

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

});
4

3 に答える 3

6

Leaflet API doc http://leafletjs.com/reference.html#map-removelayerによると、removeLayer は ILayer パラメータを取りますremoveLayer( <ILayer> layer )が、文字列を渡しています。$(this).attr("id")

レイヤー オブジェクトが既に変数内にあるようです: mapcat52. 作成時にレイヤーオブジェクトを保存し、id で検索して 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); 
});
于 2013-09-11T18:31:25.050 に答える