cesium 实现跟随飞机飞行

今天我们要学习的是cesium飞机飞行轨迹跟踪。接下来我们学习cesium 实现跟随飞机飞行动态插入飞行节点

cesium版本

"cesium": "1.93.0",

动态效果

添加3d建筑

通过Cesium.createOsmBuildings添加3d建筑。Cesium.createOsmBuildings介绍。

let tiles3d = new Cesium.createOsmBuildings();
const osmBuildings = viewer.scene.primitives.add(tiles3d);

添加轨迹

通过Cesium.SampledPositionProperty给飞机添加飞行轨迹，这里使用Cesium.JulianDate对时间进行处理。

// 创建一个 SampledPositionProperty 对象，用于存储飞机的动态位置数据
const positionProperty = new Cesium.SampledPositionProperty();

// 设置每个数据点之间的时间间隔，单位为秒
const timeStepInSeconds = 30;

// 计算整个飞行所需的总时间，单位为秒
const totalSeconds = (planeData.length - 1) * timeStepInSeconds;

// 设置飞行起点的时间
const time = new Date("2023-09-02T23:10:00Z");

// 将飞行起点的时间转换为儒略日期
const startJulianDate = Cesium.JulianDate.fromDate(time);

// 计算并设置飞行终点的儒略日期
const stopJulianDate = Cesium.JulianDate.addSeconds(
    startJulianDate,
    totalSeconds,
    new Cesium.JulianDate()
);

// 调整查看器（viewer）的时间范围以匹配飞行的时间范围
viewer.clock.startTime = startJulianDate.clone();
viewer.clock.stopTime = stopJulianDate.clone();
viewer.clock.currentTime = startJulianDate.clone();

// 调整时间线的视图范围以匹配飞行的时间范围
viewer.timeline.zoomTo(startJulianDate, stopJulianDate);

// 遍历飞机的所有数据点
planeData.forEach((dataPoint, i) => {

    // 计算当前数据点的儒略日期
    const time = Cesium.JulianDate.addSeconds(
        startJulianDate,
        i * timeStepInSeconds,
        new Cesium.JulianDate()
    );

    // 根据当前数据点的经度、纬度和高度计算其笛卡尔坐标
    const position = Cesium.Cartesian3.fromDegrees(
        dataPoint.longitude,
        dataPoint.latitude,
        dataPoint.height
    );

    // 将当前数据点添加到 SampledPositionProperty 对象中
    positionProperty.addSample(time, position);

    // 在查看器（viewer）中添加一个表示当前数据点的红点
    viewer.entities.add({
        position: position,
        point: {
            pixelSize: 10,
            color: Cesium.Color.RED,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 2,
        },
    });
});

添加飞机

添加飞机模型，使用Cesium.VelocityOrientationProperty来实时计算飞机的方向和速度。

// 创建一个新的实体并添加到 viewer 的实体集合中
const planeEntity = viewer.entities.add({
  
  // 设置实体的有效时间范围，只在 startJulianDate 和 stopJulianDate 之间可见
  availability: new Cesium.TimeIntervalCollection([
    new Cesium.TimeInterval({
      start: startJulianDate,
      stop: stopJulianDate,
    }),
  ]),
  
  // 设置实体的名称为“飞机”
  name: "飞机",
  
  // 设置飞机的位置属性，使用先前定义的 positionProperty（通常为 SampledPositionProperty 对象）
  position: positionProperty,
  
  // 使用 VelocityOrientationProperty 自动计算飞机的方向和速度
  // 基于 positionProperty 中定义的位置数据
  orientation: new Cesium.VelocityOrientationProperty(positionProperty),
  
  // 设置飞机的三维模型，模型的资源路径存储在 Air 变量中
  model: {
    uri: Air,
    // minimumPixelSize: 128,  // 设置模型的最小像素尺寸（如果需要的话）
    // maximumScale: 20000,     // 设置模型的最大缩放比例（如果需要的话）
  },
  
  // 绘制飞机移动的轨迹线
  path: new Cesium.PathGraphics({
    width: 5,  // 设置轨迹线的宽度为 5 像素
  }),
  
});

实例演示地址

cesium 实现跟随飞机飞行

当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课课程-cesium 实现跟随飞机飞行-实践的学习笔记

实例代码下载

代码运行环境：vue3 + vite + js nodejs 14