vue3.0 开发CesiumJS 3D 场景编辑器（支持源码）

最新推荐文章于 2026-07-17 16:43:05 发布

原创最新推荐文章于 2026-07-17 16:43:05 发布 · 206 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

web前端

Vuejs

CesiumJS 3D 场景编辑器 - 功能说明

项目概述

基于 Vue3 + Element Plus + CesiumJS 构建的 3D 场景编辑器，提供模型管理、标记管理、绘制管理、天气模拟等功能，支持数据保存与预览。
在这里插入图片描述

技术栈

框架: Vue 3 (Composition API)
UI 组件: Element Plus
3D 引擎: CesiumJS
构建工具: Vite
语言: JavaScript (ES6+)
Node.js: v18.0.0+

功能模块

1. 顶部菜单

1.1 应用标识

显示应用名称 “Cesiumjs-Editor”

1.2 操作按钮

保存 💾: 导出当前场景数据为 JSON 文件下载
预览 👁️: 弹窗预览当前场景，支持截图和 3D 场景两种模式

1.3 天气控制

晴天 ☀️: 启用光照，明亮的天空效果
下雨 🌧️: 添加雾效，调整天空色调
下雪 ❄️: 添加雾效，调整天空饱和度
夜晚 🌙: 禁用光照，深色天空效果

1.4 日期显示

实时显示当前日期和时间（精确到秒）
格式: YYYY-MM-DD 周X HH:mm:ss

2. 左侧面板 - 模型管理

2.1 模型上传

点击"新增"按钮打开上传弹窗
支持拖拽或点击选择文件
支持批量上传
支持格式: .gltf, .glb

2.2 模型列表

显示已上传的模型列表
显示模型名称和大小
点击模型可在场景中选中并定位

2.3 模型操作

删除: 从场景中移除模型

2.4 模型交互

选中模型: 点击左侧列表或双击场景中的模型
XYZ 坐标轴: 选中模型后显示坐标轴，直观展示方向
键盘控制:
- W / ↑: 向上移动
- S / ↓: 向下移动
- A / ←: 向左移动
- D / →: 向右移动
- Q: 降低高度
- E: 升高高度
拖拽移动: 可直接在场景中拖拽模型调整位置

3. 右侧面板 - 标记管理

3.1 标记类型

类型	说明	特点
图形标记	使用图标作为标记	可选择不同图标
文字标记	使用自定义文字作为标记	可修改文字内容和颜色
输入标记	底部定位标记 + 顶部弹窗	可修改字体颜色、边框颜色、背景颜色

3.2 标记操作

添加: 点击对应按钮后，在地图上点击选择位置添加标记
编辑: 修改标记的名称、图标、颜色等属性
删除: 移除标记
查看: 点击标记可查看其视角（不缩放）

3.3 标记特性

支持添加到模型表面（自动获取高度）
标记面板显示已添加的标记列表
点击列表项可定位到对应标记

4. 右侧面板 - 绘制管理

4.1 绘制工具

工具	图标	操作方式
圆形绘制	○	点击确定圆心，再次点击确定半径
矩形绘制	□	点击确定第一个角点，再次点击确定对角点
多边形绘制	◇	点击添加顶点，双击结束（至少3个点）
折线绘制	~	点击添加顶点，双击结束（至少2个点）

4.2 绘制操作

取消绘制: 取消当前正在进行的绘制操作
清除全部: 删除所有已绘制的图形

4.3 已绘制图形列表

显示已绘制的图形列表
点击图形项可切换到对应视角
点击"删除"可移除单个图形

4.4 图形样式

圆形: 蓝色半透明填充 + 蓝色边框
矩形: 绿色半透明填充 + 绿色边框
多边形: 红色半透明填充 + 红色边框
折线: 黄色线条

5. 地图控制

5.1 缩放控制

右下角显示当前缩放层级
点击 + 放大一级
点击 - 缩小一级
缩放层级无上限，动态计算

5.2 视角控制

支持鼠标拖拽旋转视角
支持滚轮缩放
支持右键平移

6. 数据预览与保存

6.1 预览功能

截图模式: 显示当前场景的静态截图
3D 场景模式: 显示可交互的 3D 预览，支持旋转、缩放
预览时同步当前地图层级和视角
显示统计信息（标记数量、模型数量、绘制图形、天气）
显示 JSON 数据，支持一键复制

6.2 保存功能

导出数据包含:
- 标记数据（位置、类型、样式配置）
- 模型数据（位置、URL、名称）
- 绘制图形数据（坐标、类型）
- 相机视角数据（经纬度、高度、朝向）
- 当前天气状态
自动下载为 map-data-日期.json 文件

数据格式

导出的 JSON 结构

{
  "markers": [
    {
      "id": 1234567890123,
      "type": "icon",
      "icon": "📍",
      "name": "标记名称",
      "position": {
        "longitude": 116.4074,
        "latitude": 39.9042,
        "height": 50
      }
    }
  ],
  "models": [
    {
      "id": "model-1",
      "name": "模型名称",
      "url": "blob:http://...",
      "position": {
        "longitude": 116.4074,
        "latitude": 39.9042,
        "height": 50
      }
    }
  ],
  "drawings": [
    {
      "id": "draw-1",
      "type": "circle",
      "positions": [
        {"longitude": 116.4074, "latitude": 39.9042, "height": 0},
        {"radius": 1000}
      ]
    }
  ],
  "weather": "sunny",
  "camera": {
    "longitude": 116.4074,
    "latitude": 39.9042,
    "height": 1000000,
    "heading": 0,
    "pitch": -90,
    "roll": 0
  },
  "exportTime": "2026-07-14T12:00:00.000Z"
}

在这里插入图片描述

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

项目结构

src/
├── components/
│   ├── CesiumScene.vue    # Cesium 3D 场景核心组件
│   ├── TopMenu.vue        # 顶部菜单组件
│   ├── ModelPanel.vue     # 左侧模型面板
│   ├── MarkerPanel.vue    # 右侧标记面板
│   ├── DrawPanel.vue      # 右侧绘制面板
│   └── PreviewScene.vue   # 预览场景组件
├── App.vue                # 主应用组件
├── main.js                # 入口文件
└── style.css              # 全局样式

环境要求

Node.js 版本

最低版本: Node.js v18.0.0
推荐版本: Node.js v20.x LTS 或更高
说明: 项目使用 ES Module ("type": "module")，需要 Node.js v14.13.0+，但建议使用 v18+ 以获得更好的性能和兼容性。

浏览器兼容

浏览器	最低版本	说明
Chrome	90+	推荐使用，性能最优
Firefox	88+	支持完整功能
Safari	14.1+	支持完整功能
Edge	90+	基于 Chromium，兼容性良好
Opera	76+	支持完整功能