cesium-vue-project

这是一个基于 Vite + Vue 3 构建的智慧城市数据可视化大屏前端项目。它以 Cesium.js 驱动的全屏 3D 城市地图为核心，结合 Apache ECharts 提供了丰富的多类型数据图表展示。项目设计注重视觉效果，融入了赛博朋克风格的 UI、流光动画和数字滚动效果，并模拟了智慧��市多层数据（如地标、交通、告警）的动态加载。该项目旨在提供一个高 度模块化、功能丰富且视觉酷炫的开发框架，适用于快速构建各类地理空间数据可视化应用。

入门
GitHub在线演示
Stars：9
License：未知
更新：2025/12/25

README

智慧城市数据可视化大屏 (Cesium + Vue 3 + ECharts)

这是一个基于 Vue 3, Vite, Cesium, 和 ECharts 构建的高度模块化、可扩展的智慧城市数据可视化大屏前端项目模板。

该项目旨在提供一个功能齐全、视觉效果酷炫的起点，方便开发者快速搭建和定制自己的三维地理空间数据应用。

查看最终效果截图

✨ 功能亮点

  • 沉浸式 3D 地图: 使用 Cesium.js 作为核心，将 3D 城市地图作为全屏背景，并加载了全球地形和 3D 建筑模型，提供真实的视觉体验。
  • 丰富的数据可视化: 集成 Apache ECharts，在悬浮面板中展示了多种图表（饼图、柱状图、折线图、雷达图、仪表盘、漏斗图），充分展示了业务数据。
  • 酷炫的视觉效果:
    • 赛博朋克风格 UI: 整体采用深色科技感主题，UI 面板具有半透明和辉光效果。
    • 流光动画: 信息面板的边框和标题具有动态的流光动画，科技感十足。
    • 数字滚动动画: 顶部的核心统计指标具有从 0 开始的数字动态滚动效果，增强了视觉吸引力。
  • 模拟智慧城市数据层: 在 3D 地图上预置了多个数据层，��拟真实的智慧城市应用场景：
    • 城市地标: 高亮标注了城市的核心地标建筑。
    • 交通大动脉: 使用动态流光线模拟了城市的实时交通路况。
    • 动态告警: 使用闪烁的脉冲圆模拟了城市中的实时安全事件。
  • 真实的异步数据加载: 模拟了从后端 API 获取数据的完整流程。页面加载时，UI 会首先显示加载状态，然后在数据返回后动态渲染，更贴近实战。
  • 高度模块化: 项目结构清晰，代码遵循高内聚、低耦合的原则：
    • 组件化: 核心功能（Cesium 查看器, ECharts 图表, 信息面板, 数字动画）都被封装为可复用的 Vue 组件。
    • 配置分离: 所有的 ECharts 图表配置和 Cesium 数据加载逻辑都被抽离到独立的工具模块中，便于维护和扩展。

🛠️ 技术栈

  • 构建工具: Vite - 提供极速的冷启动和热更新，开发体验优秀。
  • 前端框架: Vue 3 - 使用了 <script setup> 语法，代码更简洁、高效。
  • 3D 地图引擎: Cesium.js - 用于渲染 3D 地球和地理空间数据。
  • 数据可视化: Apache ECharts - 功能强大的数据图表库。
  • 路由: Vue Router 4 - Vue 官方的路由管理器。
  • 动画: GSAP (GreenSock Animation Platform) - 用于实现高性能、流畅的数字滚动动画。

🚀 项目设置与运行

环境要求:

  • Node.js: v20.0.0 或更高版本。 (项目中的部分依赖需要较新的 Node.js 版本)。

安装步骤:

  1. 克隆仓库:

    git clone <your-repository-url>
cd cesium-vue-project

  2. 安装依赖:

    npm install

  3. 运行开发服务器:

    npm run dev

    项目将在本地启动 (通常是 http://localhost:5173)，您可以在浏览器中打开该地址查看效果。

📁 项目结构

/cesium-vue-project
|-- src
|   |-- api
|   |   `-- index.js             # 模拟异步数据获取
|   |-- assets
|   |   `-- styles
|   |       `-- datav-theme.css  # 全局大屏样式和动画
|   |-- components
|   |   |-- cesium
|   |   |   `-- CesiumViewer.vue # 核心 Cesium 组件
|   |   |-- echarts
|   |   |   `-- EChartsChart.vue # 可复用的 ECharts 组件
|   |   `-- ui
|   |       |-- InfoPanel.vue      # 带流光效果的信息面板
|   |       `-- AnimatedNumber.vue # 数字滚动动画组件
|   |-- router
|   |   `-- index.js             # 路由配置
|   |-- utils
|   |   |-- cesium-data-loader.js # Cesium 数据层加载逻辑
|   |   `-- echarts-options.js   # 所有 ECharts 图表配置
|   |-- views
|   |   `-- DataScreen.vue       # 大屏主页面
|   |-- App.vue                  # 根组件
|   `-- main.js                  # 应用入口
|-- index.html
|-- package.json
`-- vite.config.js             # Vite 配置文件 (集成了 vite-plugin-cesium)