前言

前面已经写了两篇博客介绍Cesium,一篇整体上简单介绍了Cesium如何上手,还有一篇介绍了如何将Cesium与分布式地理信息处理框架Geotrellis相结合。Cesium的强大之处也在于其可以将时间运用到3维地球上,可以根据此时间进行动画、轨迹记录、地球的光照等等所有与时间相关的可视化效果。本文介绍Cesium中的Clock控件以及如何动态加载时间序列瓦片。

一、 Clock控件

1.1 控件显示和隐藏

这里说的Clock控件包含两部分,Animation控件和Timeline控件,这二者基本是同时出现或隐藏的。如下图所示:

在Cesium中Viewer默认开启这两个控件,如果你想要不显示这两个控件,可以在Viewer初始化中设置其为false,代码如下:

var viewer = new Cesium.Viewer('cesiumContainer', {
animation:false,
timeline:false
});

但这种方式只能在初始化时设置,无法动态的切换显示状态,灵活度上稍显不足。如下方式可以动态控制显示和隐藏,会动态调整布局。

viewer.animation.container.style.visibility = 'visible';
viewer.animation.container.style.visibility = 'hidden';
viewer.timeline.container.style.visibility = 'visible';
viewer.timeline.container.style.visibility = 'hidden';

1.2 设置Clock范围

Clock中默认开始时间(startTime)为当前时间,终止时间(stopTime)为24小时后,并能获取当前时间(currentTime)。当然我们也可以通过如下代码手动设置时间轴上的时间范围:

var start = Cesium.JulianDate.fromIso8601('2015-07-30');
var end = Cesium.JulianDate.fromIso8601('2017-06-17'); viewer.timeline.zoomTo(start, end); var clock = viewer.clock;
clock.startTime = start;
clock.endTime = end;
clock.currentTime = start;
clock.clockRange = Cesium.ClockRange.LOOP_STOP;
clock.multiplier = 86400;

其中start和end分别代表起始和结束时间。multiplier表示时间轴进行速度,就是说此值表示真实世界时间进度与Cesium中的关系,值越大时间轴就走的越快,86400表示真实世界走过1s在Cesium中刻度走过1天,怎么有点南柯一梦的感觉。clockRange属性表示时间轴达到终点之后的行为,用户可以根据自己的需要来设置,默认为: UNBOUNDED

  • CLAMPED:达到终止时间后停止
  • LOOP_STOP:达到终止时间后重新循环
  • UNBOUNDED:达到终止时间后继续读秒

二、 动态加载时间序列瓦片

2.1 时间序列瓦片

所谓时间序列瓦片是指存在多套瓦片,每套瓦片不是单独的,与时间有关。比如我们每天拍摄一遍地球影像,然后把每天的影像都做成一套瓦片,那么一年下来就会有365套瓦片,采用传统方案我们只能写365个页面每个页面加载一天的瓦片。这样非常麻烦,并且没有一个动态变化的效果也无法进行对比。我前面介绍过如何使用Geotrellis生成时间序列瓦片(见geotrellis使用(二十三)动态加载时间序列数据),当然也不一定非要使用此种方式,简单的方式也可以是直接生成多套瓦片,每套瓦片的请求方式与其时间对应即可。

2.2 Cesium动态加载时间序列瓦片

在前面已经介绍了如何使用Cesium加载我们自己的瓦片,大致如下:

var imageryLayers = viewer.imageryLayers;
imageryLayers.addImageryProvider(provider);

其中provider为我们自己创建的图层对象,时间序列瓦片与普通瓦片的区别正在此处。其创建时需要多指定与时间有关的参数。如下:

var provider = new Cesium.WebMapTileServiceImageryProvider({
url : 'https://gibs.earthdata.nasa.gov/wmts/epsg4326/{best}/{Layer}/{Style}/{Time}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png',
layer : 'AMSR2_Snow_Water_Equivalent',
style : 'default',
tileMatrixSetID : '2km',
maximumLevel : 5,
format : 'image/png',
clock: viewer.clock,
times: times,
credit : new Cesium.Credit({text: 'NASA Global Imagery Browse Services for EOSDIS'}),
dimensions: {
Layer : 'AMSR2_Snow_Water_Equivalent',
best: 'best'
}
});

