Vue3+Vite配置Cesium

目录

1、安装node.js

2、创建vue3+vite项目

3、在项目中配置Cesium

---

实例中下载的Cesium版本为1.126.0

1、安装node.js

（如果本地已安装，则忽略这一步）

2、创建vue3+vite项目

        新建一个文件夹，在该文件夹里cmd，执行：

npm create vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

蓝色字体为当前选择的选项。创建号=好项目之后，根据绿色字体的代码，依次执行。即可启动项目。至此，vue3项目创建成果。

3、在项目中配置Cesium

① 安装cesium，执行：

npm install cesium

② 安装适用于vite的cesium插件vite-plugin-cesium，执行：

npm install vite-plugin-cesium

③ 修改配置文件vite.config.ts，引入适用于vite的cesium插件vite-plugin-cesium，具体修改：

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

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import cesium from 'vite-plugin-cesium';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    cesium(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

④ App.vue中进行引用

<template>
  <div id="cesiumContainer"></div> 
</template>

<script setup lang="ts"> 
  import * as Cesium from 'cesium';
  import { onMounted } from 'vue'; 
  onMounted(() => { 
          const viewer = new Cesium.Viewer('cesiumContainer', {
            animation: false,
            timeline: false,
            navigationHelpButton: false,
            terrain: Cesium.Terrain.fromWorldTerrain(),
            baseLayerPicker: false,
            scene3DOnly: false,
            infoBox: false,
            vrButton: false,
          });
          viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(102.52, 25, 26000000.0),
            orientation: {
                heading: Cesium.Math.toRadians(0),
                pitch: Cesium.Math.toRadians(-90),
                roll: 0.0
            }
        })
          viewer._cesiumWidget._creditContainer.style.display = "none"   // 隐藏版权说明
          viewer.scene.globe.enableLighting = true  // 启动照明
  }); 
</script> 

<style scoped>
#cesiumContainer{ 
  position: absolute;
  width: 100%;
  height: 100%; 
  left: 0;
  top: 0;
} 

</style>

⑤ 最终重启项目，即可完成配置 。