Vue3+Vite+Cesium实现Cesium组件式开发

1、安装Vite、Cesium插件

npm init vite@latest
npm i cesium
npm i vite-plugin-cesium -D

2、配置（vite.config.js）

//vite.config.js
import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium';
export default defineConfig({
  plugins: [cesium()]
});

3、构造Cesium类文件并实例化导出

//cesiumclass/base.js
import * as Cesium from 'cesium'
const cesiumConfig = {
  infoBox: false,//取消沙盒
  geocoder: false,//控制右上角第一个位置的查找工具，
  homeButton: false,//控制右上角第二个位置的home图标
  sceneModePicker: false,//控制右上角第三个位置的选择视角模式，2d，3d
  baseLayerPicker: false,//控制右上角第四个位置的图层选择器
  navigationHelpButton: false,//控制右上角第五个位置的导航帮助按钮
  animation: false,//控制左下角的动画器件
  timeline: false,//控制下方时间线
  fullscreenButton: false,//右下角全屏按钮
}
export class CesiumView {
  viewer = ''
  constructor(cesiumContainerId) {
    this.cesiumContainerId = cesiumContainerId;
  }
  async init() {
    this.viewer = new Cesium.Viewer(this.cesiumContainerId, cesiumConfig)
    this.viewer._cesiumWidget._creditContainer.style.display="none"
  }
  async fly() {
    this.viewer.camera.flyTo({
      //飞往目的地的经度、纬度、高度
      destination: Cesium.Cartesian3.fromDegrees(111, 111, 111),
      //完成后更改相机的方向，航向、俯仰、和横滚分别相对于东、北和上
      orientation: {
        hedaing: Cesium.Math.toRadians(0.0),
        pitch: Cesium.Math.toRadians(-60.0),
        roll: 0.0,
      }
    })
  }

}
export const cesiumView = new CesiumView('cesiumContainer')

4、调用Cesium类文件实现初始化

//Component/CesiumView.vue
<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { cesiumView } from 'cesiumclass/base.js'
onMounted(async () => {
  await cesiumView.init()
  cesiumView.fly()
})
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>

5、组件化调用Cesium

<template>
    <CesiumView class="cesium-style"></CesiumView>
</template>

<script setup>
import { ref, reactive } from 'vue'
import CesiumView from './layout/CesiumView.vue';

</script>

<style scoped>

</style>

6、无法实现屏幕100%高度的补充

//style.css
html,
body,
#app{
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}