Cesium中Clock控件及时间序列瓦片动态加载

前言

前面已经写了两篇博客介绍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就会自动插值成动画,这些我们在后面介绍。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web开发

使用jOrgChart插件实现组织架构图的展示

项目要做组织架构图,要把它做成自上而下的树形结构。 一、说明 (1)通过后台查询数据库,生成树形数组结构,返回到前台。 (2)需要引入的js插件和css文件: ...

404100
来自专栏Core Net

懒人小技巧, Toad 常用偷懒方法

36090
来自专栏大魏分享(微信公众号:david-share)

从PowerVM,KVM到Docker:存储池的配置与调优---第一篇终结(第3子篇)

VIOC 上的 VSCSI 性能调优 在本实验的 VIOC 中,一个磁盘对应 4 条 VSCSI 路径。查看磁盘默认的属性 ; # lsattr -El hdi...

54560
来自专栏FreeBuf

如何在CTF中少走弯路(基础篇)

自己并不是专业的赛棍也没有打过很多比赛,这篇文章是自己在CTF中对于杂项这块知识学习的小结,希望可以对初入CTF的同学有所帮助,在CTF中少走弯路从而更快的提升...

1.7K40
来自专栏程序员叨叨叨

当你刷新RecyclerView程序崩掉的时候

今天测试 APP的时候发现一个有关RecyclerView的BUG,我们先上图来看看崩溃情况:

17020
来自专栏IMWeb前端团队

React函数式进阶

React让很多人让追捧的一个特性是它的所有的组件都是完全由JavaScript组成的。组件的定义是JavaScript,组件的模板也可以是JavaScript...

24960
来自专栏张戈的专栏

移动搜索SEO:网站移动适配之Meta标注、移动跳转终结篇

这些天,在给博客的标签页(tag)添加跳转和 META 动态申明时,居然让我醍醐灌顶,发现之前的动态适配的做法是多么的苦逼和小白! 总结前,先来回顾下小白张戈在...

53860
来自专栏公众号_薛勤的博客

网络爬虫之Url含有中文如何转码

13320
来自专栏微信终端开发团队的专栏

iOS微信特殊字符保护方案

一般来说,特殊字符闪退是系统漏洞引起,只要更新系统就行。但大部分用户不愿意更新系统...

902140
来自专栏DannyHoo的专栏

iOS开发中网络请求三方Alamofire的使用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

23130

扫码关注云+社区

领取腾讯云代金券