OpenLayers3中的功能动画

时间:2014-11-24 15:35:42

标签: javascript jquery animation geojson openlayers-3

我很想知道在OpenLayers3中动画功能的可能性。

我非常了解这里提供的示例 http://openlayers.org/en/v3.0.0/examples/animation.html在这里 https://gis.stackexchange.com/questions/26546/openlayers-animation-examples-and-algorithms

但是,OL3的官方示例并不能满足我的需求。

让我们假设我有一个图层(例如geojson),它有一个" time"列有很多很多时间值。

我希望实现类似滑块的功能,根据用户的操作添加/删除功能(或更改其样式)。

问题是有一些API可能能够做到这一点,但它们似乎已经过时了(代码示例仍在使用ol2)。

您对如何使用OL3构建简单的动画滑块有任何建议吗?

编辑:它不一定是正确的动画。我想到的一种可能性是每当移动滑块时都会改变图层的样式。仍然没有关于如何实现这一点的线索。

此图片说明了我的想法:

design for desired functionality

编辑:我目前的方法是有一个滑块,每次移动时都会触发代码。我试图动态地改变图层样式,但我仍然没有获得可行的结果。

1 个答案:

答案 0 :(得分:4)

确定。我自己想出了一个解决方案。它不是一个完整的动画,但它对我有用。

基本上我所做的是将wfs-layer加载到我的地图上。 现在,这是诀窍: 当我这样做时,我只是逐个对特征的时间值进行排序,并将每个特征添加到1到1层的时间值,每个特征的时间值为2到另一个,依此类推。 这基本上可以解决问题。其余的很简单。

下一步是我实现一个滑块,范围从1(最低时间值)到最高时间值。每次移动滑块时,它都会触发一个事件,该事件可以找出滑块设置的时间值,然后添加/删除相应的图层。

因此,如果滑块设置为5.它会将每个图层从1到5添加到地图中,并删除其他所有图层。同样,这不是一个真正的动画,但它确实适用于我的情况。

如果有人提出另一种可能的解决方案,请在此处发布。我很感激。

(顺便说一句,这就是我的解决方案在行动中的样子:)

enter image description here

编辑:我现在还可以确认有可能构建"正确的"这种方法的动画。我只是构建了一个js-function,它包含多个" setTimeout" s到添加图层的时间,并添加了一个触发此功能的播放按钮。这相当于一个动画,可以显示从t = 1到tmax的增长。