cesium轨迹回放,按路径飞行

本人也初学,由于无人写这些demo的理解,因此经过个人研究,写下理解,如有不对的地方还请批评指出。

初学者肯定对于这个轨迹回放如何实现很蒙,进而无法对demo进行修改来适应自己的需求。

此外一个错误,在实例化cesium时,应该启用时间轴

否则会报zoomTo is undefined view.timeline.zoomTo(start,stop);

先讲实现原理:

基于模型的availability 属性和postion属性.

其中availability可以设置时间轴,position中定义了模型的位置和时间信息.

时间轴类似于一个触发器,当在某个时间,模型就移动到某个地方,因为是一个序列,模型不会跳跃,而是会计算一个均速移动过去。

 

模型的实例化包括四部分

第一部分就是关联时间轴,cesium时间是一个儒略时,根据API进行声明即可。

第二部分是位置信息,根据API,进行设置即可。修改此处即可修改路线,修改此信息即可更改模型的速度,飞行方向等。

第三部分就是速度和方向信息,(此部分是由property计算出来的)

第四部分为模型

那么我们的终点就在于这个property是个什么东西了。

查看API可以发现是一个PositionProperty()类

那么这个类是如何构造的呢?,查看demo中的函数,可以发现是声明一个time,和一个position组成。这样就可以理解了,为何模型会在某个时间移动到某个地方。

function computeFlight(source) {
    // 取样位置 相当于一个集合
    let property = new Cesium.SampledPositionProperty();
    for(let i=0; i<source.length; i++){
        let time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
        let position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height);
        // 添加位置,和时间对应
        property.addSample(time, position);
    }
    return property;
}

再来查看飞行路径数据的设置

data[0] = [{longitude:116.405419, dimension:39.918034, height:0, time:0},{longitude:116.2821, dimension:39.918145, height:0, time:40},{longitude:115.497402, dimension:39.344641, height:70000, time:100},{longitude:107.942392, dimension:29.559967, height:70000, time:280}, {longitude:106.549265, dimension:29.559967, height:0, time:360}];
data[1] = [{longitude:116.405419, dimension:39.918034, height:0, time:0},{longitude:117.034586, dimension:39.881202, height:0, time:40},{longitude:116.340088, dimension:38.842224, height:70000, time:100},{longitude:113.489176, dimension:23.464017, height:70000, time:280}, {longitude:113.262084, dimension:23.13901, height:0, time:360}];
data[2] = [{longitude:118.838979, dimension:32.073514, height:0, time:0},{longitude:118.438838, dimension:32.03777, height:0, time:40},{longitude:117.802406, dimension:31.91231, height:70000, time:100},{longitude:104.043645, dimension:35.993845, height:70000, time:280}, {longitude:101.807224, dimension:36.660972, height:0, time:360}];
// 起始时间
let start = Cesium.JulianDate.fromDate(new Date(2017,7,11));
// 结束时间
let stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());

其中start stop分别对应了数组中第一个位置的time属性和最后一个位置的time属性。

因此要改造仅需要修改传入的数据经纬度,time即可,time应当和start end时间对应

完整代码

Cesium.Ion.defaultAccessToken='你的token';
var view = new Cesium.Viewer('cesiumContainer',{
    baseLayerPicker:false,
    timeline:true,
    homeButton:false,
    fullscreenButton:false,
    infoBox:false,
    sceneModePicker:false,
    navigationInstructionsInitiallyVisible:false,
    navigationHelpButton:false,
    shouldAnimate : true
});
view.scene.globe.enableLighting = true;
let data = [];
data[0] = [{longitude:116.405419, dimension:39.918034, height:0, time:0},{longitude:116.2821, dimension:39.918145, height:0, time:40},{longitude:115.497402, dimension:39.344641, height:70000, time:100},{longitude:107.942392, dimension:29.559967, height:70000, time:280}, {longitude:106.549265, dimension:29.559967, height:0, time:360}];
data[1] = [{longitude:116.405419, dimension:39.918034, height:0, time:0},{longitude:117.034586, dimension:39.881202, height:0, time:40},{longitude:116.340088, dimension:38.842224, height:70000, time:100},{longitude:113.489176, dimension:23.464017, height:70000, time:280}, {longitude:113.262084, dimension:23.13901, height:0, time:360}];
data[2] = [{longitude:118.838979, dimension:32.073514, height:0, time:0},{longitude:118.438838, dimension:32.03777, height:0, time:40},{longitude:117.802406, dimension:31.91231, height:70000, time:100},{longitude:104.043645, dimension:35.993845, height:70000, time:280}, {longitude:101.807224, dimension:36.660972, height:0, time:360}];
// 起始时间
let start = Cesium.JulianDate.fromDate(new Date(2017,7,11));
// 结束时间
let stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());

