Cesium根据时间加载Geojson

本文介绍如何使用Cesium加载GeoJSON数据并实现按时间动态渲染的功能。通过逐个加载数据及设置显示时间,避免一次性加载所有数据,提升用户体验。具体实现包括设置billboard和point属性,以及利用TimeIntervalCollection精确控制每个实体的可见时间。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

上一篇中讲到一次加载 GeoJSON 中所有数据,若在地图中显示 某一时间段 的实体情况,实体都是发生在具体的时间点的,那么如何实现实体按照时间动态渲染而不是一次全部加载出来。

方法:逐个加载 GeoJSON 中数据,并设置每个对象的显示时间。

//按照时间显示
  Cesium.GeoJsonDataSource.load('./Geojson/test.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;//设置billboard和point来显示一个点而不是图标
            entity.point = new Cesium.PointGraphics({
                color: Cesium.Color.RED,
                pixelSize: 10
            });
            entity.availability = new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                //start: Cesium.JulianDate.fromIso8601('2018-07-01T12:00:00Z'),//entity.properties.STARTDATE 5、6时间点是个四舍五入,识别到天
                //stop: Cesium.JulianDate.fromIso8601('2018-07-01T15:00:00Z'),//addDay(Cesium.JulianDate.fromIso8601('2018-07-25T06:00:00Z'))拖动时间轴可查看历史时间显示的实体
                start:Cesium.JulianDate.fromIso8601(entity.properties.start._value),
                stop: Cesium.JulianDate.fromIso8601(entity.properties.stop._value)
                //start:st,
                //stop:sto
            })]);
        }
  });

geojson文件部分内容如下:

{
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 109,36 ]
    },
    "properties": {
    "ID":"",
    "NAME":"",
    "STARTTIME":"2018-07-21T06:00:00Z",
    "STOPTIME":"2018-07-21T12:00:00Z"
    }
  }

其中viewer对象要设置显示动画,显示时间线控件

记录一下,后续参考

参考:

https://www.cnblogs.com/shoufengwei/p/8883013.html

<think>好的,我需要帮助用户在Cesium中创建DataSource来加载GeoJSON数据。首先,根据用户提供的引用内容,特别是引用[1]和引用[3],GeoJsonDataSource是专门处理GeoJSON格式的类。用户需要具体的示例教程,所以我应该一步步解释如何实现。 首先,用户需要引入Cesium库和GeoJSON文件。在代码中,必须创建Viewer实例,这是Cesium的基础容器。然后,使用GeoJsonDataSource的load方法加载外部GeoJSON文件,这一步需要处理异步操作,所以要用Promise或者async/await。加载完成后,将返回的dataSource添加到viewer.dataSources中,并调整相机视角到数据范围,这可以通过zoomTo方法实现。 另外,用户可能需要了解如何自定义图层的样式,比如修改颜色或图标。引用[2]提到DataSource和Entity的关系,所以可能需要通过entities属性来调整。但根据引用[1],GeoJsonDataSource已经封装了数据加载,可能支持配置选项来自定义样式,这样更简便。 还需要考虑错误处理,比如加载失败的情况,但用户的问题主要是创建和加载,可能暂时不需要深入错误处理。最后,应该提供相关的问题,比如性能优化或数据源管理,帮助用户进一步学习。确保所有步骤符合用户提供的引用内容,并正确使用LaTeX格式,比如变量或代码块。</think>在Cesium中创建DataSource加载GeoJSON数据需要遵循以下步骤: ### 一、基础实现 1. **引入GeoJsonDataSource模块** ```javascript const viewer = new Cesium.Viewer('cesiumContainer'); const dataSourcePromise = Cesium.GeoJsonDataSource.load('data/geojson/sample.geojson'); ``` 2. **异步加载并添加数据源** ```javascript dataSourcePromise.then(dataSource => { viewer.dataSources.add(dataSource); viewer.zoomTo(dataSource); // 自动调整视角 }).catch(error => { console.error('加载GeoJSON失败:', error); }); ``` 此代码实现了GeoJSON数据源的加载与可视化[^3] ### 二、高级配置 使用$options$参数自定义样式: ```javascript const options = { stroke: Cesium.Color.RED, fill: Cesium.Color.BLUE.withAlpha(0.5), markerSymbol: '?' }; Cesium.GeoJsonDataSource.load(url, options).then(/* ... */); ``` 支持配置线型($strokeWidth$)、填充透明度($fillOpacity$)、标注图标等20+样式属性[^1] ### 三、数据源管理 1. **数据源引用获取** ```javascript const dataSourceCollection = viewer.dataSources; const defaultEntities = viewer.entities; // 对应默认数据源的实体集合[^2] ``` 2. **动态移除操作** ```javascript const removeDataSource = () => { viewer.dataSources.remove(dataSource); // 或移除全部:viewer.dataSources.removeAll() } ```
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值