测距优化

ruoyi-ui/src/views/cesiumMap/ContextMenu.vue

@@ -4,8 +4,6 @@
       <div class="menu-item" @click="handleDelete">
         <span class="menu-icon">🗑️</span>
         <span>删除</span>
-        <span>删除</span>
-<!--   111     -->
       </div>
     </div>
 

ruoyi-ui/src/views/cesiumMap/HoverTooltip.vue

@@ -3,10 +3,9 @@
     <div class="tooltip-content">
       {{ content }}
     </div>
-    <span>删除</span>
   </div>
 </template>
-<!--   111     -->
+
 <script>
 export default {
   name: 'HoverTooltip',

ruoyi-ui/src/views/cesiumMap/index.vue

@@ -673,21 +673,36 @@ export default {
           }
           // 如果是线实体，显示长度信息
           if (entityData && entityData.type === 'line') {
-            const length = this.calculateLineLength(entityData.positions)
-            // 根据当前方位角类型计算方位角
-            const bearingType = entityData.bearingType || 'true';
-            const bearing = bearingType === 'magnetic'
-              ? this.calculateMagneticBearing(entityData.positions)
-              : this.calculateTrueBearing(entityData.positions);
-            // 显示小框提示
-            this.hoverTooltip = {
-              visible: true,
-              content: `长度：${length.toFixed(2)} 米\n${bearingType === 'magnetic' ? '磁方位' : '真方位'}：${bearing.toFixed(2)}°`,
-              position: {
-                x: movement.endPosition.x + 10,
-                y: movement.endPosition.y - 10
+            // 找到鼠标悬停在线段的哪一段
+            const segmentIndex = this.findClosestSegment(entityData.positions, movement.endPosition);
+            if (segmentIndex !== -1) {
+              // 计算累计长度（前segmentIndex+1段的长度）
+              let cumulativeLength = 0;
+              for (let i = 0; i < segmentIndex + 1; i++) {
+                if (i < entityData.positions.length - 1) {
+                  cumulativeLength += Cesium.Cartesian3.distance(entityData.positions[i], entityData.positions[i + 1]);
+                }
               }
-            };
+              // 计算当前段的方位角
+              const currentSegmentPositions = [entityData.positions[segmentIndex], entityData.positions[segmentIndex + 1]];
+              // 根据当前方位角类型计算方位角
+              const bearingType = entityData.bearingType || 'true';
+              const bearing = bearingType === 'magnetic'
+                ? this.calculateMagneticBearing(currentSegmentPositions)
+                : this.calculateTrueBearing(currentSegmentPositions);
+              // 显示小框提示
+              this.hoverTooltip = {
+                visible: true,
+                content: `累计长度：${cumulativeLength.toFixed(2)} 米\n${bearingType === 'magnetic' ? '磁方位' : '真方位'}：${bearing.toFixed(2)}°`,
+                position: {
+                  x: movement.endPosition.x + 10,
+                  y: movement.endPosition.y - 10
+                }
+              };
+            } else {
+              // 如果没有找到对应的段，隐藏信息
+              this.hoverTooltip.visible = false;
+            }
           } else {
             // 如果不是线实体，隐藏信息
             this.hoverTooltip.visible = false;
@@ -3016,6 +3031,67 @@ export default {
         this.viewer.destroy()
         this.viewer = null
       }
+    },
+    // 查找鼠标悬停在线段的哪一段
+    findClosestSegment(positions, mousePosition) {
+      if (!positions || positions.length < 2) {
+        return -1;
+      }
+      
+      let closestDistance = Number.MAX_VALUE;
+      let closestSegmentIndex = -1;
+      
+      // 遍历每一段线段
+      for (let i = 0; i < positions.length - 1; i++) {
+        const startPoint = positions[i];
+        const endPoint = positions[i + 1];
+        
+        // 计算鼠标在屏幕上的点到线段的距离
+        const distance = this.distanceToSegment(mousePosition, startPoint, endPoint);
+        
+        // 如果距离小于当前最小距离，更新最小距离和对应的段索引
+        if (distance < closestDistance) {
+          closestDistance = distance;
+          closestSegmentIndex = i;
+        }
+      }
+      
+      // 如果最小距离小于一个阈值，返回对应的段索引
+      const threshold = 10; // 像素阈值
+      return closestDistance < threshold ? closestSegmentIndex : -1;
+    },
+    // 计算鼠标在屏幕上的点到线段的距离
+    distanceToSegment(mousePosition, startPoint, endPoint) {
+      // 将3D点转换为屏幕坐标
+      const startScreen = this.viewer.scene.cartesianToCanvasCoordinates(startPoint);
+      const endScreen = this.viewer.scene.cartesianToCanvasCoordinates(endPoint);
+      
+      if (!startScreen || !endScreen) {
+        return Number.MAX_VALUE;
+      }
+      
+      // 计算线段的向量
+      const lineVec = [endScreen.x - startScreen.x, endScreen.y - startScreen.y];
+      // 计算从线段起点到鼠标点的向量
+      const mouseVec = [mousePosition.x - startScreen.x, mousePosition.y - startScreen.y];
+      
+      // 计算线段的长度平方
+      const lineLengthSquared = lineVec[0] * lineVec[0] + lineVec[1] * lineVec[1];
+      
+      if (lineLengthSquared === 0) {
+        // 线段长度为0，返回鼠标点到线段起点的距离
+        return Math.sqrt(mouseVec[0] * mouseVec[0] + mouseVec[1] * mouseVec[1]);
+      }
+      
+      // 计算鼠标点在直线上的投影参数t
+      const t = Math.max(0, Math.min(1, (mouseVec[0] * lineVec[0] + mouseVec[1] * lineVec[1]) / lineLengthSquared));
+      
+      // 计算投影点
+      const projection = [startScreen.x + t * lineVec[0], startScreen.y + t * lineVec[1]];
+      
+      // 计算鼠标点到投影点的距离
+      const distanceVec = [mousePosition.x - projection[0], mousePosition.y - projection[1]];
+      return Math.sqrt(distanceVec[0] * distanceVec[0] + distanceVec[1] * distanceVec[1]);
     }
   }
 }