进入项目中，运行以下命令即可,安装cesium的依赖包。

// 安装cesium的依赖
pnpm install cesium
 
// 安装cesium的依赖插件
pnpm i cesium vite-plugin-cesium

在main.ts文件中添加一行代码：

import "cesium/Build/Cesium/Widgets/widgets.css";

接下来，在vite.config.ts文件中添加代码，具体如下图:

import cesium from "vite-plugin-cesium";

先我们需要去cesium网站申请token：Access Tokens | Cesium ion

申请完毕后开始编码：

<script setup lang="ts">
import * as Cesium from "cesium";
import { onMounted } from "vue";
// 这里是我们申请的token
const token = "";
Cesium.Ion.defaultAccessToken = token;
// 声明cesium地球对象
let viewer:any;
onMounted(() => {
  init();
});
// 初始化图层
const init = ()=>{
  viewer = new Cesium.Viewer("container", {
    // 使用默认的影像图层和地形图层
    homeButton:false,
    geocoder:false,
    vrButton:false,
    timeline:false,
    navigationHelpButton:false,
    fullscreenButton:false,
    infoBox:false,
    selectionIndicator:false,
    sceneModePicker:false,
    animation:false,
    scene3DOnly:false,
    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
      url: "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
    }),
  }); 
  // 关闭logo图标
  viewer.cesiumWidget.creditContainer.style.display = "none";
}
</script>
<template>
  <div>
    <div id="container"></div>
  </div>
</template>

效果图