Cesium根据时间加载Geojson

上一篇中讲到一次加载 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

要在Cesium中使用GroundPrimitive加载GeoJSON线数据,可以按照以下步骤进行操作: 1. 准备数据:将GeoJSON线数据准备好,并确保其符合GeoJSON规范。 2. 创建GroundPrimitive:使用Cesium的GroundPrimitive类创建一个实例。GroundPrimitive类可以用于在地面上呈现几何图形,例如线、面等。 3. 加载数据:使用CesiumGeoJsonDataSource类将GeoJSON数据加载到GroundPrimitive中。 4. 显示数据:将GroundPrimitive添加到Cesium的场景中即可显示数据。 以下是一个示例代码,演示如何加载GeoJSON线数据: ```javascript // 准备数据 var geojsonData = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [-74.0059, 40.7128], [-77.0369, 38.9072] ] }, "properties": { "name": "New York to Washington DC" } } ] }; // 创建GroundPrimitive var groundPrimitive = new Cesium.GroundPrimitive({ geometryInstances: [] }); // 加载数据 var dataSource = Cesium.GeoJsonDataSource.load(geojsonData); dataSource.then(function(dataSource) { var entities = dataSource.entities.values; for (var i = 0; i < entities.length; i++) { var entity = entities[i]; var geometryInstance = new Cesium.GeometryInstance({ geometry: new Cesium.PolylineGeometry({ positions: entity.polyline.positions.getValue(), width: 5.0 }) }); groundPrimitive.geometryInstances.push(geometryInstance); } }); // 添加到场景中 viewer.scene.primitives.add(groundPrimitive); ``` 在该示例代码中,我们首先准备了一个包含一条线的GeoJSON数据。然后创建了一个GroundPrimitive实例,并使用GeoJsonDataSource类将数据加载到其中。最后,将GroundPrimitive添加到场景中即可显示数据。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值