Wie erstelle ich animierte Cluster-Marker in OpenLayers / Leaflet?

19

Ich möchte Leaflet verwenden, da die Übergänge, mit denen Openlayers scheinbar nicht übereinstimmen, reibungslos verlaufen. Ich benötige speziell die Fähigkeit, Marker mit benutzerdefinierten Markergruppen zu gruppieren.

Das beste Beispiel, das zeigt, was ich erreichen will , finden Sie bei Redfin .

Bitte beachten Sie, dass das Bewegen des Mauszeigers über einen Cluster für eine glatte Animation sorgt. Wenn Sie auf einen Marker klicken, werden die Cluster mit einem animierten Effekt aufgeteilt. Bei Erreichen einer Zoomstufe, bei der sich einzelne Punkte nicht mit einer bestimmten Toleranz überschneiden, werden die tatsächlichen Markierungen animiert auf ihre Positionen aufgeteilt.

Ich würde wirklich gerne ähnliche Effekte in diese integrieren und würde mich über eine Anleitung zum besten Ansatz oder über andere Beispiele freuen, die Ihnen vielleicht bekannt sind.

Hinweis: Redfin scheint Flash zu verwenden, von dem ich mich fernhalten möchte. In einer idealen Situation würde ich dies gerne durch Javascript erreichen, denke aber, dass dies wahrscheinlich durch HTML5 / canvas erfolgen muss.

Vielleicht die Verwendung von p. - Raphael.js oder d3.js

Irgendwelche Ideen?

Übrigens - fand dieses Beispiel, aber es scheint speziell auf Google Maps zuzutreffen.

— NetConstructor.com
quelle

Ich glaube nicht, dass Redfin Flash verwendet. Mit dem Dojo-Toolkit ( dojotoolkit.org ) ist anscheinend alles Javascript . Andere Zuordnungsbibliotheken habe ich allerdings nicht gefunden - sie könnten auch verwendet werden.

— djq

Momentan entwickle ich eine Leaflet-Clustering-Ebene - github.com/cavis/leafpile. Sie ist noch nicht wirklich ausgefallen, aber ich plane, Dinge wie anpassbare Markierungsbilder und Zoom-Übergangsstrategien hinzuzufügen. Sie können dem Issue Tracker auch Verbesserungsvorschläge hinzufügen.

— Cavis

22

Wenn Sie einen Clusterer wie Redfin möchten, schauen Sie sich mein Leaflet.markercluster an: https://github.com/Leaflet/Leaflet.markercluster/blob/master/example/marker-clustering-realworld.388.html

https://github.com/danzel/Leaflet.markercluster

Es ist voll animiert etc etc :)

— Dave Leaver
quelle

3

Yup - das Beste und lass mich der Erste sein, der dich begrüßt Dave und lass mich deine Punkte für deine Hilfe steigern.

— NetConstructor.com

1

Ziemlich cool! +1

— unicoletti

6

OpenLayers hat auch eine Clusterstrategie. Alles, was Sie tun müssen, ist, als Strategie in der Vektorebene anzugeben.

Die Lösung ist im Moment sehr "simpel", reduziert einfach die Anzahl der Punkte in Abhängigkeit von der Zoomstufe. Wenn Sie etwas Fantastischeres brauchen, müssen Sie es selbst und nach Ihren Bedürfnissen programmieren. Schauen Sie sich auch das SelectFeature-Steuerelement an, mit dem Sie steuern können, wann Sie mit der Maus über ein Feature fahren.

Die Redfin ist ein echtes Modebeispiel. Hoffe ich habe etwas Zeit um ein paar Tests mit OL zu machen :)

— EricSonaron
quelle

Ich würde gerne OpenLayers verwenden, aber ich brauche die weichen Übergänge, wie sie in der Packungsbeilage zu finden sind. Kennen Sie OpenLayer-Hack, der diese raffinierten Zoom-Animationen repliziert?

— NetConstructor.com

Tut mir leid aber nein. Im Moment teste ich ein bisschen das Styling der "Punkte" und füge etwas Farbe und Zählnummer in den Kreis ein. Aber das Hinzufügen von Animationen ist im Moment noch weit entfernt.

— EricSonaron

Haben Sie jemals eine Lösung für dieses Problem mit den neuen Funktionen von ol3 gefunden?

— NetConstructor.com

3

Ich hatte nicht viel Zeit, mich damit zu befassen, aber CloudMade (Hersteller von Leaflet) verfügt über einige Marker-Clustering-Funktionen. Wie man sie animiert und schlank macht, weiß ich nicht genau, aber es ist ein Anfang.

http://developers.cloudmade.com/projects/web-maps-api/examples/marker-clustering

— Alukach
quelle

3

Für Prospektbenutzer.

Hier ist ein Port des Google Maps MarkerClusterer für Leaflet

https://github.com/ideak/leafclusterer

— ns-1m
quelle

Ja, ich habe dieses Lesezeichen, aber ich benötige immer noch den Animationsteil

— NetConstructor.com

3

Ich habe gerade eine sogenannte AnimatedCluster-Strategie für OpenLayers implementiert. Weitere Informationen finden Sie unter: http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html

Es ist nur eine erste Version, fügt aber den Clustern eine nette Animation hinzu. Es gibt viele Dinge zu verbessern, aber es ist ein Ausgangspunkt.

— EricSonaron
quelle

großartige Arbeit damit!

— NetConstructor.com

1

Haben Sie sich das Beispiel mit den Polymaps angesehen, auf die die Cluster zeigen?

Die Kreise hier sind Vektoren, die mit CSS geändert werden können.

— djq
quelle

Vielen Dank, aber ich habe speziell nach Lösungen gesucht (vorzugsweise browserübergreifend), die die Animation von Markern ermöglichen. Ich bin mir nicht sicher, ob Sie die Gelegenheit hatten, das Link-Beispiel ( redfin.com/… ) von Redfin zu lesen . Dieser Link stellt dar, was ich erreichen möchte - glatte Marker-Animationsdarstellungen, je tiefer Sie auf die gruppierten Marker / Bereiche klicken, um sie zu vergrößern oder zu vergrößern.

— NetConstructor.com