增加线的悬停显示

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);