diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue index 6087fa6..887b4d7 100644 --- a/ruoyi-ui/src/views/cesiumMap/index.vue +++ b/ruoyi-ui/src/views/cesiumMap/index.vue @@ -105,6 +105,11 @@ export default { }, beforeDestroy() { + // 销毁鼠标悬停事件处理器 + if (this.hoverHandler) { + this.hoverHandler.destroy(); + this.hoverHandler = null; + } this.destroyViewer() }, @@ -163,9 +168,10 @@ export default { }) this.initScaleBar() - this.initPointMovement() - this.initRightClickHandler() - console.log('Cesium离线二维地图已加载') + this.initPointMovement() + this.initRightClickHandler() + this.initHoverHandler() + console.log('Cesium离线二维地图已加载') } catch (error) { console.error('地图错误:', error) @@ -219,6 +225,57 @@ export default { } }, Cesium.ScreenSpaceEventType.RIGHT_CLICK) }, + + // 初始化鼠标悬停事件处理器 + initHoverHandler() { + // 创建屏幕空间事件处理器 + this.hoverHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas) + + // 鼠标移动事件:检测是否悬停在线上 + this.hoverHandler.setInputAction((movement) => { + // 如果正在绘制,不处理悬停操作 + if (this.isDrawing) { + return; + } + + const pickedObject = this.viewer.scene.pick(movement.endPosition) + + if (Cesium.defined(pickedObject) && pickedObject.id) { + const pickedEntity = pickedObject.id + + // 查找对应的实体数据 + let entityData = this.allEntities.find(e => e.entity === pickedEntity || e === pickedEntity) + + // 特殊处理:如果悬停的是线段上的点,找到对应的线实体 + if (!entityData) { + // 检查是否是线段上的点 + for (const lineEntity of this.allEntities) { + if (lineEntity.type === 'line' && lineEntity.pointEntities) { + if (lineEntity.pointEntities.includes(pickedEntity)) { + entityData = lineEntity + break + } + } + } + } + + // 如果是线实体,显示长度信息 + if (entityData && entityData.type === 'line') { + const length = this.calculateLineLength(entityData.positions) + this.measurementResult = { + distance: length, + type: 'line' + }; + } else { + // 如果不是线实体,隐藏信息 + this.measurementResult = null; + } + } else { + // 如果没有悬停在任何实体上,隐藏信息 + this.measurementResult = null; + } + }, Cesium.ScreenSpaceEventType.MOUSE_MOVE) + }, showErrorMessage() { const container = document.getElementById('cesiumViewer'); if (container) { @@ -414,6 +471,9 @@ export default { this.initRightClickHandler(); } + // 隐藏测量结果 + this.measurementResult = null; + this.viewer.scene.canvas.style.cursor = 'default'; }, @@ -462,11 +522,24 @@ export default { this.tempEntity = null; this.tempPreviewEntity = null; - // 1. 鼠标移动事件:更新坐标变量 + // 1. 鼠标移动事件:更新坐标变量并实时计算线段长度 this.drawingHandler.setInputAction((movement) => { const newPosition = this.getClickPosition(movement.endPosition); if (newPosition) { this.activeCursorPosition = newPosition; + + // 当已经有至少一个点时,实时计算线段长度 + if (this.drawingPoints.length > 0) { + // 计算从最后一个点到当前鼠标位置的线段长度 + const tempPositions = [...this.drawingPoints, newPosition]; + const length = this.calculateLineLength(tempPositions); + + // 更新测量结果,显示实时长度 + this.measurementResult = { + distance: length, + type: 'line' + }; + } } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);