web-dev-qa-db-ja.com

リーフレットの現在のマップ境界内のマーカー/レイヤーのリストを取得します

これは、尋ねられた質問と多少似ています here -

サーバーから検索結果(人の名前と情報)のセット全体を一度に取得し、結果のリストを順に表示するマップアプリケーションの検索ボックスを作成しています。したがって、マップ上の特定のポイントには2種類のマーカーがあります。検索結果にはあるが現在のページにはないポイントの背景マーカーと、検索結果の現在のページにあるポイントの前景マーカーです。

このすべてがうまく機能します。ユーザーがマップをズームまたはパンした場合に検索結果リストが更新され、現在のマップ境界内のマーカーのみが表示されるように設定します。

明らかに、これを行うサーバー側の方法があります。または、マーカーのリスト全体を実行して、現在の境界内に収まるものを確認することもできます。しかし、誰かがこれをリーフレット内で行う組み込みの方法を知っていますか? map.getVisibleLayers()のようになりますか?

16
Tim Stallmann

これは助けになるかもしれません: 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);
});
12
stefcud

各レイヤーの境界とマップの境界をチェックする必要があります。 eachLayer()は、表示範囲内にあるかどうかに関係なく、すべてのレイヤーを返すためです。

if(map.getBounds().contains(layer.getLatLng())) { ... }

ステファノのコードでは、これはこの行の周りに示されています:

https://github.com/stefanocudini/leaflet-list-markers/blob/master/src/leaflet-list-markers.js#L95

9
Alex G Rice

これは、仕事をする完全に機能する関数です:

// 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;
}
6
auco

質問の最後の部分に関して、可視レイヤーを繰り返し処理したい場合は、eachLayerを使用できます。例:

map.eachLayer(function (layer) {
    // do something with the layer
});

APIリファレンス: http://leafletjs.com/reference.html#map-stuff-methods

5
tom