Cesium 追踪飞机跨洋飞行

示例代码

<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from "cesium";
import { onMounted } from "vue";
import planeData from "@/assets/json/plane.json";

onMounted(async () => {
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 隐藏 logo
    creditContainer: document.createElement('div'),
    // 隐藏右上角的帮助按钮
    navigationHelpButton: false,
    // 去除第一次加载后控制台报错
    infoBox: false,
    // 右上角搜索框
    geocoder: false,
    // 底部时间线
    // timeline: false,
    // 左下角动画控件
    // animation: false,
    // 右上角主页按钮
    homeButton: false,
    // 右上角显示模式
    sceneModePicker: false,
    // 右上角投影切换按钮
    baseLayerPicker: false,
    // 加载后就运动
    shouldAnimate: true,
    // 添加地形
    terrainProvider: await Cesium.createWorldTerrainAsync({
      // 水面波浪效果
      requestWaterMask: true,
      // 光照阴影效果
      requestVertexNormals: true
    }),
  });

  // 添加3D建筑 OSM自带建筑数据
  const tileset = await Cesium.createOsmBuildingsAsync();
  viewer.scene.primitives.add(tileset)

  console.log(planeData)

  // 时间间隔 30秒
  const timeStepInSeconds = 30;

  // 整个飞行花费的时间
  const totalSeconds = (planeData.length - 1) * timeStepInSeconds;

  // 设置起点时间
  const time = new Date("2022-03-09T23:10:00Z");

  // cesium，默认使用的是儒略日的时间
  // https://zh.wikipedia.org/wiki/%E5%84%92%E7%95%A5%E6%97%A5
  // 所以需要起点时间转换成儒略日的时间
  const startJulianDate = Cesium.JulianDate.fromDate(time);

  // 设置终点时间
  const stopJulianDate = Cesium.JulianDate.addSeconds(
    startJulianDate,
    totalSeconds,
    new Cesium.JulianDate()
  );

  // 将查看器的时间调整到起点和结束点的范围
  viewer.clock.startTime = startJulianDate.clone();
  viewer.clock.stopTime = stopJulianDate.clone();
  viewer.clock.currentTime = startJulianDate.clone();
  viewer.timeline.zoomTo(startJulianDate, stopJulianDate);


  // 创建采样点，哪个点什么时间在什么位置
  const positionProperty = new Cesium.SampledPositionProperty();
  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
    );
    // 添加轨迹采样点
    positionProperty.addSample(time, position);

    // 添加点 查看每个点的位置
    viewer.entities.add({
      position: position,
      point: {
        pixelSize: 10,
        color: Cesium.Color.RED,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 2,
      },
    });
  });

  // 创建飞机
  const planeEntity = viewer.entities.add({
    // 设置飞机的可用时间
    availability: new Cesium.TimeIntervalCollection([
      new Cesium.TimeInterval({
        start: startJulianDate,
        stop: stopJulianDate,
      }),
    ]),
    name: "飞机",
    position: positionProperty,

    // VelocityOrientationProperty会自动根据采样点，计算出飞机的速度和方向
    orientation: new Cesium.VelocityOrientationProperty(positionProperty),
    model: {
      uri: "./model/Air.glb", // 飞机模型
      minimumPixelSize: 128, // 飞机最小像素
      maximumScale: 20000, // 飞机最大像素
    },
    // 绘制轨迹线
    path: new Cesium.PathGraphics({
      width: 5,
    }),
  });

  // 相机追踪运动的物体
  viewer.trackedEntity = planeEntity;

  // 设置时间速率 每秒钟 =  1秒 * multiplier
  viewer.clock.multiplier = 60;
});
</script>


<style scoped>
#cesiumContainer {
  height: 100%;
  width: 100%;
}
</style>