Vue3+Vite集成Cesium的WebGIS开发实践-代码聚汇网

Vue3+Vite集成Cesium的WebGIS开发实践

Nicholas Qin

1. 项目概述与核心需求

最近在开发一个WebGIS项目，需要基于Vue3+Vite技术栈集成Cesium地图引擎。经过多次实践，我总结出了一套稳定可靠的初始化方案，包含以下几个核心模块：

Cesium 1.103：作为3D地理可视化引擎
Element Plus：提供UI组件支持
Axios封装：统一处理HTTP请求
Vite构建：确保开发和生产环境的高效构建

这个方案已经通过完整测试，包括开发环境运行和打包部署验证。下面将详细介绍实现过程和技术要点。

2. 环境准备与项目创建

2.1 初始化Vue3+Vite项目

首先使用Vite官方模板创建基础项目：

bash复制# 使用npm创建项目
npm create vite@latest cesium-vue3-demo -- --template vue

# 进入项目目录
cd cesium-vue3-demo

# 安装基础依赖
npm install

提示：这里推荐使用npm而不是yarn/pnpm，因为Cesium的一些依赖在非npm环境下可能会出现兼容性问题。

2.2 安装核心依赖

接下来安装项目所需的核心依赖：

bash复制# 安装Cesium相关依赖
npm install cesium@1.103 vite-plugin-cesium --save

# 安装Element Plus
npm install element-plus --save

# 安装axios
npm install axios --save

这里有几个关键点需要注意：

vite-plugin-cesium是专门为Vite优化的Cesium插件，能自动处理Cesium的静态资源引用问题
Cesium 1.103是目前较稳定的版本，新版本可能存在兼容性问题
Element Plus需要额外安装图标库（可选）

3. 项目配置详解

3.1 Vite配置调整

修改vite.config.js文件，添加Cesium插件配置：

javascript复制import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'

export default defineConfig({
  plugins: [
    vue(),
    cesium() // 添加Cesium插件
  ],
  server: {
    port: 8080 // 建议设置固定端口
  }
})

3.2 Cesium全局配置

在src目录下创建libs/cesium.js文件，初始化Cesium：

javascript复制import * as Cesium from 'cesium'

// 设置Cesium静态资源路径
window.CESIUM_BASE_URL = '/'

// 设置默认access token（可选）
Cesium.Ion.defaultAccessToken = 'your-ion-token'

export default Cesium

注意：如果不使用Cesium Ion服务，可以忽略token设置，但部分地形数据可能无法加载。

3.3 Element Plus引入

在main.js中全局引入Element Plus：

javascript复制import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

4. Axios封装实现

4.1 基础封装

创建src/utils/request.js文件：

javascript复制import axios from 'axios'

const service = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可在此处添加token等
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

4.2 API模块化示例

创建src/api/map.js作为示例：

javascript复制import request from '@/utils/request'

export function getMapConfig(params) {
  return request({
    url: '/map/config',
    method: 'get',
    params
  })
}

5. Cesium地图组件实现

5.1 基础地图组件

创建src/components/CesiumMap.vue：

vue复制<template>
  <div id="cesium-container"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import Cesium from '@/libs/cesium'

onMounted(() => {
  // 初始化Viewer
  const viewer = new Cesium.Viewer('cesium-container', {
    terrainProvider: Cesium.createWorldTerrain(),
    timeline: false,
    animation: false,
    baseLayerPicker: false,
    sceneModePicker: false
  })
  
  // 移除默认的版权信息
  viewer.cesiumWidget.creditContainer.style.display = "none"
  
  // 添加坐标显示控件
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(116.4, 39.9),
    label: {
      text: '初始位置',
      font: '14pt sans-serif',
      fillColor: Cesium.Color.WHITE,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 2,
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      pixelOffset: new Cesium.Cartesian2(0, -30)
    }
  })
  
  // 定位到中国区域
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000000)
  })
})
</script>

<style scoped>
#cesium-container {
  width: 100%;
  height: 100vh;
}
</style>

5.2 在主页面中使用

修改App.vue：

vue复制<template>
  <div class="app-container">
    <CesiumMap />
  </div>
</template>

<script setup>
import CesiumMap from './components/CesiumMap.vue'
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>

6. 项目优化与打包

6.1 生产环境配置

在vite.config.js中添加构建配置：

javascript复制build: {
  chunkSizeWarningLimit: 2000,
  rollupOptions: {
    output: {
      manualChunks(id) {
        if (id.includes('cesium')) {
          return 'cesium'
        }
        if (id.includes('node_modules')) {
          return 'vendor'
        }
      }
    }
  }
}

6.2 打包命令

bash复制npm run build

打包后会生成dist目录，其中Cesium的静态资源会被自动处理。

7. 常见问题与解决方案

7.1 Cesium静态资源加载问题

现象：打包后地图不显示，控制台报资源404错误
解决方案：

确保vite-plugin-cesium已正确安装
检查window.CESIUM_BASE_URL设置
生产环境部署时需要确保静态资源路径正确

7.2 地图渲染性能优化

优化建议：

使用Cesium.createWorldTerrain()时添加requestVertexNormals和requestWaterMask选项
对于大量实体，使用Cesium3DTileset代替单独实体
合理使用viewer.scene.requestRenderMode = true

7.3 Element Plus样式丢失

解决方案：

确保正确引入了Element Plus的CSS文件
检查vite配置中是否正确处理了CSS
如果使用按需导入，需要配置unplugin-vue-components

8. 项目扩展建议

状态管理：可以集成Pinia来管理地图状态
路由集成：添加Vue Router实现多页面导航
国际化：Element Plus支持多语言，可以配合vue-i18n使用
地图功能扩展：
- 添加测量工具
- 实现图层控制
- 集成地理编码服务

我在实际项目中发现，Cesium与Vue3的组合非常高效，特别是配合Vite的热更新能力，开发体验很好。最大的坑在于静态资源的处理，使用vite-plugin-cesium后问题基本都解决了。