Cesium根据时间加载Geojson

最新推荐文章于 2025-06-02 09:36:17 发布

原创最新推荐文章于 2025-06-02 09:36:17 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

Cesium 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用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