cesium 学习笔记（一）之在vue3+vite项目中搭建cesium环境，并让项目正常运行

cesium 学习笔记

第一节：在vue3+vite项目中搭建cesium环境，并让项目正常运行起来，效果图如下：

第一步：创建 vue3+vite 项目

//在cmd命令行窗口中利用 Vue 官方脚手架工具创建项目， 输入如下命令:
 npm create vue@latest  

根据需求选择诸如TypeScript和Pinia之类的可选功能，创建完成后按提示的最下方绿色字体切换到项目根目录、安装依赖、运行项目，如下图所示：

确保vue+vite项目正常运行，如下图所示：

第二步：在第一步创建的项目中安装 cesium 和 vite-plugin-cesium插件,执行如下命令：

npm i cesium vite-plugin-cesium vite -D

第三步：在vite.config.js 配置文件中添加如下代码：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

//第一步： 引入Cesium 插件
import cesium from 'vite-plugin-cesium';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    //第二步： 添加引入的 Cesium 插件
    cesium()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

第四步：在 components 文件夹下 创建自己的MyCesium.vue组件，并在App.vue中引入创建的MyCesium.vue组件，代码如下：

// MyCesium.vue 

<template>
    <!-- 第二步：创建接收cesium的容器 -->
    <div id="cesiumContainer"></div>
</template>
<script setup lang="ts">
// 第一步：引入 Cesium 
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
onMounted(() => {
    // 第三步：创建Cesium Viewer
    // 任何Cesium应用程序的基础都是Viewer,Viewer是一个带有多种功能的可交互的三位数字地球的容器（盒子）,把创建的Viewer和第二步中的id为"cesiumContainer"的div容器绑定即可
    const viewer = new Cesium.Viewer('cesiumContainer');
})
</script>
<style>
html,
body,
#app,
#cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
</style>

// App.vue
<script setup lang="ts">
import MyCesium from './components/MyCesium.vue';
</script>

<template>
   <MyCesium></MyCesium>
</template>

<style scoped>

</style>

npm run dev 运行项目，效果如下:

特别提醒：因脚手架创建的vue3+vite项目自带的main.css中设置了#app的样式，导致上面运行的不是全屏，可以按如下截图修改注释掉自带的样式即可全屏：

修改自带样式后的效果如下：