前言

需求是这样的，我需要在地图中显示 08 年到现在的地震情况，地震都是发生在具体的时间点的，那么问题就来了，如何实现地震情况按照时间动态渲染而不是一次全部加载出来。

一、 方案分析

这里面牵扯到两个问题：第一个是如何加载 GeoJSON 格式的数据，其实也就是矢量数据，因为矢量数据之间是可以任意转换的；第二个是如何让加载的数据根据自身的时间显示。

所以就有两种解决问题的思路了：第一种，一次加载 GeoJSON 中所有数据，然后逐个设置显示时间；第二种，逐个加载 GeoJSON 中数据，并设置每个对象的显示时间。

下面我们就一步步来实现解决方案。

二、 解决方案

先来看一下整体效果：

2.1 加载 GeoJSON 数据

在Cesium基础使用介绍一文中已经介绍了如何加载多种格式矢量数据，加载 GeoJSON 数据已经写出了两种方式，第一种是整体读取的，明显无法满足我们的需求，那么就只能寻求第二种方式了：

Cesium.GeoJsonDataSource.load('data/earthquake.geojson').then(function(dataSource) {

viewer.dataSources.add(dataSource);

var entities = dataSource.entities.values;

for (var i = 0; i < entities.length; i++) {

var entity = entities[i];

entity.billboard = undefined;

entity.point = new Cesium.PointGraphics({

color: Cesium.Color.RED,

pixelSize: 10

});

}

});

这里需要注意一个细节，地震数据为点状数据，需要先设置 entity.billboard = undefined，而后再设置 entity.point 来显示点状元素，否则会显示一个图标而不是点。

这样看上去是逐一添加了点状元素，但是我们的问题并没有解决，所有地震点还是全部显示出来了，并没有按照时间显示。

2.2 空间对象按照时间显示

查阅了很多资料，发现可以通过设置对象的 availability 属性来控制对象的显示时间，这正是我需要的，于是修改如下：

Cesium.GeoJsonDataSource.load('data/earthquake.geojson').then(function(dataSource) {

viewer.dataSources.add(dataSource);

var entities = dataSource.entities.values;

for (var i = 0; i < entities.length; i++) {

var entity = entities[i];

entity.billboard = undefined;

entity.point = new Cesium.PointGraphics({

color: Cesium.Color.RED,

pixelSize: 10

});

entity.availability = new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({

start: Cesium.JulianDate.fromIso8601(entity.properties.date),

stop: addDay(Cesium.JulianDate.fromIso8601(entity.properties.date))

})]);

}

});

});

可以看到只是多加了 entity.availability = ... 一项，这样就能够按照时间显示，主要是其中的 start 和 stop 属性，控制显示的时间范围。date 是 GeoJSON 中数据的一个字段，格式为 '2008-01-01'，当然你也可以使用其他格式，在此处进行自定义处理即可，addDay 用于控制显示一天，此处不用多考虑。

2.3 GeoJSON 的另外一种读取方式

写到这里问题已经解决了，但是这里再说一个小插曲。刚开始的时候我将 availability 属性直接写到了 point 里，无法得到结果，于是怀疑是此方法走不通，又思考和搜索了片刻，找到了另一种读取 GeoJSON 的方法，如下：

Cesium.loadJson('data/boundary/earthquake.geojson').then(function(jsonData) {

for (var i =0 ;i<=jsonData.features.length; i++) {

var ifeature = jsonData.features[i];

viewer.entities.add({

position: Cesium.Cartesian3.fromDegrees(ifeature.geometry.coordinates[0], ifeature.geometry.coordinates[1]),

availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({

start: Cesium.JulianDate.fromIso8601(ifeature.properties.date),

stop: addDay(Cesium.JulianDate.fromIso8601(ifeature.properties.date))

})]),

point: {

pixelSize: 10,

color: Cesium.Color.RED

}

});

}

});

这同样能达到效果，这就是刚开始讨论时描述的逐个读取数据，这与前一种方式不同的是此处读取到的是逐个的 feature 对象(前一种直接读取 entity 对象)，根据 feature 生成 entity 对象，再使用 viewer.entities.add 将对象添加到场景中，每个对象单独根据时间设置 availability 属性，这样同样达到了效果。

当此种方式达到效果的时候，再回头来看第一种方式豁然开朗，读取到的 entity 就是一个真实的 entity 对象，于是将 availability 从 point 中移出到外面便达到了效果。

2.4 问题分析

两种方式都能达到效果，而我在刚开始的时候对细节、对 cesium 的各个对象并没有理解的那么透彻，只是看到了表面现象，当研究的稍微深入的时候对整个 cesium 框架也就有了更多的理解，于是条条道路通罗马。

