Animation of features in OpenLayers3
Asked Answered
C

1

7

I was curious about the possibilities of animating features in OpenLayers3.

I'm very aware of the examples presented here http://openlayers.org/en/v3.0.0/examples/animation.html and here https://gis.stackexchange.com/questions/26546/openlayers-animation-examples-and-algorithms

However, the official examples for OL3 don't quite fit my needs.

Let's assume that I have a layer (geojson for instance) that has a "time" column with lots and lots of time values.

I'd like to implement something like a slider that adds/removes features (or changes their style) depending on the user's actions.

The thing is that there are some APIs that might be able to do that, but they seem to be outdated (code examples were still working with ol2).

Do you have any suggestions on how to build a simple animation slider with OL3?

EDIT: It doesn't necessarily have to be proper animation. A possibility that came to my mind is changing the style of a layer whenever the slider is moved. Still no clue though on how to realise that.

This image illustrates what I have in mind:

design for desired functionality

EDIT: My current approach is to have a slider, that triggers code everytime it is moved. I somehow try do change the layer style dynamically, but I still haven't gotten a viable result.

Clark answered 24/11, 2014 at 15:35 Comment(2)
Looks like your way to go is with OpenLayers Timeline. Do you have some sample data?Classis
Sure thing. But does timeline work with ol3?Clark
C
4

Ok. I've come up with a solution myself. It's not really a full-fledged animation, but it works for me.

Basically what I do is that I load a wfs-layer to my map. Now, here is the trick: When I do that, I simply sort the time-values of the features one by one and add every feature with the time value of 1 to one layer, every feature with a time value of 2 to another and so and so forth. This basically does the trick. The rest is simple.

Next step is that I implement a slider that ranges from 1 (the lowest time value) to whatever the highest time value is. Everytime the slider is moved it triggers an event that finds out to which time value the slider is set to and then adds/removes the corresponding layers.

So, if the slider is set to 5. It will add every layer from 1 to 5 to the map and remove every other layer. Again, this is not really an animation, but it does work in my case.

If anyone comes up with another possible solution, please post it here. I'd appreciate it.

(Btw, this is what my solution looks like in action:)

enter image description here

EDIT: I can now also confirm that it is possible to build "proper" animations with this approach. I simply built a js-function that includes multiple "setTimeout"s to time when a layer is added and added a play button that triggers this function. This amounts to an animation that visualises the growth from t=1 to tmax.

Clark answered 1/12, 2014 at 15:8 Comment(2)
That's cool. I was going to suggest a D3js solution. So, you are not actually dynamically calling the wfs, just calling it once, and creating layers based on slider interval, essentially?Limb
Exactly. Basically, I create the different layers at the beginning when the map is initialised and then dynamically add and remove them. Currently I'm working on a function that uses time delay to build a proper animation. It's pretty much a play button that goes through the entire thing from beginning to start.Clark

© 2022 - 2024 — McMap. All rights reserved.