From 9416112d238c5448f9f4beb7ecf7cbe2a4a72035 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=A6=8D?= <1455167345@qq.com>
Date: Sat, 23 Aug 2025 10:23:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BB=98=E5=88=B6=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BE=E8=A7=92=E5=BA=A6=E3=80=81=E7=BB=98=E5=88=B6=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../flightoperation/src/Report.vue            |   2 +-
 .../workplan/components/map.vue               | 454 +++++++++---------
 2 files changed, 240 insertions(+), 216 deletions(-)

diff --git a/src/views/demo/workmanagement/flightoperation/src/Report.vue b/src/views/demo/workmanagement/flightoperation/src/Report.vue
index 44963e1..afb48f3 100644
--- a/src/views/demo/workmanagement/flightoperation/src/Report.vue
+++ b/src/views/demo/workmanagement/flightoperation/src/Report.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="shade-container"></div>
     <div class="patrol-map" v-if="step == 1">
-      <div class="title">绘制范围</div>
+      <div class="title">绘制事件区域</div>
       <div class="map-container">
         <div class="map-container-content">
           <Map :drawArea="drawarea" @areaData="getAreaData" />
diff --git a/src/views/demo/workmanagement/workplan/components/map.vue b/src/views/demo/workmanagement/workplan/components/map.vue
index 7c62f79..9a65944 100644
--- a/src/views/demo/workmanagement/workplan/components/map.vue
+++ b/src/views/demo/workmanagement/workplan/components/map.vue
@@ -1,8 +1,12 @@
 <template>
   <!-- 地图 -->
-  <div  ref="vChartRef " :id="'mars3d-container_' + mapId" class="mars3d-container">
+  <div ref="vChartRef " :id="'mars3d-container_' + mapId" class="mars3d-container">
     <!-- 航点航线 -->
-    <div v-if="props.airLineForm.airLineType == 'waypoint'" v-show="props.editMode != 'detail'" class="air-container">
+    <div
+      v-if="props.airLineForm.airLineType == 'waypoint'"
+      v-show="props.editMode != 'detail'"
+      class="air-container"
+    >
       <airPoint
         :airInfo="lineInfo"
         :editModel="props.editMode"
@@ -48,10 +52,14 @@
         @positionChange="positionChange"
       ></airPointConfig>
     </div>
+    <!-- 面绘制 -->
+    <div class="draw-polygon-patrol" title="绘制面区域" v-if="props.drawArea" @click="handlerDrawPolygonPatrol">
+      <EditOutlined />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, onMounted, defineProps, watch, defineEmits } from 'vue';
+  import { ref, onMounted, defineProps, watch, defineEmits, reactive } from 'vue';
   import { message } from 'ant-design-vue';
   import { GeojsonToWkt, WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform';
   import { buildUUID } from '@/utils/uuid';
@@ -59,9 +67,9 @@
   import * as mars3d from 'mars3d';
   import { EventBus } from '@/utils/eventBus';
   import { airPortStore } from '@/store/modules/airport';
-  import { airPointActions } from '../waylineConfig/actionConfig'
+  import { airPointActions } from '../waylineConfig/actionConfig';
   import 'mars3d-space';
-
+  import { EditOutlined } from '@ant-design/icons-vue';
   import * as Cesium from 'mars3d-cesium';
   // import * as turf from '@turf/turf';
   import airPolygon from './airPolygon.vue';
@@ -235,18 +243,22 @@
       type: Object,
     },
   });
