当前位置：首页 > news >正文

Vue+Cesium 基础搭建

news 2025/8/2 8:06:29

一、创建Vue工程

npm init vue@latest

二、安装依赖

Sass

npm install sass -D

解决初始cesium无法全屏，主要是替换文件

Cesium

npm install cesium

vite-plugin-cesium

npm install vite-plugin-cesium -D

vite-plugin-cesium 是一个专为 Vite 项目设计的插件，用于简化在 Vue.js 应用中集成 Cesium 的过程。它通过自动配置 Cesium 的资源路径和引入方式，使得开发者可以快速启动并使用 Cesium 进行 3D 地图和地球场景的开发。

三、文件

main.scss

body {margin: 0;background-color: #f5f5f5;
}/* fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {transition: all 0.3s;
}.fade-slide-enter-from {transform: translateX(-30px);opacity: 0;
}.fade-slide-leave-to {transform: translateX(30px);opacity: 0;
}

Home.vue

<script setup>
import { onMounted } from 'vue'
import 'cesium/Build/Cesium/Widgets/widgets.css'
import * as Cesium from 'cesium'
const Cesium_ACCESS_TOKEN = '....'
Cesium.Ion.defaultAccessToken = Cesium_ACCESS_TOKEN
onMounted(() => {const viewer = new Cesium.Viewer("cesiumContainer");
})
</script>
<template><div id="cesiumContainer"></div>
</template>
<style>
#cesiumContainer {width: 100vw;height: 100vh;
}
</style>

token获取

App.vue

<script setup>
import HomeVue from './views/Home.vue';
</script><template>
<HomeVue/>
</template><style scoped></style>

vite.config.js

配置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))},},
})