19 votos

¿Cómo crear marcadores de grupo animados en OpenLayers/Leaflet?

Quiero utilizar Leaflet debido a las transiciones suaves que Openlayers parece que no puede igualar. En concreto, necesito poder agrupar marcadores con grupos de marcadores personalizados.

El mejor ejemplo de lo que pretendo se encuentra en Redfin .

Al pasar el ratón por encima de un clúster, se produce una animación y, al hacer clic en un marcador, los clústeres se separan con un efecto animado. Cuando se alcanza un nivel de zoom en el que los puntos individuales no se solapan con una tolerancia determinada, los marcadores reales se separan en sus ubicaciones de forma animada.

Realmente me encantaría integrar efectos similares a estos y agradecería alguna orientación sobre el mejor enfoque u otros ejemplos que pueda conocer.

Nota: Redfin parece utilizar Flash, del que quiero mantenerme alejado. En una situación ideal me gustaría lograr esto a través de Javascript si es posible, pero creo que probablemente tiene que ser hecho a través de HTML5 / lienzo.

Tal vez el uso de p. - Raphael.js o d3.js

¿Alguna idea?

BTW - encontrado este ejemplo pero parece aplicarse específicamente a Google Maps.

22voto

nachocab Puntos 209

Si quieres un clusterer como redfin entonces echa un vistazo a mi Leaflet.markercluster: https://github.com/Leaflet/Leaflet.markercluster/blob/master/example/marker-clustering-realworld.388.html

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

Está totalmente animado, etc. :)

6voto

Robert Koritnik Puntos 731

OpenLayers también cuenta con una estrategia de clústeres. Todo lo que necesitas hacer es especificar como estrategia en la capa vectorial.

La solución es muy "simple" por el momento, simplemente reduce el número de puntos dependiendo del nivel de zoom. Si necesitas algo más impresionante tendrás que programarlo por ti mismo y tus necesidades. Echa un vistazo también al control SelectFeature que te puede servir para controlar cuando pones el ratón sobre una característica.

El redfin es realmente una muestra de moda. Espero tener algo de tiempo para hacer algunas pruebas con OL :)

3voto

rakslice Puntos 240

No he tenido mucho tiempo para investigarlo, pero CloudMade (creadores de Leaflet) tiene algunas capacidades de Marker Clustering. Cómo hacerlos animados y elegante, no estoy seguro acerca de eso, pero es un comienzo.

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

3voto

Ced-le-pingouin Puntos 158

Para usuarios de folletos.

He aquí una versión de Google Maps MarkerClusterer para Leaflet

https://github.com/ideak/leafclusterer

3voto

Robert Koritnik Puntos 731

Acabo de implementar una estrategia llamada AnimatedCluster para OpenLayers. Usted puede ver un poco más sobre él en: http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html

Es sólo una primera versión, pero añade una bonita animación a los clusters. Hay muchas cosas que mejorar, pero es un punto de partida.

i-Ciencias.com

I-Ciencias es una comunidad de estudiantes y amantes de la ciencia en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X