前言
在 Vue 项目中集成 Cesium 加载 3DTiles 模型（如倾斜摄影、BIM 模型）是地理信息可视化领域的常见需求，但过程中容易遇到模块化冲突、资源加载失败、事件总线报错等问题。本文基于 Vue2 + Vue CLI 5 环境，从基础配置、核心功能实现到常见报错修复，提供一套完整可运行的方案，帮助开发者快速落地。
一、技术栈说明
- 前端框架：Vue2（Vue CLI 5）
- 3D 可视化引擎：Cesium 1.118（稳定版）
- 核心功能：3DTiles 模型加载、摄像头 Marker 标注、点击交互、事件总线通信
- 依赖库：mitt（Vue3 事件总线替代方案）
二、项目结构设计
src/ ├── assets/ # 静态资源（摄像头图标等） │ └── rw-image/gis/camera.png ├── components/ │ ├── bus.js # 事件总线（mitt 实现） │ └── map3D/ # 3D 地图核心模块 │ ├── map3D.js # 核心逻辑封装（Viewer 初始化、模型加载、Marker 操作） ├── views/ │ └── Cesium3DTiles/ │ └── index.vue # 页面入口（地图挂载、业务逻辑） └── public/ ├── Cesium/ # 本地 Cesium 资源（避免 CDN 依赖） └── models/ # 3DTiles 模型（含 tileset.json）三、核心步骤实现
3.1 环境准备与依赖安装
- 初始化 Vue2 项目（若已存在可跳过）
vue create cesium-vue2-demo cd cesium-vue2-demo2.安装核心依赖
# 安装 Cesium（稳定版 1.118） npm install cesium@1.118 --save # 安装事件总线替代方案 mitt（解决 Vue3 无 $on/$emit 问题） npm install mitt --save- 3.本地 Cesium 资源部署（避免 CDN 加载失败）
- 复制
node_modules/cesium/Build/Cesium文件夹到public目录下 - 最终路径：
public/Cesium（确保包含 Cesium.js、Widgets 等核心文件）
3.2 基础配置文件编写
3.2.1 事件总线 bus.js
// src/components/bus.js import mitt from 'mitt'; // 创建
)
)
