绘制线段以及线段的悬停展示

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

@@ -17,6 +17,15 @@
       :result="measurementResult"
       @close="measurementResult = null"
     />
+    <hover-tooltip
+      v-if="hoverTooltip.visible"
+      :visible="hoverTooltip.visible"
+      :content="hoverTooltip.content"
+      :style="{
+        left: hoverTooltip.position.x + 'px',
+        top: hoverTooltip.position.y + 'px'
+      }"
+    />
   </div>
 </template>
 <script>
@@ -24,6 +33,7 @@ import * as Cesium from 'cesium'
 import 'cesium/Build/Cesium/Widgets/widgets.css'
 import DrawingToolbar from './DrawingToolbar.vue'
 import MeasurementPanel from './MeasurementPanel.vue'
+import HoverTooltip from './HoverTooltip.vue'
 import axios from 'axios'
 import request from '@/utils/request'
 import { getToken } from '@/utils/auth'
@@ -74,6 +84,12 @@ export default {
       selectedEntity: null, // 当前选中的实体
       // 测量结果
       measurementResult: null,
+      // 悬停提示
+      hoverTooltip: {
+        visible: false,
+        content: '',
+        position: { x: 0, y: 0 }
+      },
       // 默认样式
       defaultStyles: {
         point: { color: '#FF0000', size: 12 },
@@ -90,7 +106,8 @@ export default {
   },
   components: {
     DrawingToolbar,
-    MeasurementPanel
+    MeasurementPanel,
+    HoverTooltip
   },
   mounted() {
     console.log(this.drawDomClick,999999)
@@ -131,20 +148,31 @@ export default {
         this.viewer.entities.remove(this.tempPreviewEntity);
         this.tempPreviewEntity = null;
       }
-      //清理手动维护的记录数组
+      // 清理手动维护的记录数组，只移除与航线相关的实体
       if (this.allEntities) {
-        // 数组里的对象可能已经被上面物理清除了，这里再清一遍确保内存释放
+        // 过滤掉与航线相关的实体，保留用户绘制的线段等实体
-        this.allEntities.forEach(item => {
+        this.allEntities = this.allEntities.filter(item => {
-          if (item.entity) this.viewer.entities.remove(item.entity);
+          // 检查实体是否与航线相关
+          const isRouteRelated = item.type === 'route' || item.routeId || 
+            (item.entity && item.entity.properties && 
+             (item.entity.properties.isMissionWaypoint || item.entity.properties.isMissionRouteLine));
+          
+          // 如果是航线相关实体，从地图中移除
+          if (isRouteRelated && item.entity) {
+            this.viewer.entities.remove(item.entity);
+            return false;
+          }
+          
+          // 保留非航线相关实体
+          return true;
         });
-        this.allEntities = [];
       }
       // 重置坐标缓存
       if (this.drawingPoints) {
         this.drawingPoints = [];
       }
 
-      console.log(">>> [清理完毕] 地图已清空，可以安全加载正式版数据。");
+      console.log(">>> [清理完毕] 航迹已清空，用户绘制的实体已保留。");
     },
     updateWaypointGraphicById(dbId, newName) {
       const entities = this.viewer.entities.values;
@@ -479,6 +507,7 @@ export default {
       this.hoverHandler.setInputAction((movement) => {
         // 如果正在绘制，不处理悬停操作
         if (this.isDrawing) {
+          this.hoverTooltip.visible = false;
           return;
         }
         const pickedObject = this.viewer.scene.pick(movement.endPosition)
@@ -501,17 +530,22 @@ export default {
           // 如果是线实体，显示长度信息
           if (entityData && entityData.type === 'line') {
             const length = this.calculateLineLength(entityData.positions)
-            this.measurementResult = {
+            // 显示小框提示
-              distance: length,
+            this.hoverTooltip = {
-              type: 'line'
+              visible: true,
+              content: `长度：${length.toFixed(2)} 米`,
+              position: {
+                x: movement.endPosition.x + 10,
+                y: movement.endPosition.y - 10
+              }
             };
           } else {
             // 如果不是线实体，隐藏信息
-            this.measurementResult = null;
+            this.hoverTooltip.visible = false;
           }
         } else {
           // 如果没有悬停在任何实体上，隐藏信息
-          this.measurementResult = null;
+          this.hoverTooltip.visible = false;
         }
       }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
     },
@@ -701,8 +735,9 @@ export default {
       if (!this.rightClickHandler) {
         this.initRightClickHandler();
       }
-      // 隐藏测量结果
+      // 隐藏测量结果和小框提示
       this.measurementResult = null;
+      this.hoverTooltip.visible = false;
       this.viewer.scene.canvas.style.cursor = 'default';
     },
     cancelDrawing() {
@@ -723,6 +758,8 @@ export default {
       }
       this.drawingPoints = [];
       this.activeCursorPosition = null;
+      // 隐藏小框提示
+      this.hoverTooltip.visible = false;
     },
     // ********************************************************************
     // 绘制点
@@ -754,11 +791,18 @@ export default {
             // 计算从最后一个点到当前鼠标位置的线段长度
             const tempPositions = [...this.drawingPoints, newPosition];
             const length = this.calculateLineLength(tempPositions);
-            // 更新测量结果，显示实时长度
+            // 更新小框提示，显示实时长度
-            this.measurementResult = {
+            this.hoverTooltip = {
-              distance: length,
+              visible: true,
-              type: 'line'
+              content: `长度：${length.toFixed(2)} 米`,
+              position: {
+                x: movement.endPosition.x + 10,
+                y: movement.endPosition.y - 10
+              }
             };
+          } else {
+            // 如果没有点，隐藏提示
+            this.hoverTooltip.visible = false;
           }
         }
       }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
@@ -856,10 +900,11 @@ export default {
         const entity = this.addLineEntity([...this.drawingPoints], [...this.drawingPointEntities]);
         // 计算长度
         const length = this.calculateLineLength([...this.drawingPoints]);
-        this.measurementResult = {
+        // 不显示测量面板，使用小框提示
-          distance: length,
+        // this.measurementResult = {
-          type: 'line'
+        //   distance: length,
-        };
+        //   type: 'line'
+        // };
         // 重置绘制点数组，保持绘制状态以继续绘制
         this.drawingPoints = [];
         this.drawingPointEntities = [];
@@ -1957,8 +2002,7 @@ export default {
       return positions
     },
     calculateLineLength(positions) {
-      if (!this.selectedRouteDetails || !this.selectedRouteDetails.waypoints) {
+      if (!positions || positions.length < 2) {
-        console.warn(">>> [长度计算跳过] 航点数据暂不可用");
         return 0;
       }
       let totalLength = 0