Feature Animation in OpenLayers3

I was interested to learn about the animation features in OpenLayers3.

I know very well 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 do not quite meet my needs.

Suppose I have a layer (like geojson) that has a “time” column with a lot of time values.

I would like to implement something like a slider that adds / removes functions (or changes their style) depending on user actions.

The thing is, there are some APIs that can do this, but they seem to be deprecated (the code examples still work with ol2).

Do you have any suggestions for creating a simple animation slider with OL3?

EDITOR: This does not have to be the correct animation. The opportunity that came to my mind is to change the style of the layer when moving the slider. I still don’t know how to understand this.

This image illustrates what I mean:

design for desired functionality

EDIT: my current approach is to have a slider that runs the code every time it moves. I somehow try to dynamically change the style of the layer, but I still have not received a viable result.

+7
javascript jquery animation geojson openlayers-3
source share
1 answer

Ok I myself came up with a solution. This is not a complete animation, but it works for me.

Basically what I do, I load the wfs layer on my map. Now here's the trick: When I do this, I just sort the time values ​​of the functions one by one and add each function with a time value from 1 to one level, and each function has a time value from 2 to another and so on. This basically does the trick. The rest is simple.

The next step is that I implement a slider that ranges from 1 (the lowest time value) to any highest time value. Each time the engine moves, it fires an event that determines what 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 each layer from 1 to 5 to the map and delete all other layers. Again, this is not an animation, but it works in my case.

If someone comes up with another possible solution, post it here. I would appreciate.

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

enter image description here

EDIT: Now I can also confirm that with this approach you can create the “right” animations. I just built a js function that includes a few "setTimeout" until the time the layer is added, and a play button is added that launches this function. This means an animation that visualizes growth from t = 1 to tmax.

+4
source share

All Articles