2014-11-24 13 views
7

Ero curioso di sapere le possibilità di animare le funzionalità in OpenLayers3.Animazione delle funzionalità in OpenLayers3

Sono molto consapevoli degli esempi qui http://openlayers.org/en/v3.0.0/examples/animation.html e qui https://gis.stackexchange.com/questions/26546/openlayers-animation-examples-and-algorithms

presentati Tuttavia, gli esempi ufficiali per OL3 non del tutto adatta alle mie esigenze.

Supponiamo di avere un layer (geojson per esempio) che ha una colonna "time" con molti e molti valori di tempo.

Mi piacerebbe implementare qualcosa come un dispositivo di scorrimento che aggiunge/rimuove le funzionalità (o modifica il loro stile) a seconda delle azioni dell'utente.

Il fatto è che ci sono alcune API che potrebbero essere in grado di farlo, ma sembrano obsolete (gli esempi di codice funzionavano ancora con ol2).

Avete suggerimenti su come costruire un semplice cursore di animazione con OL3?

MODIFICA: Non deve necessariamente essere un'animazione corretta. Una possibilità che mi è venuta in mente è cambiare lo stile di un livello ogni volta che si sposta il cursore. Ancora nessun indizio su come rendersene conto.

Questa immagine illustra quello che ho in mente:

design for desired functionality

EDIT: Il mio approccio attuale è quello di avere un dispositivo di scorrimento, che fa scattare il codice ogni volta che viene spostato. In qualche modo provo a cambiare lo stile del livello in modo dinamico, ma non ho ancora ottenuto un risultato valido.

+0

Sembra che la strada da percorrere sia con la linea temporale OpenLayers. Avete alcuni dati di esempio? – BernieSF

+0

Sicuro. Ma la cronologia funziona con l'ol3? – stopopol

risposta

4

Ok. Ho trovato una soluzione anch'io. Non è davvero un'animazione a tutti gli effetti, ma funziona per me.

Fondamentalmente quello che faccio è che carico un layer wfs sulla mia mappa. Ora, ecco il trucco: Quando lo faccio, ho semplicemente ordinare i valori temporali delle caratteristiche uno per uno e aggiungere ogni funzione con il valore temporale da 1 a un livello, ogni funzione con un valore temporale di 2 a un altro e così e così via. Questo fondamentalmente fa il trucco. Il resto è semplice.

Il passaggio successivo consiste nell'implementare un dispositivo di scorrimento che va da 1 (il valore temporale più basso) a qualunque sia il valore temporale più alto. Ogni volta che lo slider viene spostato, si attiva un evento che scopre a quale valore temporale è impostato il cursore e quindi aggiunge/rimuove i livelli corrispondenti.

Quindi, se il cursore è impostato su 5. Aggiunge ogni livello da 1 a 5 alla mappa e rimuove ogni altro livello. Di nuovo, questa non è veramente un'animazione, ma funziona nel mio caso.

Se qualcuno si presenta con un'altra possibile soluzione, si prega di postare qui. Si mi farebbe piacere.

(Btw, questo è ciò che la mia soluzione assomiglia in azione :)

enter image description here

EDIT: ora posso confermare anche che è possibile costruire animazioni "propri" con questo approccio. Ho semplicemente creato una funzione js che include più "setTimeout" al momento in cui viene aggiunto un livello e aggiunto un pulsante di riproduzione che attiva questa funzione.Ciò equivale a un'animazione che visualizza la crescita da t = 1 a tmax.

+0

È fantastico. Stavo per suggerire una soluzione D3js. Quindi, in realtà non stai chiamando dinamicamente il wfs, solo chiamandolo una volta, e creando strati basati sull'intervallo del cursore, in sostanza? –

+0

Esattamente. Fondamentalmente, creo i diversi livelli all'inizio quando la mappa viene inizializzata e quindi li aggiungo e li rimuovo dinamicamente. Attualmente sto lavorando su una funzione che utilizza il ritardo temporale per creare un'animazione corretta. È praticamente un pulsante di riproduzione che attraversa l'intero processo dall'inizio alla fine. – stopopol

Problemi correlati