安装必要依赖
在项目根目录下运行以下命令安装vue-cesium和cesium：
npm install vue-cesium@3.1.4 cesium@1.84
配置Vite
在vite.config.js文件中添加以下配置：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'export default defineConfig({plugins: [vue()],resolve: {alias: { //配置路径别名'@': resolve(__dirname, 'src'),}},define: { //配置Cesium基础URLCESIUM_BASE_URL: JSON.stringify('/node_modules/cesium/Build/Cesium/')}
})
初始化Vue应用
在main.js文件中配置vue-cesium：
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import VueCesium from 'vue-cesium'
import 'vue-cesium/dist/index.css'const app = createApp(App)
app.use(VueCesium, {cesiumPath: '/node_modules/cesium/Build/Cesium/Cesium.js'
})
app.mount('#app')
创建基础视图组件
在App.vue文件中添加以下代码：
<script setup>
// 组件逻辑
</script><template><div class="app-container"><vc-viewer><!-- Cesium Viewer容器 --></vc-viewer></div>
</template><style scoped>
.app-container {width: 100%;height: 100vh;margin: 0;padding: 0;
}
</style>
添加全局样式
在style.css文件中添加以下样式：
* {margin: 0;padding: 0;box-sizing: border-box;
}html, body {width: 100%;height: 100%;overflow: hidden;
}#app {width: 100%;height: 100%;
}
运行项目
完成以上配置后，运行以下命令启动开发服务器：
npm run dev
浏览器会自动打开并显示Cesium地球视图，可以通过鼠标拖拽和滚轮进行交互。
)