style参数会替换掉url中的{Style}字符串;tileMatrixSetID会替换掉{TileMatrixSet}字符串;{TileMatrix}/{TileRow}/{TileCol}表示z、x、y,无需手动设置;clock表示所使用的时钟,直接设置为系统时钟;cedit表示版权信息;dimensions里面的参数只要出现在url中全部会被其value替换掉。

重点就是其中的times,需要传入一个TimeIntervalCollection对象。其创建方式如下:

var times = Cesium.TimeIntervalCollection.fromIso8601({
iso8601: '2015-07-30/2017-06-16/P20D',
leadingInterval: true,
trailingInterval: true,
isStopIncluded: false,
dataCallback: dataCallback
});

iso8601参数为时间范围及间隔,用'/'分割,第一个表示开始时间,第二个表示结束时间,P20D表示间隔20天,还可以是P1M、P1Y、P1Y3M5DT6H7M30S等,代表不同的时间间隔。

dataCallback表示在每个时间段内如何取值,比如时间间隔为20天,那么我们可以取第一天为请求瓦片的时间,也可以是最后一天,乃至范围内甚至是范围外的任意一天,这个就由dataCallback函数进行设置。示例如下:

function dataCallback(interval, index) {
console.log(index);
var time;
if (index === 0) {
time = Cesium.JulianDate.toIso8601(interval.stop);
} else {
time = Cesium.JulianDate.toIso8601(interval.start);
} return {
Time: time
};
}

interval表示传入的时间区间,index表示是第几个区间,这两个参数也就分割了times中的完整时间段,所以我们可以给time赋值为任意想要设置的值。最后返回的是key、value形式,此处Time为key,而其必须与创建图层时候的{Time}字符串一致,否则请求的时候无法替换时间信息。

三、 总结

本文简单介绍了Clock控件以及如何动态加载时间序列瓦片。合理运用Cesium中的Clock控件能够做出很多漂亮的可视化效果,甚至如同Flash一样只需要指定几个时间点对象的位置,Cesium就会自动插值成动画,这些我们在后面介绍。

最后希望大家能在2017年度全网原创IT博主评选活动投票:http://www.itbang.me/goVote/215投上宝贵的一票(最勤奋博主:wsf),谢谢!

Cesium中Clock控件及时间序列瓦片动态加载的更多相关文章

  1. WPF中TreeView控件数据绑定和后台动态添加数据(二)

    写在前面:在(一)中,介绍了TreeView控件MVVM模式下数据绑定的方法.在这篇文章中,将总结给节点添加事件的方法,这样说有些不对,总之实现的效果就是点击某个节点,将出现对应于该节点的页面或者数据 ...

  2. WPF中TreeView控件数据绑定和后台动态添加数据(一)

    数据绑定: 更新内容:补充在MVVM模式上的TreeView控件数据绑定的代码. xaml代码: <TreeView Name="syntaxTree" ItemsSourc ...

  3. Swift微博项目--Swift中通过类名字符串创建类以及动态加载控制器的实现

    Swift中用类名字符串创建类(用到了命名空间) OC中可以直接通过类名的字符串转换成对应的类来操作,但是Swift中必须用到命名空间,也就是说Swift中通过字符串获取类的方式为NSClassFro ...

  4. WebForm中搭配母版页和用户控件页时候的事件加载顺序

    在生产环境中,一个内容页(aspx)可能会包含数个用户控件(ascx),而每个控件可能都会涉及到数据库访问. 如果在内容页.母版页.控件页中各自使用自己的数据库访问方法,会造成很大的运行成本. 这样的 ...

  5. C#中,用户控件UserControl里面用Panl加载UserControl,并实现利用委托互相传值

    用户控件主窗体结构:左侧树形菜单,右侧Panl: 根据点击的菜单节点,panl里面选择性加载某一个子窗体用户控件,并传值给子窗体: 反之,在子窗体进行相应的操作之后,传值给主窗体,触发主窗体的刷新. ...

  6. gePlugin封装成winform控件,一行代码即可加载。

    将插件直接封装为控件,大大简化了GEPlugin的使用.多数常用功能也已经封装完毕,其他功能全部开放接口,直接调用即可. 1. GepluginControl控件传送门: 链接:https://pan ...

  7. XE7 & FMX 那些年我们一起上过的控件:ListView 之 (3) 加载数据时如何显示自定义样式

    本文介绍一下ListView下如何加载数据.及使用进度条反馈当前进度给用户. 注意: 原创作品,请尊重作者劳动成果,转载请注明出处!!!原文永久固定地址:http://www.cnblogs.com/ ...

  8. 在ASP.NET中动态加载内容(用户控件和模板)

    在ASP.NET中动态加载内容(用户控件和模板) 要点: 1. 使用Page.ParseControl 2. 使用base.LoadControl 第一部分:加载模板 下 面是一个模板“<tab ...

  9. Prism框架中加载类库中时其中第三方类dll提示无法加载程序集

    Prism框架是采用一种依赖注入的方式动态加载程序集,能够在程序需要加载的时候将程序集注入到里面去,实现程序的热插拔效果,而且采用这种框架能够让我们进行一个大项目的独立开发,在最近的一个项目中在独立开 ...

