系统信息
windows10 LTSC 21H2
vscode：1.77.1
nodejs：18.15.0
npm：9.5.0
版本信息
vue：3.2.47
vite：4.1.4
cesium：1.104.0
vue-router：4.1.6
默认在以上的js相关版本下构建环境，并包括创建vue项目，创建vue-router文件并构建路由，创建vue视图等等，以上内容不再赘述。
如环境和版本不同，则项目中可能会出现低概率的不可遇见异常，请适配相关内容后再尝试。
plus：本文所述项目引用了element-ui。
构建及应用
本文默认应用者已下载cesiumjs文件包并申请获取到Cesium的AccessToken。
cesiumjs文件包下载路径：
本文参考的CesiumJS官方文档：
构建完成的vue项目后，安装cesium，具体步骤如下：
步骤1：npm引入cesium
npm install cesium
步骤2：在main.js中设定cesium的基础url路径，这里将基础路径设置为cesium，同时在public文件夹新建文件夹cesium，将下载得到的Cesium-1.104.zip文件包下的Build\Cesium文件夹内的所有文件拷贝到刚刚新建立的cesium文件夹。
注意：一定不要在main.js文件中全局引用cesium，这种引用方式并不会生效。
步骤3：构建测试用的TestView.vue，配置好路由，引入cesiumJS，具体代码：
<template>
<div id="testCesium" class="ht10 wd10 cesiumBox"></div>
</template>
<script setup>
import { ref , onMounted } from 'vue'
import * as Cesium from 'cesium'
import "cesium/Build/Cesium/Widgets/widgets.css";
const init = () => {
Cesium.Ion.defaultAccessToken = '你申请的cesiumAccessToken'
// Initialize the Cesium Viewer in the HTML element with the "你定义的元素id".
const viewer = new Cesium.Viewer('testCesium', {});
}
onMounted(()=>{
init()
})
</script>
<style lang="less" scoped>
.cesiumBox {}
</style>
编译运行，可见如下结果：
一些注意事项：
1）一定要在应用cesium组件元素的view中引入cesiumJS，不要在main.js中进行全局引用，cesium的全局引用不会生效。
2）代码复制时一定要注意使用申请的cesiumAccessToken，用它替换"你申请的cesiumAccessToken"，同时注意不要弄丢两个英文引号。
3）cesium容器所在的dom元素（本例中为div）必须添加id同时明确指定height和width，示例中通过ht10和wd10的css类指定了具体值。
4）创建cesium时引用的容器id要和之前定义的dom元素id值一致，即本例中的testCesium，它可以修改，但要两处同时修改。
步骤4：添加cesium-navigation导航
npm install cesium-navigation-es6 --save
步骤5：配置cesium-navigation导航
在TestView中引入cesium-navigation，在cesium的引用代码后添加引用代码：
在定义的cesium viewer控件后添加配置项目：
最后启用导航：
完整代码：
<template>
<div id="testCesium" class="ht10 wd10 cesiumBox"></div>
</template>
<script setup>
import { ref , onMounted } from 'vue'
import * as Cesium from 'cesium'
import "cesium/Build/Cesium/Widgets/widgets.css"
import CesiumNavigation from "cesium-navigation-es6"
const init = () => {
Cesium.Ion.defaultAccessToken = '你申请的cesiumAccessToken'
// Initialize the Cesium Viewer in the HTML element with the "你定义的元素id".
const viewer = new Cesium.Viewer('testCesium', {})
//定义对应的cesium-navigation的配置
let options = {}
// 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
options.defaultResetView = Cesium.Rectangle.fromDegrees(80, 22, 130, 50);
//用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
options.enableCompass= true
// 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
options.enableZoomControls= false
// 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
options.enableDistanceLegend= false
// 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
options.enableCompassOuterRing= true
new CesiumNavigation(viewer,options)
}
onMounted(()=>{
init()
})
</script>
<style lang="less" scoped>
.cesiumBox {}
</style>以上就是基础的cesium项目构建及插件的使用，之后将介绍如何配置cesium并引入其他影像。