一个基于 Vue 3 + Cesium 的地图标绘编辑器，支持各种标绘资源拖放、绘制、属性编辑。 本工程完全使用AI自行编写代码。
- 支持地图标绘（点、线、面、模型等多类型），可在三维标绘环境中自由绘制和编辑；
- 资源面板拖拽标绘对象到地图，自动计算地理坐标；
- 标绘对象属性可视化编辑，支持基础属性和自定义扩展属性；
- 集成虚拟文件系统（VFS），支持标绘资源的管理、导入导出；
- 标绘环境管理：支持多标绘环境切换、实体添加/删除、地理坐标拾取；
- 标绘数据采用GeoJSON标准并扩展专用属性，便于数据交换与兼容；
- 支持地形、大气、光照等多种Cesium渲染效果；
- 完全AI驱动开发，代码自动生成，便于快速迭代和扩展。
- 前端框架: Vue 3 + Vite
- 3D引擎: Cesium
- 构建工具: Vite
- 样式: Sass
- 网络请求: Fetch API
- 工具库:
- Element Plus - 主流UI组件库
- Lodash - 实用工具函数库
- Day.js - 轻量级日期时间库
- Cesium - Cesium三维地图引擎 dc-sdk - 基于Cesium二次开发的WebGIS三维引擎（直接引用源代码）
- turf - 空间分析与地理数据处理库，支持缓冲区、测距等空间计算
- proj4 - 坐标投影转换库，实现不同坐标系间的转换与适配
plotting-editor-by-ai/
├── dc-sdk/ # dc-sdk源代码
├── src/
│ ├── components/ # Vue 组件
│ │ ├── editor/ # 编辑器 UI 组件
│ │ │ ├── PropertyPanel.vue # 属性面板
│ │ │ ├── Toolbar.vue # 工具栏（支持新建、暂存、导出、导入标绘，集成localStorage与GeoJSON）
│ │ │ ├── EditorFooter.vue # 编辑器底部状态栏
│ │ │ ├── ResourcePanel.vue # 资源面板
│ │ │ ├── ResourceBrowser.vue # 标绘资源浏览组件（点击选择资源，配合useDrawing管理绘制状态）
│ │ │ ├── VfsFileBrowser.vue # 虚拟文件系统面板
│ │ │ ├── Inspector.vue # 对象检查器
│ │ ├── property/ # 各种属性编辑组件
│ │ │ ├── PlotPropertyPane.vue # 标绘环境属性编辑面板
│ │ │ ├── BasePropertyPane.vue # 对象基础属性编辑面板
│ │ ├── dialog/ # 各类对话框组件
│ │ │ ├── EditorConfigDialog.vue # 编辑器配置对话框
│ │ ├── cesium/ # 3D 标绘环境组件
│ │ │ ├── CesiumViewer.vue # 地图环境主视图（初始化后自动加载localStorage暂存标绘信息）
│ ├── composables/ # Vue Composition API 可组合函数
│ │ ├── useViewer.js # Cesium Viewer对象管理
│ │ ├── useObjectSelection.js # 对象选择功能
│ │ ├── useAssets.js # 资源管理
│ │ ├── useEditorConfig.js # 编辑器配置响应式状态与操作方法
│ │ ├── useDrawing.js # 绘制状态管理（currentDrawing，设置/清空绘制资源）
│ ├── core/ # 核心 Cesium 逻辑
│ │ ├── PlotManager.js # 标绘信息管理器
│ │ ├── ObjectManager.js # 对象管理器
│ ├── services/ # 数据请求和外部接口
│ │ ├── static-drive-api.js # 静态文件系统封装
│ │ ├── vfs-server-api.js # 虚拟文件系统封装
│ │ ├── vfs-service.js # 虚拟文件系统服务
│ ├── utils/ # 工具函数
│ │ ├── mathUtils.js # 数学工具
│ │ ├── geometryUtils.js # 几何工具
│ │ ├── fileUtils.js # 文件处理工具
│ ├── constants/ # 常量定义
│ │ ├── DEFAULT_VIEWER_OPTIONS.js # 默认Viewer配置
│ │ ├── DEFAULT_CENTER.js # 默认中心点配置
│ │ ├── DEFAULT_CAMERA.js # 默认相机配置
│ │ ├── RESOURCES.json # 标绘资源定义（类型、名称、图标等）
│ ├── App.vue # 根组件（仅负责引入Editor.vue）
│ ├── Editor.vue # 主编辑器组件（包含全部业务与UI）
│ ├── main.js # 应用入口
│ ├── main-func.js # 应用入口文件相关的功能函数
│ ├── style.scss # 全局样式
├── public/ # 存放无需构建的静态资源
│ ├── images/ # 图片资源目录
│ ├── vfs/ # 静态资源目录（虚拟文件系统）
├── script/ # 脚本
│ ├── package.json # 脚本子项目配置
│ ├── generate-vfs.js # 脚本：生成虚拟文件系统的元数据
│ ├── vfs-server.js # 脚本：虚拟文件系统后端服务
├── index.html # HTML 模板
├── package.json # 项目配置
├── vite.config.js # Vite 配置
├── README.md # 项目说明
├── CESIUM_CHANGELOG.md # Cesium 版本更新日志
- 主编辑器组件 (
Editor.vue): 负责所有业务逻辑和UI的集成 - UI 层 (
components/editor/,components/dialog/): 负责用户界面和交互 - 地图渲染层 (
components/scene/): 处理 Cesium 地图场景渲染和显示 - 逻辑层 (
composables/,core/): 业务逻辑和状态管理 - 服务层 (
services/): 数据请求和外部接口 - 工具层 (
utils/): 通用工具函数
- 响应式状态: 使用 Vue 3 Composition API 管理应用状态
- 模块化设计: 清晰的代码组织和职责分离
- Cesium 集成: 基于 Cesium（^1.132），使用最新 API（移除 ready/readyPromise，使用 baseLayer 等）
- 类型安全: 良好的代码结构支持 TypeScript 迁移
- 性能优化: 合理的组件懒加载和渲染优化
- 使用
baseLayer替代imageryProvider - 移除对
ready和readyPromise的依赖 - 使用
Scene.verticalExaggeration替代Globe.terrainExaggeration - 采用 ESM 模块化，不依赖内置 RequireJS
- 遵循 Vue 3 组合式 API 最佳实践
- 使用 ES6+ 语法特性
- 组件命名采用 PascalCase
- 文件和目录命名采用 camelCase
- Git 提交信息格式:
feat: 功能描述
- 使用GeoJSON作为标绘信息的数据结构
- 在GeoJSON数据结构的基础上增加一些该编辑器专用的附加信息
- 标绘信息数据结构如下：
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": { // 遵循GeoJSON标准的地理信息
"type": "Point",
"coordinates": [116.4, 39.9]
},
"properties": {
"id": "ID",
"name": "名称",
...<遵循GeoJSON标准的要素属性信息>
},
"userData": {
...<编辑器专用的要素附加信息>
}
}
],
"userData": {
...<编辑器专用的标绘附加信息>
}
}- 标绘环境管理器（PlotManager.js）支持以下数据操作流程：
- clearPlot(): 清空标绘环境所有实体
- exportPlot(): 导出标绘环境数据为GeoJSON+userData结构，Feature和FeatureCollection均支持userData字段，便于扩展和编辑器专用信息存储
- loadPlot(json): 加载GeoJSON结构标绘环境数据，根据json内容重建实体
- 基于 Cesium的标绘环境初始化和管理
- 支持实体的添加、删除和管理
- 提供地理坐标拾取功能
- 集成地形、大气、光照等渲染效果
- 资源面板（ResourceBrowser.vue）展示所有可用标绘资源，点击资源后进入绘制状态（currentDrawing）。
- 资源类型定义见src/constants/RESOURCES.json，支持point、line、polygon等类型。
- 通过useDrawing.js统一管理当前绘制资源状态。
- 不同资源类型的地图绘制方式如下：
- point（点）：点击地图任意位置，直接添加一个点实体。
- 其它类型（如line、polygon等）：暂未实现，后续扩展。
- 取消原有拖拽放置方式，统一通过点击资源+地图操作实现标绘。
- 支持从资源面板拖拽标绘对象到地图
- 自动计算放置位置的地理坐标
- 支持点、线、面、模型等多种标绘类型
- 本工程基本使用AI自行编写代码；
- 开发环境：VSCode + Cline + GitHub Copilot + Claude 4 / GPT-4.1
- .clinerules目录：存储AI规则
- .clinetask目录：存储历史对话