これは、尋ねられた質問と多少似ています here -
サーバーから検索結果(人の名前と情報)のセット全体を一度に取得し、結果のリストを順に表示するマップアプリケーションの検索ボックスを作成しています。したがって、マップ上の特定のポイントには2種類のマーカーがあります。検索結果にはあるが現在のページにはないポイントの背景マーカーと、検索結果の現在のページにあるポイントの前景マーカーです。
このすべてがうまく機能します。ユーザーがマップをズームまたはパンした場合に検索結果リストが更新され、現在のマップ境界内のマーカーのみが表示されるように設定します。
明らかに、これを行うサーバー側の方法があります。または、マーカーのリスト全体を実行して、現在の境界内に収まるものを確認することもできます。しかし、誰かがこれをリーフレット内で行う組み込みの方法を知っていますか? map.getVisibleLayers()のようになりますか?
これは助けになるかもしれません: https://github.com/stefanocudini/leaflet-list-markers
レイヤーのすべてのマーカーを含むデモからわかるように、このプラグインは現在のビューポートに表示されているマーカーのみのリストを表示します。使い方は簡単で、続けて:
var markersLayer = new L.LayerGroup();
map.addControl( new L.Control.ListMarkers({layer: markersLayer}) );
それを取得するためのコードは次のようになります。
var layers = L.LayerGroup(), //layers contains all markers..
contained = []; //makers in map boundingbox
layers.eachLayer(function(l) {
if( l instanceof L.Marker && map.getBounds().contains(l.getLatLng()) )
contained.Push(l);
});
各レイヤーの境界とマップの境界をチェックする必要があります。 eachLayer()は、表示範囲内にあるかどうかに関係なく、すべてのレイヤーを返すためです。
if(map.getBounds().contains(layer.getLatLng())) { ... }
ステファノのコードでは、これはこの行の周りに示されています:
https://github.com/stefanocudini/leaflet-list-markers/blob/master/src/leaflet-list-markers.js#L95
これは、仕事をする完全に機能する関数です:
// var map is an instance of a Leaflet map
// this function assumes you have added markers as GeoJSON to the map
// it will return an array of all features currently shown in the
// active bounding region.
function getFeaturesInView() {
var features = [];
map.eachLayer( function(layer) {
if(layer instanceof L.Marker) {
if(map.getBounds().contains(layer.getLatLng())) {
features.Push(layer.feature);
}
}
});
return features;
}
質問の最後の部分に関して、可視レイヤーを繰り返し処理したい場合は、eachLayerを使用できます。例:
map.eachLayer(function (layer) {
// do something with the layer
});
APIリファレンス: http://leafletjs.com/reference.html#map-stuff-methods