三、 总结

本文简单介绍了如何动态的根据时间加载 GeoJSON 对象，一定要保持深度思考的习惯，凡事不能只看到表面，应该多一些深入的思考。

geotrellis使用(二十三)动态加载时间序列数据

目录 前言 实现方法 总结 一.前言        今天要介绍的绝对是华丽的干货.比如我们从互联网上下载到了一系列(每天或者月平均等)的MODIS数据,我们怎么能够对比同一区域不同时间的数据情况,采用 ...

Echarts使用及动态加载图表数据

Echarts使用及动态加载图表数据 官网:http://echarts.baidu.com/ 1.文档 2.实例 名词: 1.统计维度(说明数据) 维度就是统计致力于建立一个基于多方位统计(时间.地 ...

Echarts动态加载后台数据

注意:1.用Ajax请求获取后台数据 2.Echarts只能处理Json数据 后台Controller:根据业务需求不同而返回不同数据,我前台要循环遍历Echarts的series进行数据添加,所以后 ...

python获取动态网站上面的动态加载的数据(初级)

我们在处理一些网站数据的时候,有时候我们需要的数据很多都是动态加载的,而不都是静态的,以下以一个实例来介绍简单的获取动态数据,首先申明本人小白,还在学习python中,这个方法还是比较笨拙的,但是对于 ...

Echarts使用及动态加载图表数据 折线图X轴数据动态加载

Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯JavaScript的图表库,来自百度...我想应该够简洁了 使用Echarts 目前,就官网的文 ...

AJAX 动态加载后台数据 绑定select

js:(使用jquery) $(document ...

dhtmlxtree动态加载节点数据的小随笔

最近做了一个这个东西,颇有些感触,随笔记录一下自己的过程. 首先特别感谢:https://blog.csdn.net/cfl20121314/article/details/46852591,对我的帮 ...

EasyUI datagrid动态加载json数据

最近做一个项目,要求是两张张表可能查找出10多种不同的结果集. 如果想只用一个表格就把全部的结果不同的显示出来那么就肯定不同使用固定的字段名字,要通过动态加载后台返回来的数据把它显示出来就必须动态加载 ...

viewPager动态加载listview数据

废话不多说,先上效果图.(代码见附件) 代码是修改自某大神的,我做了很多修改,之前只能向右滑动,现在可以左右无限滑动,只要数据没加载完就可以一直滑动.过程不算复杂,代码主要的地方都有注释. 附件dem ...

随机推荐

使用OpenSSL为支付宝生成RSA私钥

通过openssl工具生成RSA的公钥和私钥(opnssl工具可在互联网中下载到,也可以点此下载无线接口包,里面包含此工具)打开openssl文件夹下的bin文件夹,执行openssl.exe文件: ...

C语言求x的y次方，自定义函数，自己的算法

我是一名高二中学生,初中时接触电脑,非常酷爱电脑技术,自己百度学习了有两年多了,编程语言也零零散散的学习了一点,想在大学学习计算机专业,所以现在准备系统的学习C语言,并在博客中与大家分享我学习中的心得 ...

dom处理配置文件&lowbar;待完善

import java.io.File;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java ...

Redis实现高并发分布式序列号

使用Redis实现高并发分布式序列号生成服务 序列号的构成 为建立良好的数据治理方案,作数据掌握.分析.统计.商业智能等用途,业务数据的编码制定通常都会遵循一定的规则,一般来讲,都会有自己的编码规则和 ...

Python之MRO及其C3算法

[, , ] (

DialogFragment的应用

一.DialogFragment简单介绍: 1.基本概念 DialogFrament 指一个与fragment建立了关联的Dialog, 随fragment生, 随fragment死, 即Dialog ...

图解 sql 事务隔离级别

sql 事务隔离级别有四种分种为: 一 Read Uncpommitted(未提交读) 二 Read Committed(提交读) 三 Repeated Read(可重复读) 四 Serializab ...

Netty、t-io、Voovan 框架比较

以下是对三个框架在设计或者说是编码特点中选取的几个我比较关注的点的对比图: 首先我们对几个关键的概念进行一些解析,方便大家更好的理解上面表中的概念: NIO.AIO 的区别? 在这里我们来看一下两者最 ...

Vue 制作简易计算器

...

Eureka的优势

http://www.cnblogs.com/zgghb/p/6515062.html Eureka的优势 1.在Eureka平台中,如果某台服务器宕机,Eureka不会有类似于ZooKeeper的选 ...