Cesium实现模型按照指定路线移动（七）

第一步：加载模型行动路径

  //从.czml文件加载模型行动路径
  var dronePromis = Cesium.CzmlDataSource.load(
    "./assets/SampleData/sampleFlight.czml"
  );

第二步：实体的加载和配置

//实体的加载
  //定义drone用来保存实体
  var drone;
  dronePromis.then((dataSource) => {
    //将实体添加的查看器
    viewer.dataSources.add(dataSource);

    //通过ID来选择需要的轨迹的实体，这里是轨迹的实体
    drone = dataSource.entities.getById('Aircraft/Aircraft1');

    //添加和配置运动实体的模型，这里运动的实体
    drone.model = {
      //引入模型
      uri:'./assets/SampleData/Models/CesiumDrone.gltf',

      //配置模型大小的最小值
      minimumPixelSize:128,

      //配置模型大小的最大值
      maximumScale:1000,

      //配置模型轮廓的颜色
      silhouetteColor:Cesium.Color.WHITE,

      //配置轮廓的大小
      silhouetteSize:2,
    }

    //设置方向,根据实体的位置来配置方向
    drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);

    //设置模型初始的位置
    drone.viewFrom = new Cesium.Cartesian3(0, -30, 30);

    //设置查看器，让模型动起来
    viewer.clock.shouldAnimate = true;
  });

所有已配置

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

<script setup>
import * as Cesium from "cesium";
import { onMounted } from "vue";
onMounted(() => {
  // 引入服务器提供的图像
  var custom = new Cesium.ArcGisMapServerImageryProvider({
    url: "//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
  });

  //自定义的配置内容
  var viewer = new Cesium.Viewer("cesiumContainer", {
    //配置是否创建baseLayerPicker小部件
    // baseLayerPicker:false,
    //配置图像的提供
    imageryProvider: custom,
    //配置Cesium的世界地形
    terrainProvider: Cesium.createWorldTerrain({
      //配置地形的3D效果
      requestWaterMask: true,
      requestVertexNormals: true,
    }),
  });

  //利用三维坐标来设置摄像头位置
  viewer.camera.setView({
    //设置摄像头初始的具体位置()
    destination: new Cesium.Cartesian3(1332761, -