在線訪問地址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