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.


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


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




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.


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
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.