Cesium模型封装-模型移动

一、初始化地图

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

<script setup>
import { reactive, ref, onMounted } from "vue";
import { AutoModel } from "../../utils/Model";

// ---------------------------<<数据>>---------------------------
const me = reactive({
  point: null,
});

// 点位数组
const pointArr = reactive([
  {
    lon: 110.645025,
    lat: 22.03158,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.645025,
    lat: 22.16643590658971,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.7480626299661,
    lat: 22.261761037919744,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.8937798546077,
    lat: 22.261761037919744,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.99674745330135,
    lat: 22.16643590658971,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.99674745330135,
    lat: 22.03158,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.8937798546077,
    lat: 21.936190428417305,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.7483984431316,
    lat: 21.936190428417305,
    alt: 5000,
    time: null,
  },
  {
    lon: 110.645025,
    lat: 22.03158,
    alt: 5000,
    time: null,
  },
]);

// 侧向线计时器
const lineTimer = ref(null);

// 侧向线路径
const aggregate = ref(
  Cesium.Cartesian3.fromDegreesArrayHeights([
    110.82474250408677, 22.095133670052277, 0, 110.645025, 22.03158, 5000,
  ])
);

// ---------------------------<<函数>>---------------------------
// 初始化地图
const initMap = () => {
  // 在线地图token
  Cesium.Ion.defaultAccessToken = "map_token";

  // 在线地图
  let imageryProvider = new Cesium.ArcGisMapServerImageryProvider({
    url: "map_url",
  });

  window.viewer = new Cesium.Viewer("cesiumContainer", {
    geocoder: false, // 右上角 搜索
    h