完整教程：Vue3与Cesium：轻量版3D地理可视化实践

文章目录

• • 引言
  • 一、核心概念速览
  • • 1.1 Cesium 核心能力
    • 1.2 Vue3 适配优势
  • 二、3 步搭建开发环境
  • • 2.1 创建 Vue3 项目（Vite）
    • 2.2 安装 Cesium
    • 2.3 关键配置（vite.config.js）
  • 三、Vue3 中使用 Cesium 基础
  • • 3.1 封装基础地图组件
    • 3.2 加载核心数据类型
    • • （1）加载 3D 模型（glTF）
      • （2）加载矢量数据（GeoJSON）
  • 四、性能优化与常见问题
  • • 4.1 3 个关键优化点
    • 4.2 2 个常见问题解决
  • 五、总结

引言

在地理信息可视化领域，Cesium 的 3D 地球渲染能力与 Vue3 的组件化、响应式优势结合，能快速开发轻量化地理应用。本文聚焦核心流程，帮助开发者快速上手两者结合的关键操作。

一、核心概念速览

1.1 Cesium 核心能力

Cesium 是开源地理可视化库，支持：

• 高精度 3D 地球 / 地形渲染

• 影像、矢量、3D 模型（glTF）加载

• 时间动态数据可视化（CZML 格式）

• 基础交互（缩放、平移、旋转）

1.2 Vue3 适配优势

• Composition API：便于拆分 Cesium 初始化、事件监听等逻辑

• 响应式优化：数据更新时精准控制地图状态

• Vite 支持：快速构建，减少 Cesium 资源加载耗时

二、3 步搭建开发环境

2.1 创建 Vue3 项目（Vite）

\# 初始化项目
npm create vite@latest vue3-cesium-demo -- --template vue
cd vue3-cesium-demo
npm install

2.2 安装 Cesium

\# 安装核心依赖
npm install cesium

2.3 关键配置（vite.config.js）

解决 Cesium 资源路径与全局变量问题：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({plugins: \[vue()],resolve: {// 配置别名alias: {'@': path.resolve(\_\_dirname, 'src'),'cesium': path.resolve(\_\_dirname, 'node\_modules/cesium/Build/Cesium')}},server: {// 允许跨域加载地图资源proxy: {'/cesium': {target: 'http://localhost:5173',changeOrigin: true}}},define: {// 暴露Cesium全局变量CESIUM\_BASE\_URL: JSON.stringify('/cesium')}
})

三、Vue3 中使用 Cesium 基础

3.1 封装基础地图组件

在src/components/CesiumMap.vue中实现：

\
\<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
// 引入Cesium核心模块
import \* as Cesium from 'cesium'
// 引入Cesium样式
import 'cesium/Widgets/widgets.css'
const cesiumContainer = ref(null)
let viewer = null // 地图实例
// 组件挂载时初始化地图
onMounted(() => {// 初始化Viewerviewer = new Cesium.Viewer(cesiumContainer.value, {// 简化配置：关闭不必要控件timeline: false, // 关闭时间轴animation: false, // 关闭动画控件baseLayerPicker: true, // 保留底图切换imageryProvider: new Cesium.UrlTemplateImageryProvider({url: 'https://webst02.is.autonavi.com/appmaptile?style=6\&x={x}\&y={y}\&z={z}' // 高德影像底图})})// 定位到中国区域viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(104.1, 30.6, 15000000)})
})
// 组件卸载时销毁地图（避免内存泄漏）
onUnmounted(() => {if (viewer) {viewer.destroy()viewer = null}
})
\</script>
\

3.2 加载核心数据类型

（1）加载 3D 模型（glTF）

在onMounted中添加代码：

// 加载glTF模型（示例：加载一个建筑物模型）
const modelEntity = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(116.404, 39.915, 100), // 北京坐标model: {uri: '/models/building.glb', // 模型路径（需放在public文件夹）scale: 100, // 缩放比例minimumPixelSize: 128 // 最小像素大小}
})
// 视角聚焦到模型
viewer.trackedEntity = modelEntity

（2）加载矢量数据（GeoJSON）

// 加载GeoJSON区域数据（示例：加载中国省级边界）
viewer.dataSources.add(Cesium.GeoJsonDataSource.load('/data/china-provinces.geojson', {stroke: Cesium.Color.RED, // 边界线颜色fill: Cesium.Color.PINK.withAlpha(0.2), // 填充色（透明）strokeWidth: 2 // 边界线宽度
})).then(dataSource => {viewer.flyTo(dataSource) // 聚焦到数据区域
})

四、性能优化与常见问题

4.1 3 个关键优化点

1. 延迟加载：非首屏地图组件用v-if控制，避免初始加载耗时

2. 数据裁剪：大规模矢量数据分片加载（如使用 TiledGeoJsonDataSource）

3. 销毁清理：onUnmounted中必须调用viewer.destroy()，避免内存泄漏

4.2 2 个常见问题解决

问题现象	解决方案
地图容器空白	1. 确认容器宽高已设置；2. 检查CESIUM_BASE_URL配置是否正确
模型 / 数据加载失败	1. 路径是否放在public文件夹；2. 跨域问题需配置服务端 CORS

五、总结

本文精简了 Vue3 与 Cesium 结合的核心流程：从 3 步环境搭建，到基础地图组件封装，再到核心数据加载与优化。如需扩展高级功能（如时间轴、自定义图表），可基于本文基础，参考 Cesium 官方文档逐步补充。