Cesium在vue3中的安装、使用

1.cesium插件引入，vite-plugin-cesium 是一个专门为 Vite 构建工具定制的插件，用于在 Vite 项目中轻松使用 Cesium 库。它简化了在 Vite 项目中集成 Cesium 的过程，并提供了一些额外的功能和配置选项。而直接安装 Cesium 库，你需要手动配置 Vite 项目以确保正确引入和使用 Cesium。这可能涉及到配置模块加载器、处理依赖关系、解决版本冲突等问题。相比之下，使用 vite-plugin-cesium 插件可以让这些步骤更加简单和方便，所以要使用vite构建项目。

npm i cesium vite-plugin-cesium vite -D

2.配置vite.config.js

import cesium from 'vite-plugin-cesium'

export default defineConfig({
  plugins: [
    cesium()
    ]
})

3.在组件中

<template>
  <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
</template>

<script setup lang="ts">
import * as Cesium from 'cesium'
import { onMounted } from 'vue'
onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false, // 禁用沙箱，解决控制台报错
    navigationHelpButton: false,
  })
  viewer.camera.setView({
    // 设置相机位置，经度，纬度，高度
    destination: Cesium.Cartesian3.fromDegrees(118.03, 24.485, 10000),
    orientation: {
      // 初始视角
      heading: Cesium.Math.toRadians(0), // 偏航角，单位弧度
      pitch: Cesium.Math.toRadians(-45), // 仰俯角，单位弧度
      roll: Cesium.Math.toRadians(0)  // 翻滚角，单位弧度
    }
  })
})
</script>

　代码地址：https://gitee.com/yuexiayunsheng/vue3learn/commit/c275c354d68a4bf63415bab88be6e83597b8a957