/** * 绘制管理器 * 职责：管理测区的交互绘制流程（点/线/面）、尺规与标签生成、完成时回调 */ export class DrawManager { /** * 构造函数 * @param {Cesium.Viewer} viewer Cesium Viewer 实例 * @param {EntityFactory} entityFactory 实体工厂 * @param {LabelManager} labelManager 标签管理器 * @param {EventHub} eventHub 事件中心 */ constructor(viewer, entityFactory, labelManager, eventHub) { this.viewer = viewer this.entityFactory = entityFactory this.labelManager = labelManager this.eventHub = eventHub /** * 内部状态 * - activeShapePoints: 已确认的顶点集合 * - floatingPoint: 鼠标移动中的浮动点 * - activeShape: 绘制完成后的面实体 * - polylineEntity: 绘制中的折线实体 * - polygonPositionList: 面的四个顶点 * - labels: 距离与角度标签的实体引用 * - angletext: 当前角度文本 * - centerPoint: 面中心点（预留） * - formatter: 距离格式化方法 */ this.state = { activeShapePoints: [], floatingPoint: null, activeShape: null, polylineEntity: null, polygonPositionList: [], labels: { d01: null, d12: null, d23: null, d34: null, angle: null }, angletext: 0, centerPoint: null, formatter: (m) => `${m} m` } } /** * 设置距离文本格式化函数 * @param {(m:number)=>string} fn 格式化方法 */ setFormatter (fn) { if (typeof fn === 'function') this.state.formatter = fn } /** * 绕 B 点按给定角度旋转 A 点（局部 ENU 坐标系） * @param {Cesium.Cartesian3} position_A 原点 A * @param {Cesium.Cartesian3} position_B 旋转中心 B * @param {number} angle 角度（度） * @returns {Cesium.Cartesian3} 旋转后的点 */ rotatedPointByAngle (position_A, position_B, angle) { const localToWorld_Matrix = Cesium.Transforms.eastNorthUpToFixedFrame(position_B) const worldToLocal_Matrix = Cesium.Matrix4.inverse(localToWorld_Matrix, new Cesium.Matrix4()) const localPosition_B = Cesium.Matrix4.multiplyByPoint(worldToLocal_Matrix, position_B, new Cesium.Cartesian3()) const localPosition_A = Cesium.Matrix4.multiplyByPoint(worldToLocal_Matrix, position_A, new Cesium.Cartesian3()) const new_x = localPosition_A.x * Math.cos(Cesium.Math.toRadians(angle)) + localPosition_A.y * Math.sin(Cesium.Math.toRadians(angle)) const new_y = localPosition_A.y * Math.cos(Cesium.Math.toRadians(angle)) - localPosition_A.x * Math.sin(Cesium.Math.toRadians(angle)) const new_z = localPosition_A.z return Cesium.Matrix4.multiplyByPoint(localToWorld_Matrix, new Cesium.Cartesian3(new_x, new_y, new_z), new Cesium.Cartesian3()) } /** * 创建绘制阶段的量尺与刻度（基于前两点） * @param {Cesium.Cartesian3} p0 第一个点 * @param {Cesium.Cartesian3} p1 第二个点 */ createAngleRuler (p0, p1) { const viewer = this.viewer const vector01 = Cesium.Cartesian3.subtract(p1, p0, new Cesium.Cartesian3()) const normalize = Cesium.Cartesian3.normalize(vector01, new Cesium.Cartesian3()) const radius = Cesium.Cartesian3.distance(p0, p1) / 4 const centerVectorZ = Cesium.Cartesian3.add(Cesium.Cartesian3.multiplyByScalar(normalize, radius, new Cesium.Cartesian3()), p1, new Cesium.Cartesian3()) const rotate = this.rotatedPointByAngle(centerVectorZ, p1, -90) const radius1 = Cesium.Cartesian3.distance(p0, p1) / 4.3 const centerVectorZ1 = Cesium.Cartesian3.add(Cesium.Cartesian3.multiplyByScalar(normalize, radius1, new Cesium.Cartesian3()), p1, new Cesium.Cartesian3()) const rotate1 = this.rotatedPointByAngle(centerVectorZ1, p1, -90) const radius2 = Cesium.Cartesian3.distance(p0, p1) / 4 / 3.5 * 2.5 const centerVectorZ2 = Cesium.Cartesian3.add(Cesium.Cartesian3.multiplyByScalar(normalize, radius2, new Cesium.Cartesian3()), p1, new Cesium.Cartesian3()) const rotate2 = this.rotatedPointByAngle(centerVectorZ2, p1, -90) const panSpinZoom = (normal, angle, rotater) => { const axis = Cesium.Quaternion.fromAxisAngle(normal, Cesium.Math.toRadians(angle)) const quater = Cesium.Matrix3.fromQuaternion(axis) const fromRotater = Cesium.Matrix4.fromRotationTranslation(quater) const subtract = Cesium.Cartesian3.subtract(p1, rotater, new Cesium.Cartesian3()) const matrix4 = Cesium.Matrix4.multiplyByPoint(fromRotater, subtract, new Cesium.Cartesian3()) return Cesium.Cartesian3.add(matrix4, p1, new Cesium.Cartesian3()) } let angleList = [] for (let angle = 180; angle <= 360; angle += 5) angleList.push(panSpinZoom(normalize, angle, rotate)) viewer.entities.add({ id: 'ruler1', polyline: { positions: angleList, width: 1, arcType: Cesium.ArcType.NONE, material: Cesium.Color.fromCssColorString('#aeff00') } }) for (let angle = 180; angle <= 360; angle += 15) { const tick = (angle - 180) / 5 viewer.entities.add({ id: 'tick' + tick, polyline: { positions: [panSpinZoom(normalize, angle, rotate1), angleList[tick]], width: 1, arcType: Cesium.ArcType.NONE, material: Cesium.Color.fromCssColorString('#aeff00') } }) } const vector02 = Cesium.Cartesian3.subtract(angleList[0], angleList[angleList.length - 1], new Cesium.Cartesian3()) const cross = Cesium.Cartesian3.cross(vector01, vector02, new Cesium.Cartesian3()) const normali = Cesium.Cartesian3.normalize(cross, new Cesium.Cartesian3()) const plane = Cesium.Plane.fromPointNormal(p1, normali) let angleList1 = [] for (let angle = 180; angle <= 260; angle += 5) angleList1.push(panSpinZoom(normalize, angle, rotate2)) const projectedPoint = Cesium.Plane.projectPointOntoPlane(plane, angleList1[angleList1.length - 1], new Cesium.Cartesian3()) angleList1.push(projectedPoint) this.viewer.entities.add({ id: 'ruler2', polyline: { positions: angleList1, width: 1, arcType: Cesium.ArcType.NONE, material: Cesium.Color.fromCssColorString('#aeff00') } }) let angleList2 = [] for (let angle = 280; angle <= 360; angle += 5) angleList2.push(panSpinZoom(normalize, angle, rotate2)) const projectedPoint1 = Cesium.Plane.projectPointOntoPlane(plane, angleList2[0], new Cesium.Cartesian3()) angleList2.unshift(projectedPoint1) this.viewer.entities.add({ id: 'ruler3', polyline: { positions: angleList2, width: 1, arcType: Cesium.ArcType.NONE, material: Cesium.Color.fromCssColorString('#aeff00') } }) } /** * 清理当前绘制中的所有标签引用并重置状态 */ clearLabels () { const { d01, d12, d23, d34, angle } = this.state.labels ;[d01, d12, d23, d34, angle].forEach(l => { if (l) this.viewer.entities.remove(l) }) this.state.labels = { d01: null, d12: null, d23: null, d34: null, angle: null } } /** * 刷新绘制过程中的距离与角度标签 */ updateLabels () { this.clearLabels() const { activeShapePoints, floatingPoint, formatter } = this.state const label = this.labelManager const activePoints = [...activeShapePoints, floatingPoint] if (activePoints.length >= 2) { const middle01 = Cesium.Cartesian3.midpoint(activePoints[0], activePoints[1], new Cesium.Cartesian3()) const distance01 = Cesium.Cartesian3.distance(activePoints[0], activePoints[1]) this.state.labels.d01 = label.createLabel(middle01, `${formatter(distance01)}`, false, 'distanceLabel01') } if (activePoints.length >= 3) { const middle12 = Cesium.Cartesian3.midpoint(activePoints[1], activePoints[2], new Cesium.Cartesian3()) const distance12 = Cesium.Cartesian3.distance(activePoints[1], activePoints[2]) this.state.labels.d12 = label.createLabel(middle12, `${formatter(distance12)}`, false, 'distanceLabel12') const rotate = this.rotatedPointByAngle(activePoints[0], activePoints[1], 90) const vector21 = Cesium.Cartesian3.subtract(activePoints[2], activePoints[1], new Cesium.Cartesian3()) const vectorRotate1 = Cesium.Cartesian3.subtract(rotate, activePoints[1], new Cesium.Cartesian3()) const angle = Cesium.Math.toDegrees(Cesium.Cartesian3.angleBetween(vectorRotate1, vector21)) const c1 = Cesium.Cartographic.fromCartesian(activePoints[1]) const c2 = Cesium.Cartographic.fromCartesian(activePoints[2]) if (c1.height < c2.height) { this.state.angletext = angle; this.state.polylineEntity.polyline.material = Cesium.Color.fromCssColorString('#2987f0') } else { this.state.polylineEntity.polyline.material = new Cesium.PolylineDashMaterialProperty({ color: Cesium.Color.fromCssColorString('#2987f0') }); this.state.angletext = 360 - angle } this.state.labels.angle = label.createLabel(activePoints[2], `${this.state.angletext.toFixed(1)}°`, true, 'angleLabel') } if (activePoints.length >= 4) { const middle23 = Cesium.Cartesian3.midpoint(this.state.polygonPositionList[2], this.state.polygonPositionList[3], new Cesium.Cartesian3()) const distance23 = Cesium.Cartesian3.distance(this.state.polygonPositionList[2], this.state.polygonPositionList[3]) this.state.labels.d23 = label.createLabel(middle23, `${formatter(distance23)}`, false, 'distanceLabel23') const middle34 = Cesium.Cartesian3.midpoint(this.state.polygonPositionList[3], this.state.polygonPositionList[0], new Cesium.Cartesian3()) const distance34 = Cesium.Cartesian3.distance(this.state.polygonPositionList[3], this.state.polygonPositionList[0]) this.state.labels.d34 = label.createLabel(middle34, `${formatter(distance34)}`, false, 'distanceLabel34') } } /** * 开始绘制交互（注册 LEFT_CLICK / MOUSE_MOVE），完成后回调 onComplete * @param {(polygon:Cesium.Cartesian3[],activeShape:Cesium.Entity)=>void} onComplete 完成回调 */ start (onComplete) { const viewer = this.viewer const drawHandler = this.eventHub.get('draw') drawHandler.setInputAction((event) => { const s = this.state if (!s._isDraw) s._isDraw = true if (!s._isDraw) return const earthPosition = viewer.scene.pickPosition(event.position) if (!Cesium.defined(earthPosition)) return if (s.activeShapePoints.length === 0) { s.floatingPoint = earthPosition s.polylineEntity = this.entityFactory.drawLine(new Cesium.CallbackProperty(() => { if (!Cesium.defined(s.floatingPoint)) return [] const activePoints = [...s.activeShapePoints, s.floatingPoint] if (activePoints.length >= 3) { const [p0, p1, p2] = activePoints const vector21 = Cesium.Cartesian3.subtract(p2, p1, new Cesium.Cartesian3()) const p3 = Cesium.Cartesian3.add(p0, vector21, new Cesium.Cartesian3()) return [p0, p1, p2, p3, p0] } return activePoints }, false)) } const activePoints = [...s.activeShapePoints, s.floatingPoint] if (activePoints.length === 2) this.createAngleRuler(activePoints[0], activePoints[1]) if (activePoints.length >= 3) { const [p0, p1, p2] = activePoints const vector21 = Cesium.Cartesian3.subtract(p2, p1, new Cesium.Cartesian3()) const p3 = Cesium.Cartesian3.add(p0, vector21, new Cesium.Cartesian3()) viewer.entities.remove(s.polylineEntity) s.polygonPositionList = [p0, p1, p2, p3] s.activeShape = this.entityFactory.drawShape(s.polygonPositionList) this.entityFactory.removeEntityByPrefix('ruler') this.entityFactory.removeEntityByPrefix('tick') this.eventHub.destroy('draw') if (typeof onComplete === 'function') onComplete(s.polygonPositionList, s.activeShape) s._isDraw = false } s.activeShapePoints.push(earthPosition) this.updateLabels() if (activePoints.length >= 3) { this.labelManager.removeLabelById('angleLabel') } }, Cesium.ScreenSpaceEventType.LEFT_CLICK) drawHandler.setInputAction((event) => { const s = this.state if (!s.floatingPoint) return const newPosition = viewer.scene.pickPosition(event.endPosition) if (!Cesium.defined(newPosition)) return s.floatingPoint = newPosition if (s.activeShapePoints.length >= 2) { const ray = viewer.camera.getPickRay(event.endPosition) if (ray) { const [p0, p1] = s.activeShapePoints const planeNormal = Cesium.Cartesian3.subtract(p1, p0, new Cesium.Cartesian3()) const plane = Cesium.Plane.fromPointNormal(p1, Cesium.Cartesian3.normalize(planeNormal, new Cesium.Cartesian3())) const intersection = Cesium.IntersectionTests.rayPlane(ray, plane) if (intersection) s.floatingPoint = intersection } } this.updateLabels() }, Cesium.ScreenSpaceEventType.MOUSE_MOVE) } }