+  const centerObj = reactive({
+    lat: 260.9,
+    heading: 357.9,
+    pitch: -32,
+  });
 
   watch(
     () => props.editMode,
-    (newVal,oldVal)=>{
-      if(newVal == 'edit' || newVal == 'detail'){
+    (newVal, oldVal) => {
+      if (newVal == 'edit' || newVal == 'detail') {
         // 判断航线类型进行加载编辑
-        if(props.airLineForm.airLineType == 'waypoint'){
-            handlerEditWaypointAirLine();
-        }else if(props.airLineForm.airLineType == 'mapping2d'){
-            handlerEditPolygonAirLine();
+        if (props.airLineForm.airLineType == 'waypoint') {
+          handlerEditWaypointAirLine();
+        } else if (props.airLineForm.airLineType == 'mapping2d') {
+          handlerEditPolygonAirLine();
         }
-
       }
     },
   );
@@ -444,10 +456,8 @@
 
   let graphic = null;
 
-
   // // 清空所有数据
   const exitDraw = () => {
-    
     graphicLayer ? graphicLayer.clear() : null;
 
     takeOffPointGraphicLayer ? takeOffPointGraphicLayer.clear() : null;
@@ -502,6 +512,11 @@
   const vChartRef = ref<HTMLElement>();
 
   onMounted(() => {
+    if (props.drawArea) {
+      centerObj.lat = 835.9;
+      centerObj.heading = 2;
+      centerObj.pitch = -86;
+    }
     initMap();
 
     EventBus.on('closeTranslation', (val: any) => {
@@ -511,12 +526,19 @@
       }
     });
   });
+  // center: { lat: 35.132103, lng: 118.296315, alt: 260.9, heading: 357.9, pitch: -32 },
 
   // 初始化地图
   const initMap = () => {
     map = new mars3d.Map('mars3d-container_' + mapId.value, {
       scene: {
-        center: { lat: 35.132103, lng: 118.296315, alt: 260.9, heading: 357.9, pitch: -32 },
+        center: {
+          lat: 35.132103,
+          lng: 118.296315,
+          alt: centerObj.lat,
+          heading: centerObj.heading,
+          pitch: centerObj.pitch,
+        },
         scene3DOnly: false,
         shadows: false,
         removeDblClick: true,
@@ -689,7 +711,6 @@
 
       map.addLayer(graphicLayer);
 
-
       // 参考起飞点图层
       takeOffPointGraphicLayer = new mars3d.layer.GraphicLayer({
         isAutoEditing: true,
@@ -771,24 +792,21 @@
       // loadChangGuangLayer();
 
       // 图层回显
-      if(props.editMode == 'edit' || props.editMode == 'detail'){
-          // 判断航线类型进行加载编辑
-          if(props.airLineForm.airLineType == 'waypoint'){
-              handlerEditWaypointAirLine();
-          }else if(props.airLineForm.airLineType == 'mapping2d'){
-              handlerEditPolygonAirLine();
-          }
+      if (props.editMode == 'edit' || props.editMode == 'detail') {
+        // 判断航线类型进行加载编辑
+        if (props.airLineForm.airLineType == 'waypoint') {
+          handlerEditWaypointAirLine();
+        } else if (props.airLineForm.airLineType == 'mapping2d') {
+          handlerEditPolygonAirLine();
+        }
       }
 
-
-
       // 监测面区域回显
       if (props.polygonArea) {
         handlerReportPolygonAirLine();
       }
 
       emits('mapOnLoad', map);
-
     });
   };
 
@@ -849,17 +867,17 @@
         },
       ];
     }
-    if (props.drawArea) {
-      mapContextmenuItems = [
-        {
-          text: '添加面区域',
-          icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
-          callback: (e) => {
-            handlerDrawPolygonPatrol();
-          },
-        },
-      ];
-    }
+    // if (props.drawArea) {
+    //   mapContextmenuItems = [
+    //     {
+    //       text: '添加面区域',
+    //       icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
+    //       callback: (e) => {
+    //         handlerDrawPolygonPatrol();
+    //       },
+    //     },
+    //   ];
+    // }
 
     map.bindContextMenu(mapContextmenuItems);
   };
@@ -1082,7 +1100,6 @@
   };
   // 绘制面航线
   const handlerDrawPolygonLine = (lines) => {
-
     // 设置首航点
     let firstAirLinePoint = polygonGraphicLayer.getGraphicById('polygon-node-1');
     if (firstAirLinePoint) {
@@ -1417,46 +1434,43 @@
     return edgeLengths;
   };
 
+  // 绘制文本标注
+  const handlerLoadtextLabelGraphicLayer = (info) => {
+    if (textLabelGraphicLayer == null) {
+      textLabelGraphicLayer = new mars3d.layer.GraphicLayer({
+        isAutoEditing: false,
+      });
+      map.addLayer(textLabelGraphicLayer);
+    } else {
+      textLabelGraphicLayer.clear();
+    }
 
-// 绘制文本标注
-const handlerLoadtextLabelGraphicLayer = (info) => {
+    info?.forEach((item, index) => {
+      const graphic = new mars3d.graphic.LabelEntity({
+        position: [item.center[0], item.center[1], 0],
+        style: {
+          text: item.length + 'm',
+          font_size: 15,
+          scale: 1,
+          font_family: '微软雅黑',
+          color: '#ffffff',
+          outline: true,
+          outlineColor: '#000000',
+          outlineWidth: 2,
+          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+          visibleDepth: false,
+          clampToGround: true,
+        },
+        attr: { remark: '示例1' },
+      });
+      textLabelGraphicLayer.addGraphic(graphic);
+    });
+  };
 
-  if(textLabelGraphicLayer == null){
-    textLabelGraphicLayer = new mars3d.layer.GraphicLayer({
-      isAutoEditing:false
-    })
-    map.addLayer(textLabelGraphicLayer);
-  }else{
-    textLabelGraphicLayer.clear();
-  }
-  
-  info?.forEach((item,index)=>{
-    const graphic = new mars3d.graphic.LabelEntity({
-      position: [item.center[0], item.center[1], 0],
-      style: {
-        text: item.length+"m",
-        font_size: 15, 
-        scale: 1, 
-        font_family: "微软雅黑",
-        color: "#ffffff",
-        outline: true,
-        outlineColor: "#000000",
-        outlineWidth: 2,
-        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        visibleDepth: false,
-        clampToGround:true,
-      },
-      attr: { remark: "示例1" }
-    })
-    textLabelGraphicLayer.addGraphic(graphic)
-  })
-}
-
-
-// 编辑回显面状航线
-// 编辑回显航线
-const handlerEditPolygonAirLine = async () => {
+  // 编辑回显面状航线
+  // 编辑回显航线
+  const handlerEditPolygonAirLine = async () => {
     // 解析和设置参考起飞点
 
     let takeoffArray = props.templateKmlConfig.missionConfig.takeOffRefPoint.split(',');
@@ -1581,7 +1595,6 @@ const handlerEditPolygonAirLine = async () => {
     // handlerDrawPolygonLine(line);
   };
 
-
   // 监测区域面图层回显
   const handlerReportPolygonAirLine = () => {
     let geometry = {
@@ -1725,7 +1738,7 @@ const handlerEditPolygonAirLine = async () => {
     }
     // 设置航线默认高度
     let position = mars3d.LngLatPoint.fromCartesian(e.position);
-    let uuid = airPoints.value.length+1;
+    let uuid = airPoints.value.length + 1;
 
     // 获取默认航线高度
     let globalHeight = props.templateKmlConfig.Folder.globalHeight;
@@ -1994,65 +2007,61 @@ const handlerEditPolygonAirLine = async () => {
   const paramChagne = (info) => {
     console.log('info1232', info);
 
+    // 判断事件类型
 
-    // 判断事件类型  
-
-    if(info.value == 'rotateYaw'){   // 飞行器偏航角
-        // 设置参数
-        currentAirPoint.value.aircraftHorizontalAngle = info.config.actionActuatorFuncParam.aircraftHeading;
-        // 更新镜头
-        handlerDrawCamera(currentAirPoint.value);
-        // 更新航点
-        updateAirPoint(currentAirPoint.value);
+    if (info.value == 'rotateYaw') {
+      // 飞行器偏航角
+      // 设置参数
+      currentAirPoint.value.aircraftHorizontalAngle =
+        info.config.actionActuatorFuncParam.aircraftHeading;
+      // 更新镜头
+      handlerDrawCamera(currentAirPoint.value);
+      // 更新航点
+      updateAirPoint(currentAirPoint.value);
     }
 
-    if(info.value == "gimbalRotate"){   // 云台俯仰角
+    if (info.value == 'gimbalRotate') {
+      // 云台俯仰角
       // 设置参数
-      currentAirPoint.value.cameraVerticalAngle =info.config.actionActuatorFuncParam.gimbalPitchRotateAngle;
+      currentAirPoint.value.cameraVerticalAngle =
+        info.config.actionActuatorFuncParam.gimbalPitchRotateAngle;
       // 更新镜头
       handlerDrawCamera(currentAirPoint.value);
     }
 
+    if (info.value == 'position') {
+      // 坐标高度改变
+    }
+  };
 
-    
-    if(info.value == 'position'){       // 坐标高度改变
+  // 航点位置参数改变
+  const positionChange = () => {
+    // 更新航点
+    updateAirPoint(currentAirPoint.value);
 
+    // 更新镜头
+    handlerDrawCamera(currentAirPoint.value);
+  };
+
+  // 切换航点
+  const pointChange = (id, type) => {
+    if (type == 'next') {
+      if (id == airPoints.value.length) {
+        currentAirPoint.value = airPoints.value[0];
+      } else {
+        currentAirPoint.value = airPoints.value[id];
+      }
+    } else if (type == 'last') {
+      if (id == 1) {
+        currentAirPoint.value = airPoints.value[airPoints.value.length - 1];
+      } else {
+        currentAirPoint.value = airPoints.value[id - 2];
+      }
     }
 
-    
-  }
-
-// 航点位置参数改变
-const positionChange = ()  => {
-  
-  // 更新航点
-  updateAirPoint(currentAirPoint.value);
-  
-  // 更新镜头
-  handlerDrawCamera(currentAirPoint.value);
-}
-
-// 切换航点
-const pointChange = (id,type) => {
-
-  if(type == "next"){
-    if(id == airPoints.value.length){
-      currentAirPoint.value = airPoints.value[0];
-    }else{
-      currentAirPoint.value = airPoints.value[id];
-    }
-  }else if(type == "last"){
-    if(id == 1){
-      currentAirPoint.value = airPoints.value[airPoints.value.length - 1];
-    }else{
-      currentAirPoint.value = airPoints.value[id - 2];
-    }
-  }
-
-  // 更新镜头
-  handlerDrawCamera(currentAirPoint.value);
-}
-
+    // 更新镜头
+    handlerDrawCamera(currentAirPoint.value);
+  };
 
   // 删除航点
   const deleteAirPoint = (e) => {
@@ -2093,16 +2102,23 @@ const pointChange = (id,type) => {
     handlerDrawLine();
   };
 
-// 编辑回显航点航线
-const handlerEditWaypointAirLine =async () => {
-
+  // 编辑回显航点航线
+  const handlerEditWaypointAirLine = async () => {
     // 解析和设置参考起飞点
-    let takeoffArray = props.templateKmlConfig.missionConfig.takeOffRefPoint.split(",");
-    takeOffPointPosition.value = [parseFloat(takeoffArray[1]),parseFloat(takeoffArray[0]),parseFloat(takeoffArray[2])]
-    polygonAirForm.value.startingPoint = [parseFloat(takeoffArray[1]),parseFloat(takeoffArray[0]),parseFloat(takeoffArray[2])];
+    let takeoffArray = props.templateKmlConfig.missionConfig.takeOffRefPoint.split(',');
+    takeOffPointPosition.value = [
+      parseFloat(takeoffArray[1]),
+      parseFloat(takeoffArray[0]),
+      parseFloat(takeoffArray[2]),
+    ];
+    polygonAirForm.value.startingPoint = [
+      parseFloat(takeoffArray[1]),
+      parseFloat(takeoffArray[0]),
+      parseFloat(takeoffArray[2]),
+    ];
     takeOffPointGraphicLayer ? takeOffPointGraphicLayer.clear() : null;
     let startFlyGraphic = new mars3d.graphic.BillboardEntity({
-      position:takeOffPointPosition.value,
+      position: takeOffPointPosition.value,
       style: {
         image: '/map/start.png',
         horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
@@ -2117,117 +2133,112 @@ const handlerEditWaypointAirLine =async () => {
         },
         clampToGround: true,
       },
-    })
+    });
     takeOffPointGraphicLayer.addGraphic(startFlyGraphic);
 
     // 处理和加载航点
-    if(props.waylineWpmlConfig.Folder.Placemark.length > 0){
-        props.waylineWpmlConfig.Folder.Placemark?.forEach((item, index) => {
-            let coordinate = item.Point.coordinates.split(',');
-            // 处理航点
-            let airPointInfo = {
-                id: item.index+1,
-                lng: coordinate[0],
-                lat: coordinate[1],
-                alt: item.executeHeight,
-                aircraftHorizontalAngle: 0,
-                cameraHorizontalAngle: 0,
-                cameraVerticalAngle: 0,
-                focalLength: 24,
-                actions:[]
-            };
-            // 处理动作
-            item.actionGroup.action?.forEach((action,idx)=>{
-              let actionConfig = JSON.parse(JSON.stringify(airPointActions[action.actionActuatorFunc]))
-              actionConfig.config = JSON.parse(JSON.stringify(action));
+    if (props.waylineWpmlConfig.Folder.Placemark.length > 0) {
+      props.waylineWpmlConfig.Folder.Placemark?.forEach((item, index) => {
+        let coordinate = item.Point.coordinates.split(',');
+        // 处理航点
+        let airPointInfo = {
+          id: item.index + 1,
+          lng: coordinate[0],
+          lat: coordinate[1],
+          alt: item.executeHeight,
+          aircraftHorizontalAngle: 0,
+          cameraHorizontalAngle: 0,
+          cameraVerticalAngle: 0,
+          focalLength: 24,
+          actions: [],
+        };
+        // 处理动作
+        item.actionGroup.action?.forEach((action, idx) => {
+          let actionConfig = JSON.parse(JSON.stringify(airPointActions[action.actionActuatorFunc]));
+          actionConfig.config = JSON.parse(JSON.stringify(action));
 
-              console.log("123",action);
-              
-              // 处理航偏角和俯仰角
-              if(action.actionActuatorFunc == 'rotateYaw'){
-                airPointInfo.aircraftHorizontalAngle = action.actionActuatorFuncParam.aircraftHeading
-              }
-              
-              if(action.actionActuatorFunc == 'gimbalRotate'){
-                airPointInfo.cameraVerticalAngle = action.actionActuatorFuncParam.gimbalPitchRotateAngle
-              }
+          console.log('123', action);
 
-              airPointInfo.actions.push(actionConfig);
-            })
-            airPoints.value?.push(airPointInfo);
-            // 回显航点
-            displayWaypointAirLine(airPointInfo);
+          // 处理航偏角和俯仰角
+          if (action.actionActuatorFunc == 'rotateYaw') {
+            airPointInfo.aircraftHorizontalAngle = action.actionActuatorFuncParam.aircraftHeading;
+          }
+
+          if (action.actionActuatorFunc == 'gimbalRotate') {
+            airPointInfo.cameraVerticalAngle =
+              action.actionActuatorFuncParam.gimbalPitchRotateAngle;
+          }
+
+          airPointInfo.actions.push(actionConfig);
         });
-        // 更新航线
-        handlerDrawLine();
+        airPoints.value?.push(airPointInfo);
+        // 回显航点
+        displayWaypointAirLine(airPointInfo);
+      });
+      // 更新航线
+      handlerDrawLine();
     }
+  };
 
-}
+  // 回显航点航线信息
+  const displayWaypointAirLine = (position) => {
+    console.log('position123', position);
 
-// 回显航点航线信息
-const displayWaypointAirLine = (position)=>{
-    console.log("position123",position);
- 
     // 设置航线默认高度
     let uuid = buildUUID();
 
     // 获取默认航线高度
 
-
     // 航点三维模型
     let uavAngleGraphic = new mars3d.graphic.ModelEntity({
-        id:position.id,
-        name: "航向",
-        position: [position.lng, position.lat, position.alt],
-        style: {
-            url: "/map/uav-angle.gltf",
-            scale: 0.1,
-            heading: position.aircraftHorizontalAngle + 90,
-            distanceDisplayCondition: true,
-            distanceDisplayCondition_near: 0,
-            distanceDisplayPoint: {
-                color: "#00ff00",
-                pixelSize: 8
-            }
-        }
-    })
-    graphicLayer.addGraphic(uavAngleGraphic)
-    
+      id: position.id,
+      name: '航向',
+      position: [position.lng, position.lat, position.alt],
+      style: {
+        url: '/map/uav-angle.gltf',
+        scale: 0.1,
+        heading: position.aircraftHorizontalAngle + 90,
+        distanceDisplayCondition: true,
+        distanceDisplayCondition_near: 0,
+        distanceDisplayPoint: {
+          color: '#00ff00',
+          pixelSize: 8,
+        },
+      },
+    });
+    graphicLayer.addGraphic(uavAngleGraphic);
+
     // 地面投影点
     let stickGraphic = new mars3d.graphic.PointEntity({
-        id: 'stick' + position.id,
-        position: [position.lng, position.lat],
-        style: {
+      id: 'stick' + position.id,
+      position: [position.lng, position.lat],
+      style: {
         color: '#f5f5f5',
         pixelSize: 8,
         outline: true,
         outlineColor: '#f5f5f5',
         outlineWidth: 1,
         clampToGround: true,
-        },
+      },
     });
     stickGroundPointLayer.addGraphic(stickGraphic);
-    
+
     // 航点 投影点连接线
     let lineGraphic = new mars3d.graphic.PolylineEntity({
-        id: 'line' + position.id,
-        positions: [
-          [position.lng, position.lat,position.alt],
-          [position.lng, position.lat, 0],
-        ],
-        style: {
+      id: 'line' + position.id,
+      positions: [
+        [position.lng, position.lat, position.alt],
+        [position.lng, position.lat, 0],
+      ],
+      style: {
         color: '#f5f5f5',
         width: 1,
-        },
+      },
     });
     lineGroundPointLayer.addGraphic(lineGraphic);
+  };
 
-
-    
-}
-
-let stickGraphicLayer: mars3d.layer.GraphicLayer;
-
+  let stickGraphicLayer: mars3d.layer.GraphicLayer;
 
   // 飞行到此处
   const flyToThere = (e) => {
@@ -2734,7 +2745,6 @@ let stickGraphicLayer: mars3d.layer.GraphicLayer;
   };
   //   设置无人机轨迹
   const setUAVPosition = () => {
-
     let point = graphicLayer.getGraphicById('set-uav');
     const position = [props.uavTrack.longitude, props.uavTrack.latitude, props.uavTrack.height];
     // 更新航点
@@ -2898,16 +2908,13 @@ let stickGraphicLayer: mars3d.layer.GraphicLayer;
 
   /////////////////////////////////动作处理//////////////////////////////////////
   const addAction = (action) => {
-
     // 需要特殊处理拍照动作
-    if(action.value == "takePhoto"){
+    if (action.value == 'takePhoto') {
       currentAirPoint.value.actions.push(JSON.parse(JSON.stringify(airPointActions['focus'])));
     }
 
     // 当前航点添加动作
     currentAirPoint.value.actions.push(JSON.parse(JSON.stringify(action)));
-
-
   };
 </script>
 
@@ -2949,4 +2956,21 @@ let stickGraphicLayer: mars3d.layer.GraphicLayer;
     right: 40px;
     z-index: 999;
   }
+  .draw-polygon-patrol {
+    cursor: pointer;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    color: #fff;
+    background: linear-gradient(180deg, rgba(13, 25, 45, 0.87) 0%, #25436c 100%);
+    box-shadow: 0px 10px 30px 0px rgba(0, 0, 6, 0.15);
+    border-radius: 10px;
+    border-image: linear-gradient(180deg, #3661a4, rgba(61, 109, 171, 0.68)) 1 1;
+    z-index: 2;
+  }
 </style>