百色市网站建设_网站建设公司_前端开发_seo优化

这一节，我们把“飞机”请进 Cesium：从起飞到降落，全程按真实时间点飞行，轨迹自动插值、机头自动对准航线，再配上路径尾迹，一眼就能看到它越洋跨洲的全过程。

一、思路：把“轨迹点”变成“时间位置对”

飞行轨迹其实就是一串带时间戳的经纬度+高度点。
Cesium 的SampledPositionProperty专门吃这种“时间-位置”对，内部自动线性插值，飞机就能平滑飞行，无需我们手动算补间。

二、准备数据：30 秒一步，总时长由点数决定

/* 1. 新建“时间位置对”容器 */ const positionProperty = new Cesium.SampledPositionProperty(); /* 2. 每 30 秒一个点，总时长 = (点数 - 1) × 30 */ const timeStepInSeconds = 30; const durationInSeconds = (flight.length - 1) * timeStepInSeconds; /* 3. 起止时间（JulianDate） */ const time = new Cesium.JulianDate.fromDate(new Date("2023-01-01T00:00:00Z")); const end = Cesium.JulianDate.addSeconds(time, durationInSeconds, new Cesium.JulianDate()); /* 4. 把起止时间钉到场景时钟 */ viewer.clock.startTime = time.clone(); viewer.clock.stopTime = end.clone(); viewer.clock.currentTime = time.clone(); viewer.timeline.zoomTo(time, end); // 底部时间轴对齐

flight是提前准备好的数组，每条记录含lon / lat / alt，30 秒一步，踩点越多航线越丝滑。

三、逐点喂数据：红点标记 + 位置插值

flight.forEach((item, index) => { /* 计算当前点的时间戳 */ const ctime = Cesium.JulianDate.addSeconds(time, index * timeStepInSeconds, new Cesium.JulianDate()); /* 转成 Cartesian3 */ const position = Cesium.Cartesian3.fromDegrees(item.lon, item.lat, item.alt); /* 塞进插值器 */ positionProperty.addSample(ctime, position); /* 顺便画个红点，方便调试轨迹 */ viewer.entities.add({ name: `position ${index}`, position: position, point: { pixelSize: 10, color: Cesium.Color.RED, outlineColor: Cesium.Color.WHITE, outlineWidth: 2, }, }); });

红点即航点，飞机将在它们之间自动插值飞行。

四、创建飞机实体：模型 + 尾迹 + 自动朝向

const fly = viewer.entities.add({ name: "plane", availability: new Cesium.TimeIntervalCollection([ new Cesium.TimeInterval({ start: time, stop: end }) // 只在起止时间内可见 ]), position: positionProperty, // 时间位置对（自动插值） orientation: new Cesium.VelocityOrientationProperty(positionProperty), // 机头自动对准速度方向 model: { preload: true, uri: "./models/ju52.glb", // 自己的 glb 模型 minimumPixelSize: 100, // 最远也不小于 100 px silhouetteColor: Cesium.Color.ORANGE, // 橙色描边 silhouetteSize: 2, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 500000.0), // 50 km 外隐藏 }, path: new Cesium.PathGraphics({ width: 5, // 轨迹线宽 5 px }), }); /* 让相机一直跟拍 */ viewer.trackedEntity = fly;

一句话总结：

• position绑时间，飞机自动飞；

• VelocityOrientationProperty让机头永远冲前；

• PathGraphics自动生成渐变尾迹。

五、运行效果

点击播放键，飞机沿红点连线平滑飞行，转弯时机头实时对准切线，身后拖着 5 px 宽的淡色轨迹，镜头自动跟拍——全过程零数学、零关键帧，全靠 Cesium 插值。

六、可扩展玩法

• 想再快？把timeStepInSeconds改小或clock.multiplier加大；

• 想更炫？给path.material换成发光飞线；

• 想更真实？把高度数组换成真实气压高度，把速度换算成时间间隔。

下节课，我们让飞机“边飞边变色”，再给它加个“落地烟雾”，一条真正的航班演示就杀青了。