1. 安装Cesium：
npm i cesium vite-plugin-cesium vite -D
# yarn add cesium vite-plugin-cesium vite -D安装完后，可以看到已经自动安装了Cesium包：
也可以重新安装其他版本的Cesium包，不同版本的写法都有差异，根据自身情况而定，我这里重新安装的是[email protected]版本的：
2. 配置 vite.config.js：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium';
export default defineConfig({
plugins: [
vue(),
cesium()
],
})
3. Vue中初始化：
<template>
<div id="cesiumViewer"></div>
</template>
<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
let viewer = null;
onMounted(() => {
initCesium();
})
//初始化
const initCesium = () => {
Cesium.Ion.defaultAccessToken = 'eyJ0...'; // 自己创建的token
viewer = new Cesium.Viewer('cesiumViewer',{
infoBox: false, // 禁用沙箱，解决控制台报错
animation: false, // 是否创建动画小器件，左下角仪表
baseLayerPicker: false, // 是否显示图层选择器
fullscreenButton: false, // 是否显示全屏按钮
geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
homeButton: false, // 是否显示Home按钮
infoBox: false, // 是否显示信息框
sceneModePicker: false, // 是否显示3D/2D选择器
selectionIndicator: false, // 是否显示选取指示器组件
timeline: false, // 是否显示时间轴
navigationHelpButton: false, // 是否显示右上角的帮助按钮
navigationInstructionsInitiallyVisible: false, //是否显示帮助信息控件
showRenderLoopErrors: false, // 是否显示渲染错误
// 设置背景透明
orderIndependentTranslucency: false,
shouldAnimate: true, //执行模型动画
terrainProvider: Cesium.createWorldTerrain(), //地形
});
viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏logo
viewer.scene.globe.enableLighting = true; //启用使用场景光源照亮地球
viewer.scene.globe.depthTestAgainstTerrain = true; //启用深度测试
}
</script>
<style lang="less" scoped>
</style>
其中 defaultAccessToken 的申请，创建的选项默认勾选就可以：
创建 Cesium 的 token
https://ion.cesium.com/tokens?page=1
