web-dev-qa-db-ja.com

Leaflet.js：マップから複数のレイヤーを削除する方法

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

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

保存された値を使おうとすると val 1つのレイヤーを削除するには、 console.log 必要な値を表示します。ここで例：mapcat52。

ハードコードされた前のIDを次のような関数に挿入している間 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); 
        });

});
javascriptjquerycheckboxmapsleaflet
8
LuNarez

Leaflet APIドキュメントによると 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); 
});
6
kielni

マップからレイヤーを削除/追加（トグル）する最も簡単な方法は、LayerGroupを使用することです。

個々のレイヤーをマップに追加する前に、代わりにそれらをLayerGroupに追加してから、そのLayerGroupをマップに追加してください。

次に、レイヤーを削除する必要がある場合は、clearLayers（）関数を呼び出すだけです。

LayerGroupのAPIを確認してください 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();
20
Shriram Sharma

複数のgeoJSONレイヤーを削除する方法を示すために、以下の例を作成しました。

/// geoJSONデータを追加する

      var myGeoJSON = L.geoJSON(myData, {

        onEachFeature: function (feature, layer) {
            layer.myTag = "myGeoJSON"
        }

    });

////// geoJSONレイヤーを削除する関数

var removeMarkers = function() {
    map.eachLayer( function(layer) {

      if ( layer.myTag &&  layer.myTag === "myGeoJSON") {
        map.removeLayer(layer)
          }

        });

}

////関数を呼び出す

removeMarkers（）;

0
Mercel Santos