在线访问地址xuzhoulong.github.io/cesium-draw/仓库地址https://github.com/xuzhoulong/cesium-draw基于 Cesium 的轻量级图形绘制与编辑工具库支持画线、画点、画矩形、画多边形、画圆、画椭圆绘制完成后可自由编辑顶点拖拽 / 整体移动并提供右键菜单、事件监听、停止/重新绘制等能力。离线可用、零构建依赖、模块化易扩展。中文 | 使用文档 | 开发文档✨ 功能特性️六种绘制类型线、点、矩形、多边形、圆、椭圆面板一键切换✏️编辑能力拖拽顶点修改形状矩形对角联动始终保持矩形按住实体主体整体拖拽移动点击空白退出编辑、点击其他实体切换编辑️右键菜单开始编辑 / 停止编辑 / 删除实体事件监听editMovePoint编辑完点、editStop结束编辑实时返回最新数据双模式调用回调success与异步Promise两种方式获取绘制结果️自定义实体 id绘制时传入id指定实体标识冲突自动覆盖绘制控制停止绘制删除未完成实体/ 重新绘制清空重画/ 清空图层样式可配默认样式 每次绘制的临时样式线宽 / 颜色 / 点大小离线可用内置离线 Cesium 与 lil-gui无 CDN 依赖模块化设计每种绘制类型独立模块扩展新类型只需 3 步️ 效果示意线 左键加点 → 右键撤销 → 双击结束 矩形 两点对角实时预览 多边形单击加点 → 预览面实时闭合 → 双击定稿 编辑 拖顶点改形状 / 拖主体整体移动️ 技术栈依赖说明Cesium三维地球渲染离线版 v1.140lil-gui轻量控制面板离线版 v0.19.1原生 JavaScriptES Module无构建工具、无 npm 依赖 快速开始环境要求浏览器通过本地静态服务器访问ES Module 不支持file://直接打开。1. 启动项目# 项目根目录启动静态服务http-server# 浏览器访问 http://localhost:8080打开即可使用右侧面板绘制。2. 集成到你的项目importDrawfrom./js/drawTool.js;importinitGuifrom./js/gui.js;constviewernewCesium.Viewer(map,{baseLayer:false,// 关闭默认底图避免 token 报错baseLayerPicker:false,infoBox:false,selectionIndicator:false,});// 添加 XYZ 底图示例高德路网viewer.imageryLayers.addImageryProvider(newCesium.UrlTemplateImageryProvider({url:https://webrd04.is.autonavi.com/appmaptile?langzh_cnsize1scale1style7x{x}y{y}z{z},}),);// 创建绘制工具实例constdrawnewDraw(viewer,{isAutoEditing:true,// 绘制完自动进入编辑默认 truestyle:{lineWidth:2,color:#0092ff,pointSize:10},// 默认样式});// 创建 lil-gui 面板右上角按钮组initGui(draw,viewer); 使用说明面板按钮点 / 线 / 矩形 / 多边形 / 圆 / 椭圆 / 停止绘制 / 重新绘制 / 清空图层绘制交互类型交互完成线单击加点右键删点虚线实时重绘双击结束点鼠标移动预览单击放置矩形两点对角预览实时跟随第二点点击多边形单击加点预览面实时闭合右键删点双击闭合圆第一点圆心、第二点半径点第二点点击椭圆圆心 → 长半轴点 → 短半轴点第三点点击编辑操作操作行为按住顶点拖动修改顶点矩形对角联动保持矩形按住实体主体拖动整体移动点击空白退出编辑点击其他实体切换编辑右键实体菜单开始编辑 / 停止编辑 / 删除 获取绘制结果回调 / Promise// 回调方式draw.startDraw({type:line,id:myLine,style:{color:#ff0000},success:(result)console.log(result.id,result.positions,result.type),});// 异步方式constresultawaitdraw.startDraw({type:rect});// result { id, positions, type }事件监听// 编辑完一个点拖拽松手draw.on(editMovePoint,(data)console.log(编辑完点,data));// 结束编辑draw.on(editStop,(data)console.log(结束编辑,data));// 移除监听draw.off(editMovePoint,handler);positions为实时引用编辑后直接读取即最新坐标矩形返回推导的 4 角点。⚙️ 配置项Draw 实例newDraw(viewer,{isAutoEditing:false,// 绘制完是否自动进入编辑默认 truestyle:{lineWidth:2,// 线宽color:#0092ff,// 颜色线/面/点pointSize:10,// 点大小},});startDrawdraw.startDraw({id:customId,// 自定义实体 id不传自动生成传了覆盖同 id 旧实体type:circle,// line / point / rect / polygon / circle / ellipsestyle:{color:#00ff00},// 本次样式覆盖默认success:(result){...},// 可选与 Promise 二选一}); 目录结构cesium_draw/ ├── index.html # 页面入口 ├── js/ │ ├── drawTool.js # 核心类公共方法 / 事件 / 分发 / 编辑 / 菜单 │ ├── drawActions.js # 动作层转发 │ ├── gui.js # lil-gui 面板 │ └── modules/ # 各绘制类型独立模块 │ ├── drawLine.js │ ├── drawPoint.js │ ├── drawRect.js │ ├── drawPolygon.js │ ├── drawCircle.js │ └── drawEllipse.js ├── docs/ │ ├── 使用文档.md # 用户使用指南 │ └── 开发文档.md # 架构 / API / 扩展 / 避坑 └── libs/ ├── Cesium/ # 离线 Cesium └── lil-gui.js # 离线 lil-gui 扩展开发新增绘制类型如三角形只需 3 步新建模块js/modules/drawTriangle.js默认导出(ctx, options)完成时调用ctx.completeShape(shape)注册js/drawTool.js引入模块、加委托方法、startDraw分发加triangle分支加按钮js/gui.js添加按钮drawActions.js已统一 type 分发编辑能力顶点拖拽 / 整体移动 / 右键菜单 / 事件自动复用。详细开发指南与避坑记录见 开发文档。 文档使用文档 — 完整使用说明、交互规则、常见问题开发文档 — 架构分层、API、扩展步骤、开发避坑记录 贡献欢迎提交 Issue 与 PR建议先阅读 开发文档 了解模块约定。 LicenseMIT