随机推荐

  1. C#设计模式之十一外观模式(Facade)【结构型】

    一.引言 快12点半了,要开始今天的写作了.很快,转眼设计模式已经写了十个了,今天我们要讲[结构型]设计模式的第五个模式,该模式是[外观模式],英文名称是:Facade Pattern.我们先从名字上 ...

  2. Appium python自动化测试系列之混合app实战(十一)

    12.1 什么是混合App 12.1.1 混合app定义 什么是混合app,其实这个不言而喻,我们的app正常来说应该都是native的,但是实际工作中却不是,反正种种原因我们的app会有native ...

  3. git常用命令集合

    git命令 git init:创建一个仓库并在目录下新建一个.git的文件(初始化一个git仓库) 注:.git文件在工作区,是一个隐藏文件(用ls -ah命令查看),但是它不算工作区,而是git 的 ...

  4. vue2.0实现在table中实现全选和反选

    其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...

  5. 编译安装PHP 时遇到问题解决方法.

    编译安装PHP时出现下面的错误代码: error 2 checking for pkg-config... /usr/bin/pkg-config configure: error: Cannot f ...

  6. 分酒问题(DFS解法)

    题目大概是这样: 已知有三个容量分别为3千克.5千克和8千克的并且是没有刻度的酒瓶,3千克和5千克的瓶子均装满了酒,而8千克的瓶子为空.现要求仅用这三个酒瓶将这些酒均分为两个4千克并分别装入5千克和8 ...

  7. Centos7.4下用Docker-Compose部署WordPress(续)-服务器端用Nginx作为反向代理并添加SSL证书(阿里云免费DV证书)

    前言 在我写完Centos7.4下用Docker-Compose部署WordPress这篇文章后,我的个人博客已经正式的开始运作.但考虑到网站访问的安全性以及今后可能会重复利用服务器来部署其他网站的可 ...

  8. Oracle-2 - :超级适合初学者的入门级笔记--定义更改约束,视图,序列,索引,同义词

    接着我上一篇的写,在这感觉到哇 内容好多啊   上一篇,纯手打滴,希望给个赞! 添加约束的语法: 使用 alter table 添加或删除约束,但是不能修改约束 有效化或无效化约束 添加not nul ...

  9. [eclipse相关] eclipse 安装svn插件

    最近看到别人带主题的eclipse,非常羡慕,所以也换了一个eclipse,版本是java ee luna 4.4.2,然后得偿所愿有了花花绿绿的代码界面:) 但是差点被svn搞死,~~~~(> ...

  10. jquery的img的动态title换行

    因业务需要,需要在图片悬浮的时候显示动态加载的title,如果图片的title为固定的可以使用以下方式换行: <img src="1.jpg" title="第一行 ...