企业官网建设流程全解析

前言

在 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 环境准备与依赖安装

1. 初始化 Vue2 项目（若已存在可跳过）

vue create cesium-vue2-demo cd cesium-vue2-demo

     2.安装核心依赖

# 安装 Cesium（稳定版 1.118） npm install cesium@1.118 --save # 安装事件总线替代方案 mitt（解决 Vue3 无 $on/$emit 问题） npm install mitt --save

1. 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'; // 创建