Cesium@1.138中实现交互式多边形绘制与编辑工具类

/** * Cesium 交互式多边形绘制与编辑工具类草绿色系版 */ class PolygonDrawer { constructor(Cesium, viewer, options {}) { this.Cesium Cesium; this.viewer viewer; this.onFinish options.onFinish || (() {}); this.onEdit options.onEdit || (() {}); // 核心修改将默认填充色改为草绿色系带透明度 this.fillColor options.fillColor || this.Cesium.Color.fromCssColorString(#7CFC00).withAlpha(0.2); this.outlineColor options.fillColor || this.Cesium.Color.fromCssColorString(#7CFC00).withAlpha(1); this.pointColor options.pointColor || this.Cesium.Color.RED; // 使用自定义方法计算高饱和度颜色 const outlineColor this._getHighSaturationColor(this.outlineColor); // 创建高饱和度的虚线材质用于 Polyline 边框 this.outlineMaterial new this.Cesium.PolylineDashMaterialProperty({ color: outlineColor, dashLength: 16.0 }); // 内部状态 this.positions []; this.floatingPoint null; this.pointEntities []; this.polygonEntity null; this.outlinePolylineEntity null; // 专门用于显示边框的 Polyline Entity this.handler null; this.isDrawing false; this.isEditing false; // 拖拽状态变量 this.draggedPointIndex null; this.editHandler null; } /** * 将 Cesium.Color 转换为 HSL 空间提取色相并将饱和度设为 100% * private */ _getHighSaturationColor(cesiumColor) { const r cesiumColor.red; const g cesiumColor.green; const b cesiumColor.blue; const a cesiumColor.alpha; const max Math.max(r, g, b); const min Math.min(r, g, b); let h 0, s 0; const l (max min) / 2; if (max ! min) { const d max - min; s l 0.5 ? d / (2 - max - min) : d / (max min); switch (max) { case r: h ((g - b) / d (g b ? 6 : 0)) / 6; break; case g: h ((b - r) / d 2) / 6; break; case b: h ((r - g) / d 4) / 6; break; } } s 1.0; // 强制饱和度为 100% let r2, g2, b2; if (s 0) { r2 g2 b2 l; } else { const hue2rgb (p, q, t) { if (t 0) t 1; if (t 1) t - 1; if (t 1/6) return p (q - p) * 6 * t; if (t 1/2) return q; if (t 2/3) return p (q - p) * (2/3 - t) * 6; return p; }; const q l 0.5 ? l * (1 s) : l s - l * s; const p 2 * l - q; r2 hue2rgb(p, q, h 1/3); g2 hue2rgb(p, q, h); b2 hue2rgb(p, q, h - 1/3); } return new this.Cesium.Color(r2, g2, b2, a); } /** * 开始绘制 */ start() { if (this.isDrawing) return; this.positions []; this.pointEntities []; this.floatingPoint null; this.isDrawing true; this.isEditing false; this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction( this.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK ); // 1. 创建动态填充多边形 Entity this.polygonEntity this.viewer.entities.add({ polygon: { hierarchy: new this.Cesium.CallbackProperty(() { if (this.positions.length 2) return new this.Cesium.PolygonHierarchy([]); const pts this.floatingPoint ? this.positions.concat([this.floatingPoint]) : this.positions; return new this.Cesium.PolygonHierarchy(pts); }, false), material: this.fillColor, outline: false, // 关闭默认边框交由独立的 Polyline 处理 clampToGround: true } }); // 2. 创建动态边框 Polyline Entity this.outlinePolylineEntity this.viewer.entities.add({ polyline: { positions: new this.Cesium.CallbackProperty(() { if (this.positions.length 2) return []; const pts this.floatingPoint ? this.positions.concat([this.floatingPoint]) : this.positions; // 闭合多边形边框将第一个点追加到末尾 return [...pts, pts[0]]; }, false), width: 1, material: this.outlineMaterial, clampToGround: true } }); this.handler new this.Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); this._bindDrawEvents(); } /** * 绑定绘制阶段的交互事件 * private */ _bindDrawEvents() { this.handler.setInputAction((click) { const cartesian this.viewer.scene.pickPosition(click.position); if (!cartesian) return; this.positions.push(cartesian); const point this.viewer.entities.add({ position: cartesian, point: { pixelSize: 6, color: this.pointColor, outlineColor: this.Cesium.Color.WHITE, outlineWidth: 2, disableDepthTestDistance: Number.POSITIVE_INFINITY } }); this.pointEntities.push(point); }, this.Cesium.ScreenSpaceEventType.LEFT_CLICK); this.handler.setInputAction((movement) { if (this.positions.length 0) return; const p this.viewer.scene.pickPosition(movement.endPosition); if (p) this.floatingPoint p; }, this.Cesium.ScreenSpaceEventType.MOUSE_MOVE); const finish () this.finish(); this.handler.setInputAction(finish, this.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); this.handler.setInputAction(finish, this.Cesium.ScreenSpaceEventType.RIGHT_CLICK); } /** * 结束绘制并自动进入编辑模式 */ finish() { if (!this.isDrawing) return; this.floatingPoint null; this.isDrawing false; if (this.handler) { this.handler.destroy(); this.handler null; } console.log(✅ 多边形绘制完成最终顶点数量:, this.positions.length); this.onFinish(this.positions); this._startEditing(); } /** * 开启拖拽编辑模式 * private */ _startEditing() { if (this.isEditing || this.pointEntities.length 0) return; this.isEditing true; this.editHandler new this.Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); this.editHandler.setInputAction((click) { const picked this.viewer.scene.pick(click.position); if (this.Cesium.defined(picked) picked.id) { const index this.pointEntities.indexOf(picked.id); if (index ! -1) { this.draggedPointIndex index; this.viewer.scene.canvas.style.cursor move; this.viewer.scene.screenSpaceCameraController.enableInputs false; } } }, this.Cesium.ScreenSpaceEventType.LEFT_DOWN); this.editHandler.setInputAction((movement) { if (this.draggedPointIndex null) return; const ray this.viewer.camera.getPickRay(movement.endPosition); const cartesian this.viewer.scene.globe.pick(ray, this.viewer.scene); if (cartesian) { this.positions[this.draggedPointIndex] cartesian; this.pointEntities[this.draggedPointIndex].position new this.Cesium.CallbackProperty( () cartesian, false ); } }, this.Cesium.ScreenSpaceEventType.MOUSE_MOVE); this.editHandler.setInputAction(() { if (this.draggedPointIndex ! null) { this.draggedPointIndex null; this.viewer.scene.canvas.style.cursor ; this.viewer.scene.screenSpaceCameraController.enableInputs true; console.log(✏️ 多边形顶点编辑完成最新坐标:, this.positions); this.onEdit(this.positions); } }, this.Cesium.ScreenSpaceEventType.LEFT_UP); } /** * 清除当前绘制的所有实体 */ clear() { this.pointEntities.forEach((e) this.viewer.entities.remove(e)); this.pointEntities []; this.positions []; this.floatingPoint null; } /** * 完全销毁工具实例 */ destroy() { this.isEditing false; if (this.editHandler) { this.editHandler.destroy(); this.editHandler null; } this.viewer.scene.canvas.style.cursor ; this.viewer.scene.screenSpaceCameraController.enableInputs true; if (this.handler) { this.handler.destroy(); this.handler null; } this.clear(); if (this.polygonEntity) { this.viewer.entities.remove(this.polygonEntity); this.polygonEntity null; } // 销毁边框 Polyline Entity if (this.outlinePolylineEntity) { this.viewer.entities.remove(this.outlinePolylineEntity); this.outlinePolylineEntity null; } } } export default PolygonDrawer;const d new PolygonDrawer(Cesium, viewer); d.start();