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.

openlayers-2 web-mapping javascript clustering leaflet 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

Antworten:

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

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
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