cesium显示实时航迹

### 使用Cesium进行实时航迹绘制 为了实现实时航迹绘制，在初始化`viewer`对象之后，可以创建一个动态更新的实体集合来表示飞行器或其他移动物体的位置变化。通过周期性地向该集合中添加新位置数据点并设置合适的样式属性（如颜色、宽度），即可形成一条随时间推移而增长的轨迹线。 下面是一个简单的例子，展示了如何利用JavaScript定时器模拟连续的数据输入过程，并将其应用到Cesium环境中： ```javascript // 初始化Viewer实例 const viewer = new Cesium.Viewer('cesiumContainer', { shouldAnimate: true, }); let positions = []; // 存储路径坐标数组 let polyline; // 轨道线条实体引用 function addNewPosition() { const now = Cesium.JulianDate.now(); // 获取当前日期时间戳 // 计算新的经纬度值作为下一个位置点 (这里仅作示意) let lon = Math.random() * 360 - 180; let lat = Math.random() * 170 - 85; // 将最新获取的位置加入列表 positions.push(Cesium.Cartesian3.fromDegrees(lon, lat)); if (!polyline) { // 如果还没有创建过Polyline，则首次构建它 polyline = viewer.entities.add({ name : 'Real-time Path', polyline : { positions : new Cesium.CallbackProperty(() => positions, false), width : 5, material : Cesium.Color.RED.withAlpha(0.7), clampToGround : true } }); // 设置相机跟随模式以便观察整个场景中的运动情况 viewer.trackedEntity = polyline; } else { // 否则直接刷新已有的Polyline以反映最新的positions状态 polyline.polyline.positions.setValue(new Cesium.CallbackProperty(() => positions, false)); } console.log(`Added position at ${lon}, ${lat}`); } // 开始每隔一秒调用一次addNewPosition函数来模拟接收GPS信号的过程 setInterval(addNewPosition, 1000); ``` 此代码片段基于官方文档提供的基础框架[^2]进行了扩展，加入了随机生成地理位置的功能以及使用回调属性动态调整多段线形状的技术细节[^1]。值得注意的是，实际项目里通常会从服务器端拉取真实世界里的定位信息而不是像上面那样简单地制造伪数据；此外还可以考虑采用更复杂的材质定义方式来自定义显示风格，比如让轨迹呈现渐变色彩或是带有动画效果等特性[^3]。

### 如何在 Cesium 中实现航迹飞行动画 #### 航迹飞行的核心概念 Cesium 提供了 `SampledPositionProperty` 和时间轴（Timeline）来支持轨迹回放功能。通过设置实体的位置属性为 `SampledPositionProperty`，可以记录一系列的时间-位置数据点，并利用这些数据点创建动态的运动效果[^1]。 以下是具体实现方法： --- #### 初始化 Cesium Viewer 首先需要初始化一个 Cesium 的 `Viewer` 对象。为了使动画自动播放，可以通过参数 `shouldAnimate: true` 启用内置动画机制[^2]。 ```javascript const viewer = new Cesium.Viewer("cesiumContainer", { shouldAnimate: true, }); ``` --- #### 创建带有 SampledPositionProperty 的实体 使用 `SampledPositionProperty` 来定义物体随时间变化的位置。下面是一个简单的例子，展示如何向实体添加采样位置并启动动画： ```javascript // 定义一个实体用于表示移动对象 let entity = viewer.entities.add({ position: new Cesium.SampledPositionProperty(), model: { uri: "./path/to/model.glb", scale: 0.5, }, path: { show: true, // 显示路径 width: 3, material: new Cesium.PolylineGlowMaterialProperty({ glowPower: 0.8, color: Cesium.Color.YELLOW, }), }, }); // 获取当前时间作为起点 let startTime = Cesium.JulianDate.now(); // 添加多个样本点到 SampledPositionProperty entity.position.addSample(startTime, Cesium.Cartesian3.fromDegrees(-115.0, 37.0, 3000)); entity.position.addSample( Cesium.JulianDate.addSeconds(startTime, 10, new Cesium.JulianDate()), Cesium.Cartesian3.fromDegrees(-114.9, 37.1, 3000) ); entity.position.addSample( Cesium.JulianDate.addSeconds(startTime, 20, new Cesium.JulianDate()), Cesium.Cartesian3.fromDegrees(-114.8, 37.2, 3000) ); // 设置时间范围以便于观察整个轨迹 viewer.clock.startTime = startTime; viewer.clock.stopTime = Cesium.JulianDate.addSeconds(startTime, 20, new Cesium.JulianDate()); viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); ``` 上述代码片段展示了如何构建一条由三个坐标组成的简单轨迹，并将其绑定至模型上。随着时间推移，模型会沿着指定路线移动。 --- #### 配置跟随视角或上帝视角 如果希望相机始终跟踪目标，则可启用跟随模式；反之则保持固定视图以俯瞰全局。 ##### **跟随视角** 让摄像机锁定在活动实体周围旋转： ```javascript viewer.trackedEntity = entity; // 自动追踪该实体 ``` ##### **上帝视角** 禁用默认追踪行为后手动调整镜头高度： ```javascript viewer.camera.flyToBoundingSphere(Cesium.BoundingSphere.fromRectangle3D( Cesium.Rectangle.fromDegrees(-115.0, 36.9, -114.7, 37.3), new Cesium.HeadingPitchRange(0, -Math.PI / 4, 1000000) ), { duration: 0 }); ``` 此操作允许用户从高空鸟瞰整条航线而不受任何干扰[^3]。 --- #### 示例总结 以上介绍了基于 Cesium 平台开发轨迹飞行动画的基础流程——即借助 `SampledPositionProperty` 记录时空序列并通过 Timeline 控制其展现节奏。最终成品不仅能够呈现逼真的三维漫游体验，还具备灵活定制选项满足不同需求场景下的应用扩展可能性。 ---