¿Cómo crear marcadores de clúster animados en OpenLayers / Leaflet?

19

Quiero usar Leaflet debido a las transiciones suaves que Openlayers parece que no pueden igualar. Exijo específicamente la capacidad de agrupar marcadores con grupos de marcadores de estilo personalizado.

El mejor ejemplo que demuestra lo que estoy tratando de lograr se puede encontrar en Redfin .

Tenga en cuenta que al pasar el mouse sobre un clúster proporciona una animación elegante y al hacer clic en un marcador, los clústeres se dividen con un efecto animado. Cuando se alcanza un nivel de zoom donde los puntos individuales no se superponen con una tolerancia dada, los marcadores reales se dividen 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 estar usando Flash, de lo que quiero alejarme. En una situación ideal, me gustaría lograr esto a través de Javascript si es posible, pero creo que probablemente deba hacerse a través de HTML5 / canvas.

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

¿Algunas ideas?

Por cierto, encontré este ejemplo, pero parece aplicarse específicamente a Google Maps.

openlayers-2 web-mapping javascript clustering leaflet NetConstructor.com
fuente
No creo que Redfin esté usando flash. Parece que todo es javascript usando el kit de herramientas dojo ( dojotoolkit.org ). Sin embargo, no vi ninguna otra biblioteca de mapeo, podrían estar usándolas también.
DJ
Actualmente estoy desarrollando una capa de agrupación de folletos : github.com/cavis/leafpile. Todavía no hace nada realmente elegante, pero planeo agregar cosas como imágenes de marcadores personalizables y estrategias de transición de zoom. Siéntase libre de agregar solicitudes de mejora al rastreador de problemas.
cavis

Respuestas:

6

OpenLayers también tiene una estrategia de clúster. Todo lo que necesita 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 necesita algo más increíble, deberá programarlo usted mismo y sus necesidades. Observe también el control SelectFeature, que puede servirle para controlar cuando coloca el mouse sobre una función.

El aleta roja es realmente una muestra de moda. Espero tener algo de tiempo para hacer una prueba con OL :)

EricSonaron
fuente
Me gustaría usar OpenLayers pero necesito las transiciones suaves como las que se encuentran en el folleto. ¿Conoces algún hack de Openlayers que reproduzca estas animaciones de zoom?
NetConstructor.com
Lo siento, pero no. Ahora mismo estoy probando un poco el estilo de los "puntos" agregando algo de color y número de conteo en el círculo. Pero agregar animación está muy lejos por el momento.
EricSonaron
¿Alguna vez encontró una solución para esto con las nuevas capacidades de ol3?
NetConstructor.com
3

Para usuarios de folletos.

Aquí hay un puerto de Google Maps MarkerClusterer para Leaflet

https://github.com/ideak/leafclusterer

ns-1m
fuente
Sí, tengo eso marcado pero todavía necesito la parte de animación
NetConstructor.com
1

¿Has mirado el ejemplo de polymaps que agrupa los puntos?

Los círculos aquí son vectores que se pueden modificar usando css.

djq
fuente
gracias, pero específicamente he estado buscando cualquier tipo de soluciones (preferiblemente compatibles con navegadores cruzados) que permitan la animación de marcadores. No estoy seguro de si tuvo la oportunidad de consultar el ejemplo de enlace ( redfin.com/… ) de Redfin. Ese enlace representa lo que estoy buscando lograr: representaciones de animación de marcadores resbaladizas cuanto más profundo hagas clic / acerques / acerques los marcadores / áreas agrupadas.
NetConstructor.com