【Cesium学习（十一）】Cesium实现让3D模型飞机沿着指定航线飞行demo

最新推荐文章于 2025-09-15 16:44:47 发布

原创

最新推荐文章于 2025-09-15 16:44:47 发布 · 2k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #3d #材质 #webgl #数据可视化 #前端

前言

经过这么久的学习，对Cesium应该有了更深一步的认识，针对前面的学习，现在我们来实现一个小demo，实现让3D模型飞机沿着指定路线飞行。

技术方案

首先初始化地图，然后导入3D飞机模型，确定两点之间的航线，再让飞机沿着航线动起来。这里的动画我们可以采用Cesium用于跟踪模拟时间的简单时钟和时间线来实现，下面就具体还实现一下。

实现demo

一、初始化

首先初始化地图，并配置有关时间Clock 的参数，如：开始时间，结束时间，当前时间，时间线等相关配置。具体可看官网API解释：API传送门
在这里插入图片描述
代码：

this.startTime = Cesium.JulianDate.fromDate(new Date('2025-02-18 16:00:00'));
this.stopTime = Cesium.JulianDate.addSeconds(this.startTime, 360, new Cesium.JulianDate());
this.cesiumViewer = new Cesium.Viewer('cesiumContainer', {
   
   
    infoBox: false,
    baseLayerPicjer: false,
    // 设置地形实体化
    terrainProvider: new Cesium.CesiumTerrainProvider({
   
   
        url: Cesium.IonResource.fromAssetId(3957),
    }),
});
// 设置时间轴基本信息
this.cesiumViewer.clock.startTime = this.startTime.clone(); // 设置开始时间
this.cesiumViewer.clock.currentTime = this.startTime.clone(); // 设置当前时间
this.cesiumViewer.clock.stopTime = this.stopTime.clone(); // 设置结束时间
this.cesiumViewer.clock.multiplier = 5; // 设置播放速度
this.cesiumViewer.timeline.zoomTo(this.startTime, this.stopTime); // 设置时间轴范围
this.cesiumViewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 循环播放
// 初始化视角（飞行模式）
this.cesiumViewer.camera.flyTo(this.homeView);

页面就会有我们设置的时间线轴
在这里插入图片描述

二、航线

1、计算航线

首先要确定两个点位之间的坐标，然后再进行计算航线时间点，如：从A点到B点，就需要计算出两个坐标之间每个时间点对应的坐标。其中会用到几个API或者属性：
1、SampledPositionProperty：是用于表示随时间变化的地理位置的类。它通常用于表示动态的、随时间变化的地理位置，例如飞机、汽车或船只的位置。API传送门
2、JulianDate： CesiumJS 库中的一个类，用于表示日期和时间，其中addSeconds方法是添加指定的秒数。API传送门

代码：

computeFly() {
   
   
    const property = new Cesium.SampledPositionProperty(); // 定义位置属性
    // 起点
    const startPoint = [119.966746, 30.270928];
    // 终点
    const endPoint = [120.220684, 30.26294];
    this.height = 1000;
    const length = 100;
    const lonAvg = (endPoint[0] - startPoint[0]) / length; // 经度差值
    const latAvg =