使用 Cesium 动态加载 GeoJSON 数据

前言

需求是这样的,我需要在地图中显示 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 对象,一定要保持深度思考的习惯,凡事不能只看到表面,应该多一些深入的思考。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏魏琼东

一步一步教你使用AgileEAS.NET基础类库进行应用开发-WinForm应用篇-演示ORM对象与DataGridView的绑定技术-商品字典的另一个实现

回顾与说明     前面我们把“商品字典”、“商品入库”、“商品库存查询”、“商品入库查询”四个模块已经概括或者详细的演示了一个管理信息系统的典型应用场景,按照...

22450
来自专栏林德熙的博客

win10 uwp 使用油墨输入 保存,修改,加载inkUWP 手写清理笔画手写识别无法识别手写语音

现在很多人还是使用笔和纸来记录,那么可以在电脑输入方式和之前使用的方式一样,很多用户觉得会方便。在win10 我们有一个简单的方法去让用户输入,InkCanva...

29010
来自专栏闰土大叔

在没有DOM操作的日子里,我是怎么熬过来的(中)

前言 继上篇推送之后,在掘金、segmentfault、简书、博客园等平台上迅速收到了不俗的反馈,大部分网友都留言说感同身受,还有不少网友追问中篇何时更新。于是...

358110
来自专栏恰童鞋骚年

ASP.Net WebForm温故知新学习笔记:二、ViewState与UpdatePanel探秘

开篇:经历了上一篇《aspx与服务器控件探秘》后,我们了解了aspx和服务器控件背后的故事。这篇我们开始走进WebForm状态保持的一大法宝—ViewState...

20730
来自专栏小特工作室

DataWindow.Net组件示例(全部开源)

1概述 1.1功能简介 Sybase公司的PowerBuilder开发工具,在以前VS工具没有成事以前,是相当风光的.微软都要与其合作,学习它Db方面的技术,才...

337100
来自专栏Crossin的编程教室

Python 爬虫爬取美剧网站

一直有爱看美剧的习惯,一方面锻炼一下英语听力,一方面打发一下时间。之前是能在视频网站上面在线看的,可是自从广电总局的限制令之后,进口的美剧英剧等貌似就不在像以前...

45970
来自专栏landv

金蝶KIS&K3助记码SQL数据库批量刷新

12130
来自专栏令仔很忙

EasyUI----EasyUI-Tree联想加模糊查询

最近做的项目中用到了EasyUI的Tree,树的结构是这样的,有22个车站,每一个车站相当于一个逻辑域(虚拟域),每一个域下有许多的设备类型,拿我现在做的门禁系...

52040
来自专栏李想的专栏

使用腾讯云无服务器云函数(SCF)分析天气数据

无服务器云函数(SCF)是腾讯云提供的Serverless执行环境,也是国内首款FaaS(Function as a Service,函数即服务) 产品。其核心...

1.1K70
来自专栏iOS技术

YYAsyncLayer 源码剖析:异步绘制

性能优化一直是 iOS 开发中的一个重头戏,其中界面流畅度的优化是至关重要的,因为它直接关系到用户体验。从最熟悉和简单的 UIKit 框架到 CoreAnima...

17730

扫码关注云+社区

领取腾讯云代金券