2014-02-27 13 views
6

Dies ist etwas ähnlich wie die Frage gestellt here -Hier finden Sie eine Liste von Markern/Schichten innerhalb des aktuellen Kartengrenzen in Leaflet

Ich bin ein Suchfeld für eine Kartenanwendung schreiben, die eine ganze Reihe von Such abruft Ergebnisse (Name der Leute & info) sofort von einem Server und dann Seiten durch die Liste der Ergebnisse. An jedem Punkt der Karte gibt es also zwei Arten von Markierungen: eine Hintergrundmarkierung für Punkte, die in den Suchergebnissen, aber nicht in der aktuellen Seite enthalten sind, und eine Vordergrundmarkierung für Punkte, die sich auf der aktuellen Seite der Suchergebnisse befinden.

Das alles funktioniert gut .. was ich jetzt tun möchte, ist es eingerichtet, dass, wenn ein Benutzer die Karte zoomt oder schwenkt, die Suchergebnisliste aktualisiert, um nur Markierungen innerhalb der aktuellen Kartengrenzen anzuzeigen.

Offensichtlich gibt es serverseitige Möglichkeiten, dies zu tun, oder ich könnte auch einfach durch die ganze Liste von Markern laufen, um zu sehen, welche innerhalb der aktuellen Grenzen passen; aber weiß jemand eine eingebaute Möglichkeit, dies innerhalb der Broschüre zu tun? Etwas, das wie map.getVisibleLayers() aussehen würde?

Antwort

3

ich denke, das hilfreich sein kann: https://github.com/stefanocudini/leaflet-list-markers

wie man es von der Demo sehen können, einschließlich aller Marker in einer Schicht, dieses Plugin eine Liste nur diejenigen sichtbar im aktuellen Ansichtsfenster zeigt. Seine Verwendung ist einfach, in einer Reihe:

map.addControl(new L.Control.ListMarkers({layer: markersLayer})); 

Der Code für erreichen, ist es wie so:

var layers = L.LayerGroup(), //layers contains all markers.. 
    contained = [];   //makers in map boundingbox 

layers.eachLayer(function(layer) { 
     if(layer instanceof L.Marker) 
      if(map.getBounds().contains(layer.getLatLng())) 
       contained.push(layer); 
    }); 
3

In Bezug auf den letzten Teil Ihrer Frage, wenn Sie möchten, durch sichtbare Schichten zu durchlaufen, Sie können eachLayer, zum Beispiel verwenden:

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

API-Referenz: http://leafletjs.com/reference.html#map-stuff-methods

+0

I bellieve:

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

In Stefano Code wird diese um diese Linie gezeigt. – kristianlm

Verwandte Themen