// 设置始时钟始时间
view.clock.startTime = start.clone();
// 设置时钟当前时间
view.clock.currentTime = start.clone();
// 设置始终停止时间
view.clock.stopTime  = stop.clone();
// 时间速率,数字越大时间过的越快
view.clock.multiplier = 10;
// 时间轴
view.timeline.zoomTo(start,stop);
// 循环执行,即为2,到达终止时间,重新从起点时间开始
view.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

// view.camera.flyTo({
//     destination:Cesium.Cartesian3.fromDegrees(116.405419,32.073514,20000)
// })
for(let j=0; j<data.length; j++){
    let property = computeFlight(data[j]);
    //console.log(property)
    // 添加模型
    let planeModel = view.entities.add({
        // 和时间轴关联
        availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
            start : start,
            stop : stop
        })]),
        position: property,
        // 根据所提供的速度计算模型的朝向
        orientation: new Cesium.VelocityOrientationProperty(property),
        // 模型数据
        model: {
            uri: './Apps/SampleData/models/CesiumAir/Cesium_Air.glb',
            minimumPixelSize:128
        }
    });

}


/**
 * 计算飞行
 * @param source 数据坐标
 * @returns {SampledPositionProperty|*}
 */
function computeFlight(source) {
    // 取样位置 相当于一个集合
    let property = new Cesium.SampledPositionProperty();
    for(let i=0; i<source.length; i++){
        let time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
        let position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height);
        // 添加位置,和时间对应
        property.addSample(time, position);
    }
    return property;
}

 

Cesium 是一个用于创建 3D 地球和地图可视化的开源 JavaScript 库,广泛应用于地理空间数据的展示。轨迹展示是 Cesium 中常见的应用场景之一,可以用于飞行路径、车辆轨迹、GPS 数据可视化等。 在 Cesium 中实现轨迹展示,通常涉及以下几个关键步骤: 1. **初始化 Viewer**:创建一个 Cesium Viewer 实例,作为可视化展示的容器。 2. **定义轨迹点数据**:轨迹通常由一组包含经纬度和高度的坐标点构成,可以是静态数据或动态获取的实时数据。 3. **绘制轨迹线**:使用 `viewer.entities` 或 `viewer.scene.primitives` 来绘制折线或样条曲线。 4. **添加轨迹点标记**:可以在轨迹的关键点上添加标记或图标,以增强可视化效果。 5. **设置相机视角**:自动调整相机视角,使轨迹在整个视野中可见。 以下是一个简单的 Cesium 轨迹绘制示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Cesium.js"></script> <link href="https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> </head> <body> <div id="cesiumContainer"></div> <script> // 初始化 Cesium Viewer const viewer = new Cesium.Viewer('cesiumContainer'); // 定义轨迹点数据(经纬度,高度可选) const positions = [ Cesium.Cartesian3.fromDegrees(-115.0, 37.0, 100000), Cesium.Cartesian3.fromDegrees(-115.0, 32.0, 100000), Cesium.Cartesian3.fromDegrees(-110.0, 32.0, 100000), Cesium.Cartesian3.fromDegrees(-105.0, 32.0, 100000), Cesium.Cartesian3.fromDegrees(-100.0, 32.0, 100000), Cesium.Cartesian3.fromDegrees(-95.0, 32.0, 100000), Cesium.Cartesian3.fromDegrees(-90.0, 32.0, 100000), Cesium.Cartesian3.fromDegrees(-85.0, 32.0, 100000) ]; // 绘制轨迹线 viewer.entities.add({ polyline: { positions: positions, width: 5, material: Cesium.Material.RED_LINE_TYPE } }); // 添加轨迹点标记 positions.forEach((pos, index) => { viewer.entities.add({ position: pos, point: { pixelSize: 10, color: Cesium.Color.YELLOW }, label: { text: `Point ${index + 1}`, font: '14px sans-serif', horizontalOrigin: Cesium.HorizontalOrigin.LEFT, verticalOrigin: Cesium.VerticalOrigin.BOTTOM } }); }); // 设置相机视角 viewer.camera.flyTo({ destination: Cesium.Rectangle.fromDegrees(-120, 30, -80, 40) }); </script> </body> </html> ``` 上述代码创建了一个包含轨迹线和标记点的简单示例。轨迹线使用 `polyline` 属性定义,标记点则通过 `point` 和 `label` 进行配置。此外,`flyTo` 方法用于自动调整相机视角,使整个轨迹可见[^1]。 如果需要更复杂的轨迹动画或动态更新功能,可以通过监听时间变化事件并更新轨迹点的位置来实现。Cesium 提供了强大的时间动态数据支持,适合用于实时轨迹追踪和历史轨迹回放等场景。
评论 46
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值