Cesium案例-三维模型的轨迹运动（动画控制）

Cesium案例-三维模型的轨迹运动（动画控制）

引用

CSDN

1.

https://blog.csdn.net/qq_58978006/article/details/141717792

本篇文章详细介绍了如何使用Cesium实现三维模型的轨迹运动动画。通过具体的代码示例，展示了地图初始化、实体加载、路线绘制以及场景视图切换等功能的实现方法。对于学习Cesium和三维动画开发的读者具有很高的参考价值。

前言

本章讲述的是在Cesium中实现飞机模型动画的案例，主要实现实体路线绘制、场景视图切换、路径运动过渡效果等功能。也是作为官网实例的练习。如果还不太了解什么是Cesium，可以参见Cesium入门教程的博客（如下）。后续也会更新Cesium的相关实例，帮助自己以及小伙伴们进一步了解Cesium。

实例：https://sandcastle.cesium.com/?src=Interpolation.html&label=All

Cesium入门教程：https://blog.csdn.net/qq_58978006/article/details/141418040

效果：

代码实现

<template>
  <div id="customContainer">
    <div id="buttonContainer">
      <button id="downViewButton">俯视视图</button>
      <button id="trackViewButton">实体视图</button>
      <button id="sideViewButton">侧面视图</button>
    </div>
    <div id="selectContainer">
      <select id="select">
        <option value="LinearApproximation">线性近似插值路径</option>
        <option value="HermitePolynomialApproximation">Hermite 多项式近似插值</option>
        <option value="LagrangePolynomialApproximation">拉格朗日多项式近似插值路径</option>
      </select>
    </div>
  </div>
  <div id="cesiumContainer" style="width: 100%"></div>
</template>

一、初始化地图与viewer.clock时间配置

<script setup lang="ts">
import {
    onMounted } from "vue";
import * as Cesium from "cesium";
import "cesium/Build/Cesium/Cesium";
const init = async () => {
   
  //token权限需要在官网获取，详情可看Cesium入门教程指导
  Cesium.Ion.defaultAccessToken =  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiMmU4NTA0Ni1hM2VjLTQwYzItOTBhZi00NmNkM2I2MjFhMmMiLCJpZCI6MjM2MDEzLCJpYXQiOjE3MjQyMDg0ODR9.CB3bMqYbHybdGa3cHoTHdQgTh3DchtTOJ_Grosr3YfU";
  const viewer = new Cesium.Viewer("cesiumContainer", {
   
    //需要的配置项否则会出现报错，详见问题注意点
    infoBox: false,
    //如果不设置添加的模型实体动画不显示
    shouldAnimate: true,//控制视图是否在动画中，用于启用或禁用视图动画
    //三维展示地形地势、水形数据
    terrainProvider: await Cesium.createWorldTerrainAsync({
   
      requestWaterMask: true,
      requestVertexNormals: true,
    }),
  });
  //new Date(2024, 5, 20, 17, 30, 21)，表示 2024 年 6 月 20 日 17:30:21
  //可以使用 Cesium.JulianDate.now() 来表示当前的事件时间。这个方法会获取当前的 JulianDate
  const startTime = Cesium.JulianDate.fromDate(new Date(2024, 5, 20, 17));
  const stopTime = Cesium.JulianDate.addSeconds(startTime, 360, new Cesium.JulianDate());
  viewer.clock.startTime = startTime.clone();
  viewer.clock.stopTime = stopTime.clone();
  viewer.clock.multiplier = 20; //将时间流逝速度设为正常的 20 倍
  viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
  //将视图设置为提供的时间
  viewer.timeline.zoomTo(startTime, stopTime);
  viewer.camera.setView({
   
    destination: Cesium.Cartesian3.fromDegrees(-122.541, 37.815, 2000),
    orientation: {
   
      heading: Cesium.Math.toRadians(90),
      pitch: Cesium.Math.toRadians(-20),
      roll: 0,
    },
  });
  

参数补充说明：

Cesium.JulianDate.addSeconds(date, seconds, result)：一个静态方法，用于在给定的 JulianDate 对象上添加指定的秒数，从而生成一个新的 JulianDate 对象。

date:原始的 Cesium.JulianDate 对象。seconds:要添加的秒数，可以是正数或负数。result:可选的 Cesium.JulianDate 对象，用于存放结果。如果未提供，将返回一个新的 JulianDate 对象。

二、Entity实体加载与路线绘制

  //点位数组
  const dataPoint = [
    {
    longitude: -122.567, latitude: 37.843, height: 200 },
    {
    longitude: -122.537, latitude: 37.817, height: 500 },
    {
    longitude