在線訪問地址xuzhoulong.github.io/cesium-draw/倉庫地址https://github.com/xuzhoulong/cesium-draw基于 Cesium 的輕量級圖形繪制與編輯工具庫支持畫線、畫點、畫矩形、畫多邊形、畫圓、畫橢圓繪制完成后可自由編輯頂點拖拽 / 整體移動并提供右鍵菜單、事件監(jiān)聽、停止/重新繪制等能力。離線可用、零構(gòu)建依賴、模塊化易擴展。中文 | 使用文檔 | 開發(fā)文檔? 功能特性?六種繪制類型線、點、矩形、多邊形、圓、橢圓面板一鍵切換??編輯能力拖拽頂點修改形狀矩形對角聯(lián)動始終保持矩形按住實體主體整體拖拽移動點擊空白退出編輯、點擊其他實體切換編輯?右鍵菜單開始編輯 / 停止編輯 / 刪除實體事件監(jiān)聽editMovePoint編輯完點、editStop結(jié)束編輯實時返回最新數(shù)據(jù)雙模式調(diào)用回調(diào)success與異步Promise兩種方式獲取繪制結(jié)果?自定義實體 id繪制時傳入id指定實體標(biāo)識沖突自動覆蓋繪制控制停止繪制刪除未完成實體/ 重新繪制清空重畫/ 清空圖層樣式可配默認(rèn)樣式 每次繪制的臨時樣式線寬 / 顏色 / 點大小離線可用內(nèi)置離線 Cesium 與 lil-gui無 CDN 依賴模塊化設(shè)計每種繪制類型獨立模塊擴展新類型只需 3 步? 效果示意線 左鍵加點 → 右鍵撤銷 → 雙擊結(jié)束 矩形 兩點對角實時預(yù)覽 多邊形單擊加點 → 預(yù)覽面實時閉合 → 雙擊定稿 編輯 拖頂點改形狀 / 拖主體整體移動? 技術(shù)棧依賴說明Cesium三維地球渲染離線版 v1.140lil-gui輕量控制面板離線版 v0.19.1原生 JavaScriptES Module無構(gòu)建工具、無 npm 依賴 快速開始環(huán)境要求瀏覽器通過本地靜態(tài)服務(wù)器訪問ES Module 不支持file://直接打開。1. 啟動項目# 項目根目錄啟動靜態(tài)服務(wù)http-server# 瀏覽器訪問 http://localhost:8080打開即可使用右側(cè)面板繪制。2. 集成到你的項目importDrawfrom./js/drawTool.js;importinitGuifrom./js/gui.js;constviewernewCesium.Viewer(map,{baseLayer:false,// 關(guān)閉默認(rèn)底圖避免 token 報錯baseLayerPicker:false,infoBox:false,selectionIndicator:false,});// 添加 XYZ 底圖示例高德路網(wǎng)viewer.imageryLayers.addImageryProvider(newCesium.UrlTemplateImageryProvider({url:https://webrd04.is.autonavi.com/appmaptile?langzh_cnsize1scale1style7x{x}y{y}z{z},}),);// 創(chuàng)建繪制工具實例constdrawnewDraw(viewer,{isAutoEditing:true,// 繪制完自動進入編輯默認(rèn) truestyle:{lineWidth:2,color:#0092ff,pointSize:10},// 默認(rèn)樣式});// 創(chuàng)建 lil-gui 面板右上角按鈕組initGui(draw,viewer); 使用說明面板按鈕點 / 線 / 矩形 / 多邊形 / 圓 / 橢圓 / 停止繪制 / 重新繪制 / 清空圖層繪制交互類型交互完成線單擊加點右鍵刪點虛線實時重繪雙擊結(jié)束點鼠標(biāo)移動預(yù)覽單擊放置矩形兩點對角預(yù)覽實時跟隨第二點點擊多邊形單擊加點預(yù)覽面實時閉合右鍵刪點雙擊閉合圓第一點圓心、第二點半徑點第二點點擊橢圓圓心 → 長半軸點 → 短半軸點第三點點擊編輯操作操作行為按住頂點拖動修改頂點矩形對角聯(lián)動保持矩形按住實體主體拖動整體移動點擊空白退出編輯點擊其他實體切換編輯右鍵實體菜單開始編輯 / 停止編輯 / 刪除 獲取繪制結(jié)果回調(diào) / Promise// 回調(diào)方式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 }事件監(jiān)聽// 編輯完一個點拖拽松手draw.on(editMovePoint,(data)console.log(編輯完點,data));// 結(jié)束編輯draw.on(editStop,(data)console.log(結(jié)束編輯,data));// 移除監(jiān)聽draw.off(editMovePoint,handler);positions為實時引用編輯后直接讀取即最新坐標(biāo)矩形返回推導(dǎo)的 4 角點。?? 配置項Draw 實例newDraw(viewer,{isAutoEditing:false,// 繪制完是否自動進入編輯默認(rèn) truestyle:{lineWidth:2,// 線寬color:#0092ff,// 顏色線/面/點pointSize:10,// 點大小},});startDrawdraw.startDraw({id:customId,// 自定義實體 id不傳自動生成傳了覆蓋同 id 舊實體type:circle,// line / point / rect / polygon / circle / ellipsestyle:{color:#00ff00},// 本次樣式覆蓋默認(rèn)success:(result){...},// 可選與 Promise 二選一}); 目錄結(jié)構(gòu)cesium_draw/ ├── index.html # 頁面入口 ├── js/ │ ├── drawTool.js # 核心類公共方法 / 事件 / 分發(fā) / 編輯 / 菜單 │ ├── drawActions.js # 動作層轉(zhuǎn)發(fā) │ ├── gui.js # lil-gui 面板 │ └── modules/ # 各繪制類型獨立模塊 │ ├── drawLine.js │ ├── drawPoint.js │ ├── drawRect.js │ ├── drawPolygon.js │ ├── drawCircle.js │ └── drawEllipse.js ├── docs/ │ ├── 使用文檔.md # 用戶使用指南 │ └── 開發(fā)文檔.md # 架構(gòu) / API / 擴展 / 避坑 └── libs/ ├── Cesium/ # 離線 Cesium └── lil-gui.js # 離線 lil-gui 擴展開發(fā)新增繪制類型如三角形只需 3 步新建模塊js/modules/drawTriangle.js默認(rèn)導(dǎo)出(ctx, options)完成時調(diào)用ctx.completeShape(shape)注冊js/drawTool.js引入模塊、加委托方法、startDraw分發(fā)加triangle分支加按鈕js/gui.js添加按鈕drawActions.js已統(tǒng)一 type 分發(fā)編輯能力頂點拖拽 / 整體移動 / 右鍵菜單 / 事件自動復(fù)用。詳細(xì)開發(fā)指南與避坑記錄見 開發(fā)文檔。 文檔使用文檔 — 完整使用說明、交互規(guī)則、常見問題開發(fā)文檔 — 架構(gòu)分層、API、擴展步驟、開發(fā)避坑記錄 貢獻(xiàn)歡迎提交 Issue 與 PR建議先閱讀 開發(fā)文檔 了解模塊約定。 LicenseMIT