使用Cesium + vue3 + vite 快速创建cesium场景源码

<script setup>
import { onMounted, ref } from "vue";
import * as Cesium from "cesium";
import { ElMessage } from "element-plus";

// viewer挂载到全局
const viewer = ref(null);

// 设置cesium的token
Cesium.Ion.defaultAccessToken = "your token"

  onMounted(() => {
  viewer.value = new Cesium.Viewer("cesiumContainer", {
    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
      url:
        'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
    }),
    terrainProvider: new Cesium.createWorldTerrain({
      requestWaterMask: true,
      requestVertexNormals: true,
      willReadFrequently: true,
    }),
    geocoder: true,
    homeButton: true,
    sceneModePicker: true,
    baseLayerPicker: true,
    navigationHelpButton: true,
    shouldAnimate: true,// 是否动画
    animation: true,
    timeline: true,
    fullscreenButton: true,
    vrButton: true,
    // 关闭点选出现的提示框
    selectionIndicator: false,
    infoBox: false,
  });
  viewer.value._cesiumWidget._creditContainer.style.display = "none";
  viewer.value.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(,, 3000), //目标点坐标
    orientation: {
      heading: Cesium.Math.toRadians(0.0),// 左右方向
      pitch: Cesium.Math.toRadians(-90.0),// 上下方向
      roll: Cesium.Math.toRadians(0.0),// // 镜头（屏幕）到定位目标点（实体）的距离
    },
    duration: 3 // 飞行时间
  })
  window.viewer = viewer.value;
});
</script>
<template>
 <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>
<style scoped>
 #cesiumContainer{
    width: 100%;
    height: 100%;
    position: absolute;
 }
</style>