安裝必要依賴
在項目根目錄下運行以下命令安裝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地球視圖,可以通過鼠標拖拽和滾輪進行交互。