Come creare marker di cluster animati in OpenLayers / Leaflet?


19

Voglio usare Leaflet a causa delle transizioni fluide che Openlayers sembra non riescano a eguagliare. Richiedo specificamente la possibilità di raggruppare marcatori con gruppi di marcatori personalizzati.

Il miglior esempio che dimostra ciò che sto cercando di ottenere può essere trovato su Redfin .

Si noti che il passaggio del mouse su un cluster fornisce un'animazione fluida e facendo clic su un marcatore i cluster si dividono con un effetto animato. Quando si raggiunge un livello di zoom in cui i singoli punti non si sovrappongono con una determinata tolleranza, i marker effettivi si suddividono nelle loro posizioni in modo animato.

Mi piacerebbe davvero integrare effetti simili a questi e apprezzerei alcune indicazioni sul miglior approccio o altri esempi di cui potresti essere a conoscenza.

Nota: Redfin sembra utilizzare Flash da cui voglio stare alla larga. In una situazione ideale, se possibile, vorrei raggiungerlo tramite Javascript, ma penso che probabilmente debba essere fatto tramite HTML5 / canvas.

Forse l'uso di p. - Raphael.js o d3.js

Qualche idea?

A proposito, ho trovato questo esempio ma sembra applicarsi specificamente a Google Maps.


Non penso che Redfin stia usando il flash. Sembra che sia tutto javascript usando il dojo toolkit ( dojotoolkit.org ). Tuttavia, non ho individuato altre librerie di mapping: potrebbero usarle anche.
djq,

Attualmente sto sviluppando un livello di raggruppamento di volantini - github.com/cavis/leafpile Non fa ancora nulla di veramente fantasioso, ma sto pensando di aggiungere elementi come immagini di marcatori personalizzabili e strategie di transizione dello zoom. Sentiti libero di aggiungere richieste di miglioramento al tracker dei problemi.
cavis,

Risposte:



6

OpenLayers ha anche una strategia di cluster. Tutto quello che devi fare è specificare come strategia nel livello vettoriale.

La soluzione è molto "semplice" per il momento, riduce semplicemente il numero di punti a seconda del livello di zoom. Se hai bisogno di qualcosa di più straordinario, dovrai programmarlo da solo e in base alle tue esigenze. Dai un'occhiata anche al controllo SelectFeature che può aiutarti a controllare quando metti il ​​mouse su una funzione.

Il redfin è davvero un campione di moda. Spero di avere un po 'di tempo per fare qualche test con OL :)


Vorrei usare OpenLayers ma ho bisogno delle transizioni fluide come quelle che si trovano nel volantino. Sei a conoscenza di qualche hacker di openlayer che replica queste animazioni zoom slick?
NetConstructor.com il

Scusa ma no. In questo momento sto facendo dei test sullo styling un po 'dei "punti" aggiungendo un po' di colore e contando il numero nel cerchio. Ma l'aggiunta di animazioni è lontana per il momento.
EricSonaron,

Hai mai trovato una soluzione a questo con le nuove funzionalità di ol3?
NetConstructor.com




1

Hai esaminato l' esempio delle polimaps che indicano i cluster?

I cerchi qui sono vettori che possono essere modificati usando css.


grazie ma in particolare ho cercato qualsiasi tipo di soluzione (preferibilmente supportata da più browser) che consentisse l'animazione dei marker. Non sono sicuro che tu abbia avuto l'opportunità di consultare l'esempio di collegamento ( redfin.com/… ) di Redfin. Quel link rappresenta ciò che sto cercando di ottenere: rappresentazioni di animazione dei marker slick più in profondità si fa clic su / in / zoom nei marker / aree raggruppati.
NetConstructor.com il
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.