マップで作業していますが、特定のイベントでマップからすべての対象物を削除したいと考えています。フィーチャは、動的にプロットされる複数のレイヤーにあります。
コードの一部は次のとおりです。
$.getJSON('distributor-companies', function (data) {
var layers = [];
$.each(data, function (i, item) {
if (item.geojson != '') {
layers[i] = L.mapbox.featureLayer().addTo(map);
$.getJSON('/geojson/' + item.geojson, function (data) {
layers[i].setGeoJSON(data);
// Loop over the added layer
layers[i].eachLayer(function (layer) {
// Add click event
layer.on('click', function (e) {
// Do stuff
map.fitBounds(layers[i].getBounds());
});
});
});
}
});
});
特定の時点でマップ上のすべてのレイヤーをフェッチして削除する方法はありますか?.
L.Map
のeachLayer
メソッドを使用してマップに追加されたすべてのレイヤーをループし、次にそれぞれのレイヤーでL.Map
のremoveLayer
メソッドを呼び出します。
map.eachLayer(function (layer) {
map.removeLayer(layer);
});
参照:
eachLayer
: http://leafletjs.com/reference.html#map-eachlayer
removeLayer
: http://leafletjs.com/reference.html#map-removelayer
これにより、マップからすべてのレイヤーが削除されることに注意してください。つまり、タイルレイヤーなども意味します。あなたの場合、すべてのfeatureLayerをマップインスタンスに追加せずに、それらのグループを作成するのが最善だと思います。
// Create group for your layers and add it to the map
var layerGroup = L.layerGroup().addTo(map);
$.getJSON('distributor-companies', function (data) {
$.each(data, function (i, item) {
if (item.geojson != '') {
// Add the new featureLayer to the layerGroup
var featureLayer = L.mapbox.featureLayer().addTo(layerGroup);
$.getJSON('/geojson/' + item.geojson, function (data) {
featureLayer.setGeoJSON(data);
featureLayer.eachLayer(function (layer) {
layer.on('click', function (e) {
map.fitBounds(featureLayer.getBounds());
});
});
});
}
});
});
これで、L.LayerGroup
のclearLayers
メソッドを呼び出して、グループ内の現在のレイヤーをクリアすることができます。
layerGroup.clearLayers();
参照:
L.LayerGroup
: http://leafletjs.com/reference.html#layergroup
clearLayers
: http://leafletjs.com/reference.html#layergroup-clearlayers
次の真実なチェックを使用して、それが有効なgeoJSONオブジェクトかどうかを確認できます。
map.eachLayer(function(layer) {
if (!!layer.toGeoJSON) {
map.removeLayer(layer);
}
});
Mapbox-gl描画ライブラリには、これを行う関数があります。
draw.deleteAll().getAll();
これにより、マップ上のすべてのフィーチャとレイヤーが削除されます。