Comment créer des marqueurs de cluster animés dans OpenLayers / Leaflet?

19

Je veux utiliser Leaflet en raison des transitions fluides auxquelles Openlayers semble ne pas correspondre. J'ai spécifiquement besoin de pouvoir regrouper les marqueurs avec des groupes de marqueurs de style personnalisé.

Le meilleur exemple qui montre ce que j'essaie de réaliser se trouve chez Redfin .

Veuillez noter que le survol d'un cluster permet une animation fluide et en cliquant sur un marqueur les clusters se séparent avec un effet animé. Lorsque vous atteignez un niveau de zoom où les points individuels ne se chevauchent pas avec une tolérance donnée, les marqueurs réels se répartissent à leurs emplacements de manière animée.

J'aimerais vraiment intégrer des effets similaires à ceux-ci et apprécierais quelques conseils sur la meilleure approche ou d'autres exemples que vous pourriez connaître.

Remarque: Redfin semble utiliser Flash dont je veux rester à l'écart. Dans une situation idéale, j'aimerais réaliser cela via Javascript si possible, mais je pense que cela doit probablement être fait via HTML5 / canvas.

Peut-être que l'utilisation de p. - Raphael.js ou d3.js

Des idées?

BTW - a trouvé cet exemple mais il semble s'appliquer spécifiquement à Google Maps.

openlayers-2 web-mapping javascript clustering leaflet NetConstructor.com
la source
Je ne pense pas que Redfin utilise le flash. Il semble que tout soit javascript en utilisant la boîte à outils dojo ( dojotoolkit.org ). Je n'ai pas repéré d'autres bibliothèques de cartographie cependant - elles pourraient également les utiliser.
djq
Je suis en train de développer une couche de clustering Leaflet - github.com/cavis/leafpile Cela ne fait encore rien de spécial, mais je prévois d' ajouter des choses comme des images de marqueurs personnalisables et des stratégies de transition de zoom. N'hésitez pas à ajouter des demandes d'amélioration au suivi des problèmes.
cavis

Réponses:

6

OpenLayers a également une stratégie de cluster. Il vous suffit de spécifier une stratégie dans la couche vectorielle.

La solution est très "simple" pour le moment, réduit simplement le nombre de points en fonction du niveau de zoom. Si vous avez besoin de quelque chose de plus génial, vous devrez le programmer par vous-même et vos besoins. Jetez également un œil au contrôle SelectFeature qui peut vous servir à contrôler lorsque vous placez la souris sur une fonction.

Le redfin est vraiment un échantillon de mode. J'espère avoir du temps pour faire un test avec l'OL :)

EricSonaron
la source
Je voudrais utiliser OpenLayers mais j'ai besoin des transitions douces comme celles trouvées dans la brochure. Êtes-vous au courant d'un hack openlayers qui reproduit ces animations de zoom lisses?
NetConstructor.com
Désolé mais non. En ce moment, je fais quelques tests de style un peu les "points" en ajoutant une couleur et un nombre de comptage dans le cercle. Mais l'ajout d'animation est loin pour le moment.
EricSonaron
Avez-vous déjà trouvé une solution à cela avec les nouvelles capacités ol3?
NetConstructor.com
3

Pour les utilisateurs de dépliants.

Voici un portage de Google Maps MarkerClusterer pour Leaflet

https://github.com/ideak/leafclusterer

ns-1m
la source
Oui, je l'ai mis en signet mais j'ai toujours besoin de la partie animation
NetConstructor.com
1

Avez-vous regardé l' exemple de polymaps qui pointe les clusters?

Les cercles ici sont des vecteurs qui peuvent être modifiés en utilisant css.

djq
la source
merci mais j'ai spécifiquement recherché tout type de solutions (de préférence cross-browser supporté) qui permettraient l'animation de marqueurs. Je ne sais pas si vous avez eu l'occasion de consulter l'exemple de lien ( redfin.com/… ) de Redfin. Ce lien représente ce que je cherche à réaliser - des représentations d'animation de marqueur lisse plus vous cliquez en profondeur sur / dans / zoomez sur les marqueurs / zones groupés.
NetConstructor.com