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

Vue3+Cesium+vite 入门- 项目搭建

news 2025/7/13 15:09:26

一.项目搭建

环境准备
- 确保本地安装了 Node.js（推荐版本 v16 以上）。
- 使用 Vue CLI 或 Vite 创建 Vue 3 项目。
创建 Vue 3 项目 使用 Vite 创建项目，因为它构建速度快且配置简单

npm init vite@latest cesium-vue-app --template vue
cd cesium-vue-app
npm install
npm install cesium

3.配置 Vite 以支持 Cesium

修改 vite.config.js 文件，添加以下代码：

import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import createVitePlugins from './vite/plugins'
import cesium from 'vite-plugin-cesium'

export default defineConfig(({ mode, command }) => {
    const env = loadEnv(mode, process.cwd())
    return {
        plugins: [cesium(), ...createVitePlugins(env, command === 'build')],
        assetsInclude: ['**/*.glb'],
        resolve: {
            alias: {
                '~': path.resolve(__dirname, './'),
                '@': path.resolve(__dirname, './src')
            },
            extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
        },
        server: {
            port: 4200,
            host: true,
            open: false,
            cors: true,
            proxy: {
                '/api': {
                    target: 'http://127.0.0.1:3000',
                    changeOrigin: true
                }
            }
        }
    }
})

4.导入 Cesium 样式

在 main.js 中导入 Cesium 的样式文件：

import 'cesium/Build/Cesium/Widgets/widgets.css';

二.创建 Cesium 地球组件

1.创建地图初始化逻辑

在 src 下创建 cesium 文件夹，再在其中创建 map.init.js 和 map.config.js 文件：

map.init.js：

import { ref } from 'vue'
import * as Cesium from 'cesium'
import { mapOptions, tiandituAnnotationProvider } from "@/cesium/map.config.js";
const cesium_token = '注册cesium token' // 替换为你的 Cesium Token
export const map = ref(null)
export const mapInit = () => {
    Cesium.Ion.defaultAccessToken = cesium_token
    map.value = new Cesium.Viewer('cesiumContainer', mapOptions())
    map.value.imageryLayers.addImageryProvider(tiandituAnnotationProvider);
    map.value.scene.globe.depthTestAgainstTerrain = true
}
export const mapDestroy = () => {
    if (map.value) {
        map.value.destroy()
        map.value = null;
    }
}

map.config.js：

import * as Cesium from 'cesium';
const tiandituKey = "替换为你的天地图 API Key";
const tiandituImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
    url: `https://t{s}.tianditu.gov.cn/img_w/wmts?tk=${tiandituKey}`,
    layer: 'img',
    style: 'default',
    format: 'tiles',
    tileMatrixSetID: 'w',
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    maximumLevel: 18
});
export const tiandituAnnotationProvider = new Cesium.WebMapTileServiceImageryProvider({
    url: `https://t{s}.tianditu.gov.cn/cia_w/wmts?tk=${tiandituKey}`,
    layer: 'cia',
    style: 'default',
    format: 'tiles',
    tileMatrixSetID: 'w',
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    maximumLevel: 18
});
export const mapOptions = () => {
    return {
        infoBox: false,
        selectionIndicator: false,
        imageryProvider: tiandituImageryProvider,
        scene3DOnly: false,
        timeline: false,
        animation: false,
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false,
        navigationHelpButton: false,
        fullscreenButton: false
    }
}

2.创建 CesiumMap.vue 组件

在 src/components 文件夹中创建 CesiumMap.vue：

<template>
    <div id="cesiumContainer"></div>
</template>
<script setup>
import { onMounted, onUnmounted } from 'vue'
import { mapDestroy, mapInit } from "@/cesium/map.init.js";

onMounted(() => {
    mapInit()
})
onUnmounted(() => {
    mapDestroy()
})
</script>
<style scoped>
#cesiumContainer {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
:deep(.cesium-viewer-bottom) {
    display: none;
}
</style>

3.在 App.vue 中引入组件

<template>
    <div id="app">
        <CesiumMap />
    </div>
</template>
<script setup>
import CesiumMap from '@/components/CesiumMap.vue';
</script>

项目运行后就能看到地球了

三、代码分析

Vue 3 的响应式原理 Vue 3 使用 Proxy 和 Reflect 实现响应式。Proxy 拦截对数据的读写操作，Reflect 动态操作数据。这种方式比 Vue 2 的 Object.defineProperty 更强大，支持动态添加或删除属性。
CesiumJS 的集成方式
- 在 Vue 3 中，通过 ref 创建响应式变量。
- 使用 onMounted 和 onUnmounted 生命周期钩子管理 Cesium 地图的初始化和销毁。
- 将 Cesium 的地图容器 cesiumContainer 放置在 Vue 组件的模板中。
地图配置与数据加载
- 地图配置通过 map.config.js 定义。
- 使用天地图作为底图，通过 WebMapTileServiceImageryProvider 加载。