Openlayers动画示例和算法


57

我想知道很长一段时间,这个社区中的人们是否使用openlayers来满足动画需求。我们知道,在浏览器上进行动画处理会使它有些疲惫,但是当地图与动画相遇时,我相信好东西将会淘汰。

您知道一些与openlayers兼容的优秀网站或动画算法吗?

这些是我对动画的了解,一些代码和示例。请与需要这些知识的人分享有关openlayers的动画知识。

用于在地图上添加具有时间延迟的功能的基本JavaScript代码。

 time = 0;
    for (var i = 0; i < 5; i++) {
        time += 1000;
        setTimeout(function(j) {
            return function() {
                console.log("var is now", j);
            }
        }(i), time);
    }

i2maps

是一个地理计算环境。它为时空数据和面向Web的可视化知识发现提供了灵活的编程框架。Javascript库用于构建交互式用户界面,并建立在OpenLayers之上。

i2map

OpenLayers时间轴

是一个使用OpenLayers创建与时间相关的地图的简单库。它支持群集策略(OpenLayers.Strategy.Cluster)和时间过滤。当前,它支持GeoJSON或GeoRSS格式的源数据。

时光

Timemap.js

是一个Javascript库,可帮助通过SIMILE时间轴使用在线地图,包括Google,OpenLayers和Bing。该库允许您将JSON,KML或GeoRSS中的一个或多个数据集同时加载到地图和时间轴上。默认情况下,地图上仅显示时间轴可见范围内的项目。

时间表

自行车共享地图

提供商的网站每2-20分钟会自动更新一次数据。自行车使用是同时使用,包括自行车的重新分配。全天的实际总使用量可能更高。分配不平衡-为了使所有机架的满百分比相同,需要转移到其他机架的周期数。较高的数字表示分布更不平衡,例如,中心多辆自行车,边缘很少。本网站可能会中断。

数据:提供商的网站。地图数据:OpenStreetMap贡献者,包括OS Open Data。托管:UCL。由Mapnik和OpenLayers提供支持。

共享单车

RaphaëlJS和OpenLayers集成。

RaphaëlJS是一个小型JavaScript库,可以简化网络上矢量图形的工作。例如,如果要创建自己的特定图表或图像裁剪并旋转窗口小部件,则可以使用此库轻松轻松地实现它。

拉斐尔

OpenLayers过滤策略

本示例使用过滤器策略来限制传递到图层的要素。绑定到该图层的要素具有带有日期值的when属性。筛选器策略是使用中间筛选器构建的,该筛选器限制了显示日期的跨度。一个简单的动画循环遍历when值的域,并使用更新的过滤器对策略调用setFilter。

过滤


1
RaphaëlJS和的OpenLayers @Aragon环断
蜜熊

Answers:


6

GeoNode是一个结合了各种开源项目(Django,GeoExt,OpenLayers,GeoWebCache,GeoServer,GeoNetwork)的平台,用于管理和发布地理空间数据。

例如,Mapstory使用的具有历史意义的动画地图基础设施:

在此处输入图片说明



0

阿拉贡(Aragon)您所举的例子确实很棒。

我已经为某些动画使用了OpenLayers,但是主要的问题是没有“标准方法”来执行此操作,因为没有使用功能对时间建模的标准方法。

对于栅格数据,很容易为每个具体时间创建一个图层,并管理在每个动画步骤中必须可见的图层。

对于矢量数据,事情不仅要复杂得多,不仅要如何对特征,数据和时间建模,还要如何对其进行可视化。根据数据类型,您可能需要大量的效果和动画。

干杯。


2
嗯,这是答案吗?听起来更像是一条评论。如果您发布了“简单”和“复杂”的示例,它可能会成为答案。
Tony gil 2013年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.