Como criar marcadores de cluster animados no OpenLayers / Leaflet?

19

Eu quero usar o Leaflet devido às transições suaves que os Openlayers parecem que não conseguem igualar. Exijo especificamente a capacidade de agrupar marcadores com grupos de marcadores com estilo personalizado.

O melhor exemplo que demonstra o que estou tentando alcançar pode ser encontrado em Redfin .

Observe que passar o mouse sobre um cluster fornece uma animação suave e, clicando em um marcador, os clusters se dividem com um efeito animado. Ao atingir um nível de zoom em que pontos individuais não se sobrepõem a uma determinada tolerância, os marcadores reais se dividem em seus locais de maneira animada.

Eu realmente adoraria integrar efeitos semelhantes a esses e gostaria de receber algumas orientações sobre a melhor abordagem ou outros exemplos que você possa conhecer.

Nota: O Redfin parece estar usando o Flash, do qual quero ficar longe. Em uma situação ideal, eu gostaria de conseguir isso através do Javascript, se possível, mas acho que isso provavelmente precisa ser feito através do HTML5 / canvas.

Talvez o uso de p. - Raphael.js ou d3.js

Alguma ideia?

BTW - encontrou este exemplo, mas parece se aplicar especificamente ao Google Maps.

openlayers-2 web-mapping javascript clustering leaflet NetConstructor.com
fonte
Não acho que o Redfin esteja usando flash. Parece que é tudo javascript usando o dojo toolkit ( dojotoolkit.org ). Eu não localizei nenhuma outra biblioteca de mapeamento - eles também poderiam estar usando.
DJQ
No momento, estou desenvolvendo uma camada de cluster do Leaflet - github.com/cavis/leafpile Ainda não faz nada de mais sofisticado, mas estou planejando adicionar coisas como imagens de marcadores personalizáveis ​​e estratégias de transição de zoom. Sinta-se à vontade para adicionar solicitações de aprimoramento ao rastreador de problemas.
cavis

Respostas:

6

O OpenLayers também tem uma estratégia de cluster. Tudo que você precisa fazer é especificar como estratégia na camada vetorial.

A solução é muito "simples" no momento, simplesmente reduz o número de pontos, dependendo do nível de zoom. Se você precisar de algo mais impressionante, precisará programá-lo sozinho e com suas necessidades. Dê uma olhada também no controle SelectFeature, que pode ajudá-lo a controlar quando você coloca o mouse sobre um recurso.

O redfin é realmente uma amostra de moda. Espero ter algum tempo para fazer algum teste com OL :)

EricSonaron
fonte
Gostaria de usar o OpenLayers, mas preciso de transições suaves, como as encontradas no folheto. Você conhece algum hack de openlayers que replica essas animações de zoom liso?
NetConstructor.com
Lamento mas não. No momento, estou testando um pouco os "pontos", adicionando alguma cor e número de contagem no círculo. Mas adicionar animação está longe no momento.
EricSonaron
Você já encontrou uma solução para isso com os novos recursos do ol3?
NetConstructor.com 01/07/12
3

Para usuários de folhetos.

Aqui está uma porta do Google Maps MarkerClusterer for Leaflet

https://github.com/ideak/leafclusterer

ns-1m
fonte
Sim, eu tenho que marcada, mas eu ainda exigir que a parte de animação
NetConstructor.com
1

Você já viu o exemplo dos polímapas apontados por clusters?

Os círculos aqui são vetores que podem ser modificados usando css.

djq
fonte
obrigado, mas eu especificamente procurei qualquer tipo de solução (de preferência compatível com vários navegadores) que permitisse a animação de marcadores. Não tenho certeza se você teve a oportunidade de conferir o exemplo de link ( redfin.com/… ) do Redfin. Esse link representa o que eu pretendo alcançar - representações lisas de animação de marcadores quanto mais você clica em / faz / aumenta o zoom nos marcadores / áreas em cluster.
NetConstructor.com