Cesium+Vue3+vite环境搭建详细步骤以及代码

以下是搭建Cesium+Vue3+vite环境的详细步骤和示例代码：

步骤：

1. 创建一个新的Vite项目

   在终端中运行以下命令来创建一个新的Vite项目：

npm init vite@latest my-cesium-app --template vue-ts

1. 根据提示选择需要的配置，等待项目创建完成。
2. 安装Cesium
   在终端中进入Vue项目目录，运行以下命令来安装Cesium：

   npm install cesium
   

3.配置Vite

在Vite项目中，需要配置Vite来支持加载Cesium的相关资源。

首先在Vite项目的根目录下创建一个名为vite.config.ts的文件，然后添加以下配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      cesium: path.resolve(__dirname, 'node_modules/cesium/Source')
    }
  },
  define: {
    CESIUM_BASE_URL: JSON.stringify('')
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "@/assets/styles/variables.scss";
          @import "@/assets/styles/mixins.scss";
        `
      }
    }
  },
  build: {
    target: 'es2015'
  }
});

4.在这个配置中，我们通过resolve.alias配置将Cesium的路径指向node_modules/cesium/Source。我们还定义了一个空的CESIUM_BASE_URL，并在build.target中将输出目标设置为es2015，以确保Cesium的ES6模块被正确地输出。

1. 在Vue3组件中使用Cesium
   在Vue3组件中，可以使用Cesium的相关组件和API来开发虚拟地球应用。例如，以下是一个简单的Vue3组件，展示一个包含Cesium的地球：

   <template>
     <div ref="cesiumContainer"></div>
   </template>
   
   <script lang="ts">
   import { defineComponent, onMounted, ref } from 'vue';
   import * as Cesium from 'cesium';
   
   export default defineComponent({
     name: 'CesiumViewer',
     setup() {
       const cesiumContainer = ref<HTMLDivElement>();
   
       onMounted(() => {
         const viewer = new Cesium.Viewer(cesiumContainer.value);
       });
   
       return {
         cesiumContainer
       };
     }
   });
   </script>
   
   <style scoped>
   #cesiumContainer {
     height: 100%;
   }
   </style>
   
   

   在这个组件中，我们使用了Vue3的defineComponent函数来定义组件，并使用onMounted钩子来在组件挂载时创建Cesium的Viewer对象。我们还使用了Vue3的ref函数来引用名为cesiumContainer的DOM元素，然后将其传递给Cesium的Viewer构造函数。
   **

关注公众号【GISer世界】回复Cesium+Vue3获取已经搭建好的环境

**