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