Meer

Hoe geanimeerde clustermarkeringen maken in OpenLayers/Leaflet?

Hoe geanimeerde clustermarkeringen maken in OpenLayers/Leaflet?


Ik wil Leaflet gebruiken vanwege de vloeiende overgangen die Openlayers niet lijken te kunnen evenaren. Ik heb specifiek de mogelijkheid nodig om markeringen te clusteren met op maat gemaakte markeringsgroepen.

Het beste voorbeeld dat laat zien wat ik probeer te bereiken, is te vinden bij Redfin.

Houd er rekening mee dat de muisaanwijzer op een cluster zorgt voor een gelikte animatie en door op een markering te klikken, splitsen de clusters zich met een geanimeerd effect. Bij het bereiken van een zoomniveau waar individuele punten elkaar niet overlappen met een bepaalde tolerantie, splitsen de feitelijke markeringen zich op een geanimeerde manier naar hun locaties.

Ik zou graag soortgelijke effecten willen integreren en zou graag wat begeleiding op prijs stellen over de beste aanpak of andere voorbeelden die u misschien kent.

Opmerking: Redfin lijkt Flash te gebruiken waar ik vanaf wil blijven. In een ideale situatie zou ik dit indien mogelijk via Javascript willen bereiken, maar ik denk dat dit waarschijnlijk via HTML5/canvas moet gebeuren.

Misschien is het gebruik van p. - Raphael.js of d3.js

Om het even welke ideeën?

Tussen haakjes - vond dit voorbeeld, maar het lijkt specifiek van toepassing te zijn op Google Maps.


Als je een clusterer zoals redfin wilt, bekijk dan mijn Leaflet.markercluster: https://github.com/Leaflet/Leaflet.markercluster/blob/master/example/marker-clustering-realworld.388.html

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

Het is volledig geanimeerd enz enz :)


OpenLayers heeft ook een clusterstrategie. Het enige dat u hoeft te doen, is een strategie in de vectorlaag op te geven.

De oplossing is op dit moment erg "simpel", verkleint simpelweg het aantal punten afhankelijk van het zoomniveau. Als je iets geweldigs nodig hebt, moet je het zelf en je behoeften programmeren. Kijk ook eens naar SelectFeature-besturing waarmee u kunt bepalen wanneer u de muis over een functie plaatst.

De redfin is echt een modemonster. Ik hoop dat ik wat tijd heb om wat te testen met OL :)


Ik heb niet veel tijd gehad om er naar te kijken, maar CloudMade (makers van Leaflet) heeft enkele Marker Clustering-mogelijkheden. Hoe je ze geanimeerd en strak kunt maken, daar ben ik niet zeker van, maar het is een begin.

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


Voor foldergebruikers.

Hier is een port van de Google Maps MarkerClusterer voor Leaflet

https://github.com/ideak/leafclusterer


Ik heb zojuist een zogenaamde AnimatedCluster-strategie voor OpenLayers geïmplementeerd. Je kunt er wat meer over zien op: http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html

Het is nog maar een eerste versie maar voegt een leuke animatie toe aan de clusters. Er zijn veel dingen te verbeteren, maar het is een beginpunt.


Heb je het voorbeeld van polymaps bekeken welke punten clusters?

De cirkels hier zijn vectoren die kunnen worden gewijzigd met css.


Bekijk de video: SIG Berbasis Web - Google Maps API, OpenLayers, Leaflet