<template>
  <!-- 地图 -->
  <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"
    >
      <airPoint
        :airInfo="lineInfo"
        :editModel="props.editMode"
        :polygonAirForm="polygonAirForm"
        :airLineForm="props.airLineForm"
        :wayline="props.wayline"
        :airPoints="airPoints"
        :waylineInfo="props.waylineInfo"
        :templateKmlConfig="props.templateKmlConfig"
        :waylineWpmlConfig="props.waylineWpmlConfig"
        @setTakeOffPoint="setTakeOffPoint"
        @exitDraw="exitDraw"
        @addAction="addAction"
        @checkPoint="checkPoint"
      ></airPoint>
    </div>

    <!-- 航面航线 -->
    <div v-if="props.airLineForm.airLineType == 'mapping2d'" v-show="props.editMode != 'detail'" class="airpolygon-container">
      <airPolygon
        :airInfo="airInfo"
        :editModel="props.editMode"
        :polygonAirForm="polygonAirForm"
        :airLineForm="props.airLineForm"
        :waylineInfo="props.waylineInfo"
        :airPoints="airPoints"
        :polygon="polygonGeoJson"
        :templateKmlConfig="props.templateKmlConfig"
        :waylineWpmlConfig="props.waylineWpmlConfig"
        @setTakeOffPoint="setTakeOffPoint"
        @calculatParamChange="calculatParamChange"
        @exitDraw="exitDraw"
      ></airPolygon>
    </div>

    <!-- 航点航线配置 -->
    <div class="airpoint-config-container" v-if="airPointConfigShow">
      <airPointConfig
        :currentAirPoint="currentAirPoint"
        :airPoints="airPoints"
        @paramChagne="paramChagne"
        @pointChange="pointChange"
        @positionChange="positionChange"
      ></airPointConfig>
    </div>

    <!-- 航线预览信息 -->
    <div class="airline-preview-container" v-if="props.editMode == 'detail'">
       <div class="info-item">
          <div class="info-value">46461m²</div>
          <div class="info-label">区域面积</div>
       </div>
       <div class="info-item">
          <div class="info-value">46461m²</div>
          <div class="info-label">航线长度</div>
      </div>
      <div class="info-item">
          <div class="info-value">34分钟</div>
          <div class="info-label">预计时间</div>
      </div>
      <div class="info-item">
          <div class="info-value">78张</div>
          <div class="info-label">照片数量</div>
      </div>
      <div class="info-item">
        <div>
          <a-button type="primary" danger size="small" @click="exitDraw">
            <CloseOutlined />
          </a-button>
        </div>
        <div>关闭</div>
      </div>
    </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, reactive } from 'vue';
  import { message } from 'ant-design-vue';
  import { CloseOutlined } from '@ant-design/icons-vue';
  import { GeojsonToWkt, WktToGeojson } from '@/components/MapboxMaps/src/WktGeojsonTransform';
  import { buildUUID } from '@/utils/uuid';
  import airPoint from './airPoint.vue';
  import * as mars3d from 'mars3d';
  import { EventBus } from '@/utils/eventBus';
  import { airPortStore } from '@/store/modules/airport';
  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';
  import airPointConfig from './airPointConfig.vue';
  import { uuid } from '@/utils/uuid';

  // const props = defineProps([
  //   'airLineForm',
  //   'flyToTherePosition',
  //   'wayline',
  //   'waylineInfo',
  //   'workPlanFormShow',
  //   'airPort',
  //   'uavTrack',
  //   'homeAirport'
  // ]);

  const mapId = ref(uuid(6, 14));
  const props = defineProps({
    editMode: {
      type: String,
      default: 'add',
    },
    airLineForm: {
      type: Object,
      default: () => ({
        id: null,
        airLineName: null,
        airLineType: null,
        uavId: null,
        flyToFirstPointMode: null,
        safeTakeoffAltitude: 0,
        safeTakeoffSpeed: 0,
        globalRouteSpeed: 0,
        taskCompletionAction: null,
        outOfControlOption: null,
        typeOfOutOfControlAction: null,
        globalWayPointType: null,
        ptzControlMode: null,
        aircraftYawAngleMode: null,
        createTime: null,
        wpml: null,
        taskOffLng: 0,
        taskOffLat: 0,
        folder: null,
      }),
    },
    wayline: {
      type: Object,
    },
    waylineInfo: {
      type: Object,
      default: () => ({
        missionConfig: {
          flyToWaylineMode: 'safely', // 爬升模式  safely  pointToPoint
          finishAction: 'goHome', // 航线结束动作
          exitOnRCLost: 'executeLostAction', // 失控是否继续执行航线
          executeRCLostAction: 'goBack', // 失控动作类型
          takeOffSecurityHeight: 20, // 安全起飞高度
          globalTransitionalSpeed: 15, // 全局航线过渡速度
          globalRTHHeight: 100, // 全局返航高度
          droneInfo: {
            // 飞行器机型信息
            droneEnumValue: 100,
            droneSubEnumValue: 1,
          },
          autoRerouteInfo: {
            // 航线绕行
            transitionalAutoRerouteMode: 1,
            missionAutoRerouteMode: 1,
          },
          waylineAvoidLimitAreaMode: 0,
          payloadInfo: {
            // 负载机型信息
            payloadEnumValue: 99, // 负载机型主类型
            payloadSubEnumValue: 2,
            payloadPositionIndex: 0, // 负载挂载位置
          },
        },
        Folder: {
          templateId: 0,
          executeHeightMode: 'WGS84',
          waylineId: 0,
          distance: 1391.755859375,
          duration: 200.941531419754,
          autoFlightSpeed: 8.2, // 全局航线飞行速度
          startActionGroup: {
            action: [
              {
                actionId: 0,
                actionActuatorFunc: 'gimbalRotate',
                actionActuatorFuncParam: {
                  gimbalHeadingYawBase: 'aircraft',
                  gimbalRotateMode: 'absoluteAngle',
                  gimbalPitchRotateEnable: 1,
                  gimbalPitchRotateAngle: -90,
                  gimbalRollRotateEnable: 0,
                  gimbalRollRotateAngle: 0,
                  gimbalYawRotateEnable: 1,
                  gimbalYawRotateAngle: 0,
                  gimbalRotateTimeEnable: 0,
                  gimbalRotateTime: 10,
                  payloadPositionIndex: 0,
                },
              },
              {
                actionId: 1,
                actionActuatorFunc: 'hover',
                actionActuatorFuncParam: {
                  hoverTime: 0.5,
                },
              },
              {
                actionId: 2,
                actionActuatorFunc: 'setFocusType',
                actionActuatorFuncParam: {
                  cameraFocusType: 'manual',
                  payloadPositionIndex: 0,
                },
              },
              {
                actionId: 3,
                actionActuatorFunc: 'focus',
                actionActuatorFuncParam: {
                  focusX: 0,
                  focusY: 0,
                  focusRegionWidth: 0,
                  focusRegionHeight: 0,
                  isPointFocus: 0,
                  isInfiniteFocus: 1,
                  payloadPositionIndex: 0,
                  isCalibrationFocus: 0,
                },
              },
              {
                actionId: 4,
                actionActuatorFunc: 'hover',
                actionActuatorFuncParam: {
                  hoverTime: 1,
                },
              },
            ],
          },
          Placemark: [],
        },
      }),
    },
    workPlanFormShow: {
      type: Boolean,
    },
    airPort: {
      type: Object,
    },
    uavTrack: {
      type: Object,
    },
    homeAirport: {
      type: Object,
    },
    templateKmlConfig: {
      type: Object,
    },
    waylineWpmlConfig: {
      type: Object,
    },
    drawArea: {
      type: Boolean,
      default: false,
    },
    polygonArea: {
      type: Object,
    },
  });
  const centerObj = reactive({
    lat: 260.9,
    heading: 357.9,
    pitch: -32,
  });

  watch(
    () => props.editMode,
    (newVal,oldVal)=>{
      if(newVal == 'edit' || newVal == 'detail'){
        if(props.airLineForm.airLineType == 'waypoint'){
            handlerEditWaypointAirLine();
        }else if(props.airLineForm.airLineType == 'mapping2d'){
            handlerEditPolygonAirLine();
        }
      } 
    }
  )

  
  watch(
    () => props.polygonArea,
    (newVal, oldVal) => {
      if (newVal) {
        handlerReportPolygonAirLine();
      }
    },
  );

  watch(
    () => props.uavTrack,
    (val) => {
      setUAVPosition();
    },
    { deep: true },
  );

  watch(
    () => props.airPort,
    (val) => {
      setAirportPosition();
    },
    { deep: true },
  );

  watch(
    () => props.homeAirport,
    (val) => {
      homeSetAirportPosition();
    },
    { deep: true },
  );

  watch(
    () => props.workPlanFormShow,
    (newVal, oldVal) => {
      if (!newVal) {
        clearAllLayer();
      }
    },
  );

  // 航线表单
  watch(
    () => props.airLineForm,
    (newVal, oldVal) => {
      // 根据编辑模式更新地图右键菜单
      handlerBindMapMenus();
    },
    {
      deep: true,
    },
  );

  // 航线文件
  watch(
    () => props.wayline,
    (newVal, oldVal) => {
      // generatePreviewPoint(newVal?.Folder?.Placemark);
    },
  );

  watch(
    () => props.waylineInfo,
    (newVal, oldVal) => {},
  );

  // 航线预览：生成点
  const generatePreviewPoint = (placemark) => {
    // 设置默认起飞点
    takeOffPointPosition.value = [props.airLineForm?.taskOffLng, props.airLineForm?.taskOffLat, 70];

    // 先清空所有数据
    clearAllLayer();

    placemark?.forEach((item, index) => {
      let coordinate = item.Point.coordinates.split(',');
      let airPointInfo = {
        id: item.index,
        name: '航点',
        lng: coordinate[0],
        lat: coordinate[1],
        alt: item.executeHeight,
        aircraftHorizontalAngle: 0,
        cameraHorizontalAngle: 0,
        cameraVerticalAngle: 0,
        focalLength: 2,
      };
      airPoints.value?.push(airPointInfo);
    });

    if (props.airLineForm?.airLineType == 'waypoint') {
      // 航点航线

      airPoints.value?.forEach((item, index) => {
        let drawPoint = {
          _lng: item.lng,
          _lat: item.lat,
          _alt: item.alt,
        };
        preViewPointWayLine(drawPoint);
      });
    } else if (props.airLineForm?.airLineType == 'mapping2d') {
      let coordinates = [];
      airPoints.value?.forEach((item, index) => {
        coordinates.push([item.lng, item.lat]);
      });
      let line = turf.lineString(coordinates);
      preViewPolygonWayLine(line);
    }
  };

  const emits = defineEmits([
    'exitDraw',
    'flyToThere',
    'mapOnLoad',
    'clickAirPort',
    'changeAirportLive',
    'changeUAVLive',
    'areaData',
  ]);

  const airPoints = ref([]);
  const currentAirPoint = ref({});
  const airPointConfigShow = ref(false);

  // 全局平移工具
  let moveTool: mars3d.thing.MatrixMove2;

  // 监听航点变化
  // watch(
  //   currentAirPoint,
  //   (newVal, oldVal) => {
  //       // console.log("newVal123",newVal);
  //       //   更新航点
  //       // updateAirPoint(newVal);
  //       //   更新镜头
  //       // handlerDrawCamera(newVal);
  //   },
  //   { deep: true },
  // );

  const clickPoint = (id) => {
    airPoints.value?.forEach((item, index) => {
      if (item.id == id) {
        currentAirPoint.value = item;
        // 更新镜头
        handlerDrawCamera(currentAirPoint.value);
        airPointConfigShow.value = true;
      }
    });
  };

  const checkPoint = (e) => {
    currentAirPoint.value = e;
    airPointConfigShow.value = true;
    handlerDrawCamera(currentAirPoint.value);
  };


  ///////////////////////////////图层中心////////////////////////////////////////////

  let map: mars3d.Map; // 地图对象

  let graphicLayer: mars3d.layer.GraphicLayer;

  let uavGraphicLayer: mars3d.layer.GraphicLayer;

  // 设置参考起飞点图层
  let takeOffPointGraphicLayer: mars3d.layer.GraphicLayer;

  // 测区面图层
  let polygonGraphicLayer: mars3d.layer.GraphicLayer;
  // 监测区域面图层
  let patrolPolygonGraphicLayer: mars3d.layer.GraphicLayer;

  // 面航线图层
  let polygonLineGraphicLayer: mars3d.layer.GeoJsonLayer;

  // 文本标注图层
  let textLabelGraphicLayer: mars3d.layer.GraphicLayer;

  // 航点地面投影点图层
  let stickGroundPointLayer: mars3d.layer.GraphicLayer;

  // 航点连接线
  let lineGroundPointLayer: mars3d.layer.GraphicLayer;


  // 飞行结果图片贴地点
  let imageStickGroundPointLayer: mars3d.layer.GraphicLayer;

  // 飞行结果图片连接线
  let imageLineGroundPointLayer: mars3d.layer.GraphicLayer;

  // 飞行结果图片
  let imageResultPointLayer: mars3d.layer.GraphicLayer;

  // 飞行结果选中图层照片


  // 项目首页机场位置
  let homeStartGraphic;

  let homeStartGraphicLive;

  let graphic = null;

  // // 清空所有数据
  const exitDraw = () => {
    graphicLayer ? graphicLayer.clear() : null;

    takeOffPointGraphicLayer ? takeOffPointGraphicLayer.clear() : null;

    stickGroundPointLayer ? stickGroundPointLayer.clear() : null;

    lineGroundPointLayer ? lineGroundPointLayer.clear() : null;

    textLabelGraphicLayer ? textLabelGraphicLayer.clear() : null;

    polygonGraphicLayer ? polygonGraphicLayer.clear() : null;

    patrolPolygonGraphicLayer ? patrolPolygonGraphicLayer.clear() : null;

    polygonLineGraphicLayer ? polygonLineGraphicLayer.clear() : null;

    airPoints.value = [];

    props.airLineForm.airLineType = null;

    airPointConfigShow.value = false;

    emits('exitDraw');
  };

  // 航点航线信息
  const lineInfo = ref({
    count: 0,
    length: 0,
    time: 0,
    picture: '- -',
  });
  // 面航线信息
  const airInfo = ref({
    area: 0,
    length: 0,
    time: 0,
    picture: '- -',
  });

  const polygonAirForm = ref({
    startingPoint: null,
    lensMode: 1,
    gatherMode: 1,
    heightMode: 1,
    height: 120,
    speed: 15,
    angle: 0,
    complete: 1,
  });

  const vChartRef = ref<HTMLElement>();

  onMounted(() => {
    if (props.drawArea) {
      centerObj.lat = 835.9;
      centerObj.heading = 2;
      centerObj.pitch = -86;
    }

    initMap();

    EventBus.on('closeTranslation', (val: any) => {
      if (moveTool) {
        moveTool.destroy();
        moveTool = null;
      }
    });
  });
  // 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: centerObj.lat,
          heading: centerObj.heading,
          pitch: centerObj.pitch,
        },
        scene3DOnly: false,
        shadows: false,
        removeDblClick: true,
        sceneMode: 3,
        showSun: true,
        showMoon: true,
        showSkyBox: true,
        showSkyAtmosphere: true,
        fog: true,
        fxaa: true,
        requestRenderMode: true,
        contextOptions: {
          requestWebgl1: false,
          webgl: {
            preserveDrawingBuffer: true,
            alpha: false,
            stencil: true,
            powerPreference: 'high-performance',
          },
        },

        globe: {
          depthTestAgainstTerrain: true,
          baseColor: '#546a53',
          showGroundAtmosphere: true,
          enableLighting: false,
        },
        cameraController: {
          zoomFactor: 3,
          minimumZoomDistance: 1,
          maximumZoomDistance: 50000000,
          enableRotate: true,
          enableTranslate: true,
          enableTilt: true,
          enableZoom: true,
          enableCollisionDetection: true,
          minimumCollisionTerrainHeight: 15000,
        },
      },
      control: {
        homeButton: true,
        baseLayerPicker: false,
        sceneModePicker: true,
        vrButton: false,
        fullscreenButton: true,
        navigationHelpButton: true,
        animation: false,
        timeline: false,
        infoBox: false,
        geocoder: false,
        selectionIndicator: false,
        showRenderLoopErrors: true,
        contextmenu: {
          hasDefault: true,
        },
        mouseDownView: true,
        zoom: {
          insertIndex: 1,
        },
        compass: {
          bottom: 'toolbar',
          left: '5px',
          rotation: true,
        },
        distanceLegend: {
          left: '10px',
          bottom: '2px',
        },
        locationBar: {
          crs: 'CGCS2000_GK_Zone_3',
          crsDecimal: 0,
          template:
            "<div>经度:{lng}</div> <div>纬度:{lat}</div> <div class='hide1000'>横{crsx}  纵{crsy}</div> <div>海拔：{alt}米</div> <div class='hide700'>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div class='hide700'>视高：{cameraHeight}米</div>",
          cacheTime: 50,
        },
      },
      method: {
        templateValues: {
          dataServer: '//data.mars3d.cn',
          gltfServerUrl: '//data.mars3d.cn/gltf',
        },
      },
      terrain: {
        url: '//data.mars3d.cn/terrain',
        show: true,
        clip: true,
      },
      basemaps: [
        {
          id: 10,
          name: '地图底图',
          type: 'group',
        },
        {
          id: 2021,
          pid: 10,
          name: '天地图影像',
          icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
          type: 'group',
          layers: [
            {
              name: '底图',
              type: 'tdt',
              layer: 'img_d',
            },
            {
              name: '注记',
              type: 'tdt',
              layer: 'img_z',
              zIndex: 20,
            },
          ],
          zIndex: 20,
          show: true,
        },
      ],
      layers: [],
    });

    map.on(mars3d.EventType.load, function (event) {
      // 地图右键菜单
      handlerBindMapMenus();

      graphicLayer = new mars3d.layer.GraphicLayer({
        isAutoEditing: false, // 是否自动激活编辑
      });

      graphicLayer.bindContextMenu([
        {
          text: '按轴平移',
          icon: 'fa fa-pencil',
          callback: (event) => {
            const graphic = event.graphic;
            let id = event.graphic.options.id;

            if (moveTool) {
              return null;
            }
            // 按轴移动
            moveTool = new mars3d.thing.MatrixMove2({
              position: graphic.position,
            });
            map.addThing(moveTool);
            moveTool.on(mars3d.EventType.change, (event) => {
              graphic.position = event.position;
              pointMove(event, id);
            });
          },
        },
        {
          text: '停止平移',
          icon: 'fa fa-pencil',
          callback: (event) => {
            const graphic = event.graphic;
            if (moveTool) {
              map.removeThing(moveTool);
              moveTool.destroy();
              moveTool = null;
            }
          },
        },
        {
          text: '删除',
          icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
          callback: (e) => {
            deleteAirPoint(e);
          },
        },
      ]);

      map.addLayer(graphicLayer);

      // 参考起飞点图层
      takeOffPointGraphicLayer = new mars3d.layer.GraphicLayer({
        isAutoEditing: true,
      });

      takeOffPointGraphicLayer.on(mars3d.EventType.editMovePoint, function (event) {
        takeOffPointMove(event);
      });

      map.addLayer(takeOffPointGraphicLayer);

      // 航点地面投影点
      stickGroundPointLayer = new mars3d.layer.GraphicLayer({
        isAutoEditing: false, // 是否自动激活编辑
      });
      map.addLayer(stickGroundPointLayer);

      // 航点连接线
      lineGroundPointLayer = new mars3d.layer.GraphicLayer({
        isAutoEditing: false, // 是否自动激活编辑
      });
      map.addLayer(lineGroundPointLayer);

      // 绘制航线
      graphicLayer.on(mars3d.EventType.click, (e) => {
        // 设置当前选中点
        clickPoint(e.graphic.options.id);
      });

      // 面测区图层
      polygonGraphicLayer = new mars3d.layer.GraphicLayer({
        isAutoEditing: true, // 是否自动激活编辑
      });
      // 监测面区域
      patrolPolygonGraphicLayer = new mars3d.layer.GraphicLayer({
        isAutoEditing: true, // 是否自动激活编辑
      });

      polygonGraphicLayer.bindContextMenu([
        {
          text: '删除测区',
          icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
          callback: (e) => {
            handlerClearPolygonGraphicLayer(e);
          },
        },
      ]);
      patrolPolygonGraphicLayer.bindContextMenu([
        {
          text: '删除测区',
          icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
          callback: (e) => {
            handlerClearPolygonGraphicLayer(e);
          },
        },
      ]);

      polygonGraphicLayer.on(mars3d.EventType.editMovePoint, (event) => {
        onPolygonGraphicLayerEdit(event);
      });
      patrolPolygonGraphicLayer.on(mars3d.EventType.editMovePoint, (event) => {
        console.log(event);
        onPatrolPolygonGraphicLayerEdit(event);
      });

      map.addLayer(polygonGraphicLayer);
      map.addLayer(patrolPolygonGraphicLayer);

      // 绘制起点
      // handlerDrawStartPoint();

      if (props.airPort) {
        setAirportPosition();
      }
      if (props.uavTrack) {
        // setUAVPosition();
      }
      // 加载长光高清影像
      // loadChangGuangLayer();

      // 图层回显
      if (props.editMode == 'edit' || props.editMode == 'detail') {
        // 判断航线类型进行加载编辑
        if (props.airLineForm.airLineType == 'waypoint') {
          handlerEditWaypointAirLine();
        } else if (props.airLineForm.airLineType == 'mapping2d') {
          handlerEditPolygonAirLine();
        }
      }else if(props.editMode == 'autoAdd'){     // 自动航线规划
        // handlerEditPolygonAirLine();
        let geojson = {
            "type": "FeatureCollection",
            "features": [
                  {
                      "type": "Feature",
                      "geometry": {
                          "type": "Polygon",
                          "coordinates": [
                              [
                                  [118.30155473, 35.13429214999999],
                                  [118.30155473, 35.135213541900015],
                                  [118.30068670230001, 35.135213541900015],
                                  [118.30068670230001, 35.13429214999999],
                                  [118.30155473, 35.13429214999999]
                              ]
                          ]
                      }
              }
            ]
        };
      
        handlerDrawPolygon(geojson);
        

        // console.log("templateKmlConfig123",props.templateKmlConfig)


      }

      // 监测面区域回显
      if (props.polygonArea) {
        handlerReportPolygonAirLine();
      }

      emits('mapOnLoad', map);
    });
  };

  // 绑定地图右键菜单
  const handlerBindMapMenus = () => {
    let mapContextmenuItems = [];

    if (props.airLineForm.airLineType == null) {
      mapContextmenuItems = [
        {
          text: '飞行到此处',
          icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
          callback: (e) => {
            flyToThere(e);
          },
        },
      ];
    } else if (props.airLineForm.airLineType == 'waypoint') {
      mapContextmenuItems = [
        {
          text: '飞行到此处',
          icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
          callback: (e) => {
            flyToThere(e);
          },
        },
        {
          text: '添加航点',
          icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
          callback: (e) => {
            if (!takeOffPointPosition.value) {
              message.warning('请先设置起飞点');
              return null;
            }
            handlerDrawPoint(e);
          },
        },
      ];
    } else if (props.airLineForm.airLineType == 'mapping2d') {
      mapContextmenuItems = [
        {
          text: '飞行到此处',
          icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
          callback: (e) => {
            flyToThere(e);
          },
        },
        {
          text: '添加面区域',
          icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
          callback: (e) => {
            if (!polygonAirForm.value.startingPoint) {
              message.warning('请先设置起飞点');
              return null;
            }
            handlerDrawPolygon();
          },
        },
      ];
    }
    // if (props.drawArea) {
    //   mapContextmenuItems = [
    //     {
    //       text: '添加面区域',
    //       icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
    //       callback: (e) => {
    //         handlerDrawPolygonPatrol();
    //       },
    //     },
    //   ];
    // }

    map.bindContextMenu(mapContextmenuItems);
  };

  ///////////////////////////////图层和影像加载////////////////////////////////////////////

  // 加载长光卫星高分影像
  const loadChangGuangLayer = () => {
    var layer = new mars3d.layer.XyzLayer({
      url: 'https://api.jl1mall.com/getMap/{z}/{x}/{reverseY}',
      queryParameters: {
        mk: '73ad26c4aa6957eef051ecc5a15308b4',
        tk: '5538f710dfc641048a8bdf1a7f705cd1',
        pro: '9297426cbe4c4ac2a01ca228a4ad30f7',
        vf: 0,
      },
      minimumLevel: 1,
      maximumLevel: 18,
      zIndex: 2,
    });
    map.addLayer(layer);
  };



  ///////////////////////////////飞行结果加载//////////////////////////////////////////



  ///////////////////////////////参考起飞点////////////////////////////////////////////

  // 全局参考起飞点  数据格式：[lng,lat,alt]
  const takeOffPointPosition = ref(null);

  // 设置起飞点
  const setTakeOffPoint = async () => {
    takeOffPointGraphicLayer ? takeOffPointGraphicLayer.clear() : null;

    const graphic = await takeOffPointGraphicLayer.startDraw({
      type: 'billboardP',
      style: {
        image: '/map/start.png',
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        label: {
          text: '参考起飞点',
          font_size: 16,
          color: '#ffffff',
          outline: true,
          outlineColor: '#000000',
          pixelOffsetY: -50,
        },
      },
    });

    takeOffPointPosition.value = graphic.toJSON().position;

    props.templateKmlConfig.missionConfig.takeOffRefPoint =
      takeOffPointPosition.value[1] +
      ',' +
      takeOffPointPosition.value[0] +
      ',' +
      takeOffPointPosition.value[2];

    polygonAirForm.value.startingPoint = graphic.toJSON().position;

    // 设置表单数据
    props.airLineForm.taskOffLng = takeOffPointPosition.value[0];
    props.airLineForm.taskOffLat = takeOffPointPosition.value[1];

    // 更新航线
    updatePolygonLineByParams();
  };

  // 参考起飞点移动
  const takeOffPointMove = (e) => {
    let res = handlerGetLngLatHeight(e);

    takeOffPointPosition.value = [res.lng, res.lat, res.alt];
    polygonAirForm.value.startingPoint = [res.lng, res.lat, res.alt];

    // 设置表单数据
    props.airLineForm.taskOffLng = takeOffPointPosition.value[0];
    props.airLineForm.taskOffLat = takeOffPointPosition.value[1];

    props.templateKmlConfig.missionConfig.takeOffRefPoint =
      takeOffPointPosition.value[1].toFixed(8) +
      ',' +
      takeOffPointPosition.value[0].toFixed(8) +
      ',' +
      takeOffPointPosition.value[2].toFixed(2);

    // 根据航线类型更新航线
    if (props.airLineForm.airLineType == 'mapping2d') {
      updatePolygonLineByParams();
    } else if (props.airLineForm.airLineType == 'waypoint') {
      handlerDrawLine();
    }
  };

  // 处理Graphic鼠标事件返回信息
  const handlerGetLngLatHeight = (e) => {
    let cartographic = mars3d.Cesium.Cartographic.fromCartesian(e.cartesian);
    let longitude = mars3d.Cesium.Math.toDegrees(cartographic.longitude);
    let latitude = mars3d.Cesium.Math.toDegrees(cartographic.latitude);
    let height = cartographic.height;

    let res = {
      lng: longitude,
      lat: latitude,
      alt: height,
    };
    return res;
  };

  ///////////////////////////////面状航线计算////////////////////////////////////////////

  // 全局面状测区
  const polygonGeoJson = ref();

  // 计算参数
  const polygonCalculateParams = ref({
    gsd: 0,
    overlapY: 70,
    overlapX: 80,
    overlapAngle: 0,
    height: 0,
    spacing: 0,
    safeyFlyHeight: 20,
  });

  // 绘制面状测区
  const handlerDrawPolygon = async (geojson:any = null) => {
    if(geojson!=null){
      
          // 解析和设置参考起飞点

      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,
        style: {
          image: '/map/start.png',
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          label: {
            text: '参考起飞点',
            font_size: 16,
            color: '#ffffff',
            outline: true,
            outlineColor: '#000000',
            pixelOffsetY: -50,
          },
          clampToGround: true,
        },
      });

      takeOffPointGraphicLayer.addGraphic(startFlyGraphic);

      polygonGraphicLayer.loadGeoJSON(geojson, {
        type: 'polygon',
        flyTo: true,
        style: {
          color: '#408eff',
          opacity: 0.3,
          outline: true,
          outlineColor: '#408eff',
          outlineWidth: 3.0,
          clampToGround: true,
        },
      });


      let coordinates = geojson.features[0].geometry[0];
      polygonGeoJson.value = coordinates;
      let polygon = turf.polygon([coordinates]);
      let polygonWkt = GeojsonToWkt(polygon['geometry']);
      // props.airLineForm.flyToFirstPointMode = polygonWkt;
      // // 航线间距
      // let spceing = parseFloat(polygonCalculateParams.value?.spacing) / 10000;
      // // 初始化角度
      // let direction = props.templateKmlConfig.Folder.Placemark.direction ? props.templateKmlConfig.Folder.Placemark.direction : 0;
      // // 计算航线
      // let lines = generateScanLines(polygon, spceing, direction);
      // // 计算测区面积、航线长度
      // CalculateAreaInfo(polygon, lines);
      // // 绘制面航线
      // handlerDrawPolygonLine(lines);
      // // 计算边长等信息
      // handlerGetPolygonBorderInfo(polygonGeoJson.value);



    } else {
      const graphic = await polygonGraphicLayer.startDraw({
        type: 'polygon',
        style: {
          color: '#408eff',
          opacity: 0.3,
          outline: true,
          outlineColor: '#408eff',
          outlineWidth: 3.0,
          clampToGround: true,
        },
      });
      let coordinates = graphic.toJSON().positions;
      
      coordinates.push(coordinates[0]);
      polygonGeoJson.value = coordinates;
      let polygon = turf.polygon([coordinates]);
      let polygonWkt = GeojsonToWkt(polygon['geometry']);
      props.airLineForm.flyToFirstPointMode = polygonWkt;
      // 航线间距
      let spceing = parseFloat(polygonCalculateParams.value?.spacing) / 10000;
      // 初始化角度
      let direction = props.templateKmlConfig.Folder.Placemark.direction ? props.templateKmlConfig.Folder.Placemark.direction : 0;
      // 计算航线
      let lines = generateScanLines(polygon, spceing, direction);
      // 计算测区面积、航线长度
      CalculateAreaInfo(polygon, lines);
      // 绘制面航线
      handlerDrawPolygonLine(lines);
      // 计算边长等信息
      handlerGetPolygonBorderInfo(polygonGeoJson.value);
    }
  };
  // 绘制监测区域
  const handlerDrawPolygonPatrol = async () => {
    const graphic = await patrolPolygonGraphicLayer.startDraw({
      type: 'polygon',
      style: {
        color: '#408eff',
        opacity: 0.3,
        outline: true,
        outlineColor: '#408eff',
        outlineWidth: 3.0,
        clampToGround: true,
      },
    });
    let coordinates = graphic.toJSON().positions;
    coordinates.push(coordinates[0]);
    polygonGeoJson.value = coordinates;
    emits('areaData', polygonGeoJson.value);
  };
  // 测区编辑后重新计算航线
  const onPolygonGraphicLayerEdit = (e) => {
    let coordinates = e.graphic.toJSON().positions;

    if (props.editMode == 'add') {
      coordinates.push(coordinates[0]);
    }

    polygonGeoJson.value = coordinates;

    let polygon = turf.polygon([coordinates]);

    let polygonWkt = GeojsonToWkt(polygon['geometry']);
    props.airLineForm.flyToFirstPointMode = polygonWkt;

    let spceing = parseFloat(polygonCalculateParams.value?.spacing) / 10000;
    let direction = props.templateKmlConfig.Folder.Placemark.direction;
    let lines = generateScanLines(polygon, spceing, direction);

    // 计算面积
    CalculateAreaInfo(polygon, lines);
    // 绘制面航线
    handlerDrawPolygonLine(lines);
    // 计算边长等信息
    handlerGetPolygonBorderInfo(polygonGeoJson.value);
  };

  // 监测区域编辑后重新赋值
  const onPatrolPolygonGraphicLayerEdit = (e) => {
    let coordinates = e.graphic.toJSON().positions;
    if (props.editMode == 'add') {
      coordinates.push(coordinates[0]);
    }
    polygonGeoJson.value = coordinates;
    emits('areaData', polygonGeoJson.value);
  };
  // 绘制面航线
  const handlerDrawPolygonLine = (lines) => {
    // 设置首航点
    let firstAirLinePoint = polygonGraphicLayer.getGraphicById('polygon-node-1');
    if (firstAirLinePoint) {
      firstAirLinePoint.setOptions({
        position: lines.geometry.coordinates[0],
      });
    } else {
      const graphic = new mars3d.graphic.BillboardEntity({
        id: 'polygon-node-1',
        name: '航点',
        position: lines.geometry.coordinates[0],
        style: {
          image: '/map/node.png',
          scale: 1,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          label: {
            text: '',
            font_size: 14,
            color: '#ffffff',
            outline: true,
            outlineColor: '#000000',
            pixelOffsetY: -35,
          },
        },
      });
      polygonGraphicLayer.addGraphic(graphic);
    }

    // 判断飞行模式 设置航点高度
    lines.geometry.coordinates.unshift([
      polygonAirForm.value.startingPoint[0],
      polygonAirForm.value.startingPoint[1],
      polygonAirForm.value.startingPoint[2] +
        parseFloat(polygonCalculateParams.value.safeyFlyHeight),
    ]);

    // 链接起点
    lines.geometry.coordinates.unshift(polygonAirForm.value.startingPoint);

    if (polygonLineGraphicLayer) {
      polygonLineGraphicLayer.clear();
      polygonLineGraphicLayer.loadGeoJSON(lines);
    } else {
      polygonLineGraphicLayer = new mars3d.layer.GeoJsonLayer({
        name: '面航线',
        data: lines,
        symbol: {
          type: 'polyline',
          styleOptions: {
            arcType: Cesium.ArcType.GEODESIC, // 使用大地线
            width: 2.0,
            color: '#0aed8b',
          },
        },
        flyTo: true,
      });
      map.addLayer(polygonLineGraphicLayer);
    }
  };

  // 计算面航线
  function generateScanLines(polygon, spacing, angle = 0) {
    if (!turf.booleanValid(polygon)) throw new Error('无效的多边形');

    spacing = Math.abs(spacing);

    // 获取多边形的旋转边界框
    const bbox = turf.bbox(polygon);
    const center = turf.center(polygon).geometry.coordinates;

    // 计算需要生成的线数量(加缓冲确保完全覆盖)
    const diagLength = turf.distance(
      turf.point([bbox[0], bbox[1]]),
      turf.point([bbox[2], bbox[3]]),
    );
    const lineCount = Math.ceil(diagLength / spacing) + 2;

    // 生成基础水平线
    const lines = [];

    for (let i = -1; i <= lineCount; i++) {
      const y = bbox[1] + i * spacing * 0.11 - spacing * 0.11;
      lines.push(
        turf.lineString([
          [bbox[0] - spacing, y],
          [bbox[2] + spacing, y],
        ]),
      );
    }

    // 旋转线条到指定角度
    const rotatedLines = lines.map((line) =>
      turf.transformRotate(line, angle - 90, { pivot: center }),
    );

    // 裁剪线条到多边形内并处理结果
    const coverageLines = [];

    rotatedLines.forEach((line) => {
      try {
        const intersection = turf.lineIntersect(line, polygon);

        if (intersection.features.length >= 2) {
          // 按与线起点距离排序交点
          const sortedPoints = intersection.features
            .map((f) => f.geometry.coordinates)
            .sort(
              (a, b) =>
                turf.distance(line.geometry.coordinates[0], turf.point(a)) -
                turf.distance(line.geometry.coordinates[0], turf.point(b)),
            );

          // 创建连接最远两个交点的线段
          coverageLines.push(
            turf.lineString([sortedPoints[0], sortedPoints[sortedPoints.length - 1]]),
          );
        }
      } catch (e) {
        console.warn('处理线段时出错:', e);
      }
    });

    let connectedLine = connectLinesManual(turf.featureCollection(coverageLines));

    // 将航点提取并添加到airPoints
    airPoints.value = [];

    connectedLine.geometry.coordinates?.forEach((item, index) => {
      let point = {
        id: index,
        lng: item[0],
        lat: item[1],
        alt: item[2],
        aircraftHorizontalAngle: 0,
        cameraHorizontalAngle: 0,
        cameraVerticalAngle: 0,
        focalLength: 1,
      };

      airPoints.value?.push(point);
    });

    // 倒数第2个点
    let penultimatePoint = JSON.parse(JSON.stringify(airPoints.value[airPoints.value.length - 1]));
    penultimatePoint.id = penultimatePoint.id + 1;
    airPoints.value?.push(penultimatePoint);

    // 添加测区中心点 （最后1个点）
    let turfPolygon = turf.polygon([polygonGeoJson.value]);

    let polygonCenter = turf.centroid(turfPolygon);

    let lastPoint = {
      id: airPoints.value[airPoints.value.length - 1].id + 1,
      lng: polygonCenter.geometry.coordinates[0],
      lat: polygonCenter.geometry.coordinates[1],
      alt: airPoints.value[airPoints.value.length - 1].alt,
      aircraftHorizontalAngle: 0,
      cameraHorizontalAngle: 0,
      cameraVerticalAngle: 0,
      focalLength: 1,
    };
    airPoints.value?.push(lastPoint);

    // 添加最后一个点到线数据中
    connectedLine.geometry.coordinates.push([lastPoint.lng, lastPoint.lat, lastPoint.alt]);

    return connectedLine;
  }

  // 处理面航线
  const connectLinesManual = (lines) => {
    // 确保输入是FeatureCollection
    if (lines.type !== 'FeatureCollection') {
      lines = turf.featureCollection([lines]);
    }

    // 收集所有坐标点
    let allCoords = [];
    lines.features.forEach((line, index) => {
      // 相对起飞点高度
      let relativeHeight =
        takeOffPointPosition.value[2] + parseFloat(polygonCalculateParams.value.height);

      line.geometry.coordinates?.forEach((item, idx) => {
        line.geometry.coordinates[idx].push(relativeHeight);
      });

      if (line.geometry.type === 'LineString' && index % 2 == 0) {
        allCoords = allCoords.concat(line.geometry.coordinates.reverse());
      } else {
        allCoords = allCoords.concat(line.geometry.coordinates);
      }
    });

    // 移除连续重复的点
    const cleanedCoords = [];
    if (allCoords.length > 0) {
      cleanedCoords.push(allCoords[0]);
      for (let i = 1; i < allCoords.length; i++) {
        const prev = cleanedCoords[cleanedCoords.length - 1];
        if (prev[0] !== allCoords[i][0] || prev[1] !== allCoords[i][1]) {
          cleanedCoords.push(allCoords[i]);
        }
      }
    }

    return turf.lineString(cleanedCoords);
  };

  // 标绘面状航线起点
  const handlerDrawStartPoint = async () => {
    graphic = await graphicLayer.startDraw({
      type: 'billboard',
      style: {
        image: '/map/start.png',
        scale: 0.7,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        label: {
          text: '无人机起始位置',
          font_size: 16,
          color: '#ffffff',
          outline: true,
          outlineColor: '#000000',
          pixelOffsetY: -60,
        },
      },
    });
    // 设置贴地点 和 连接线
  };

  // 计算面状测区面积、长度、完成用时、拍摄数量
  const CalculateAreaInfo = (polygon, lines) => {
    // 测区面积
    airInfo.value.area = turf.area(polygon).toFixed(2);

    // 航线长度
    airInfo.value.length = turf.length(lines).toFixed(2);

    // 预计用时
    airInfo.value.time = ((airInfo.value.length * 1000) / polygonAirForm.value.speed / 60).toFixed(
      2,
    );

    // 照片数量
  };

  // 删除面状测区 和 面状航线
  const handlerClearPolygonGraphicLayer = () => {
    polygonGraphicLayer ? polygonGraphicLayer.clear() : null;

    polygonLineGraphicLayer ? polygonLineGraphicLayer.clear() : null;

    patrolPolygonGraphicLayer ? patrolPolygonGraphicLayer.clear() : null;

    textLabelGraphicLayer ? textLabelGraphicLayer.clear() : null;

    polygonGeoJson.value = null;

    airInfo.value = {
      area: 0,
      length: 0,
      time: 0,
      picture: '- -',
    };
  };

  // 面状航线测区、参数改变
  const calculatParamChange = (params) => {
    polygonCalculateParams.value = params;

    if (polygonGeoJson.value) {
      let polygon = turf.polygon([polygonGeoJson.value]);
      let spceing = parseFloat(params.spacing) / 10000;
      let angle = parseFloat(params.overlapAngle);
      // 生成航线
      let lines = generateScanLines(polygon, spceing, angle);
      // 计算面积 长度
      CalculateAreaInfo(polygon, lines);
      // 绘制面航线
      handlerDrawPolygonLine(lines);
      // 计算边长等信息
      handlerGetPolygonBorderInfo(polygonGeoJson.value);
    }
  };

  // 根据参数更新面状航线
  const updatePolygonLineByParams = () => {
    if (polygonGeoJson.value && polygonCalculateParams.value) {
      let polygon = turf.polygon([polygonGeoJson.value]);
      let spceing = parseFloat(polygonCalculateParams.value.spacing) / 10000;
      let angle = parseFloat(polygonCalculateParams.value.overlapAngle);
      // 生成航线
      let lines = generateScanLines(polygon, spceing, angle);
      // 计算面积 长度
      CalculateAreaInfo(polygon, lines);
      // 绘制面航线
      handlerDrawPolygonLine(lines);
      // 计算边长等信息
      handlerGetPolygonBorderInfo(polygonGeoJson.value);
    }
  };

  // 计算绘制的多边形每条线的长度和中心点
  const polygonBorderInfo = ref([]);

  // 计算测区各边长
  const handlerGetPolygonBorderInfo = (polygonCoords) => {
    // 创建Turf多边形对象
    let polygon = turf.polygon([polygonCoords]);

    // 1. 计算边长
    let coordinates = polygon.geometry.coordinates[0];
    let edgeLengths = [];

    for (let i = 0; i < coordinates.length - 1; i++) {
      let start = coordinates[i];
      let end = coordinates[i + 1];
      let distance = turf.distance(turf.point(start), turf.point(end), { units: 'meters' });

      let midpoint = turf.midpoint(start, end);

      edgeLengths.push({
        length: distance.toFixed(2),
        center: midpoint?.geometry?.coordinates,
      });
    }

    handlerLoadtextLabelGraphicLayer(edgeLengths);
    return edgeLengths;
  };

  // 绘制文本标注
  const handlerLoadtextLabelGraphicLayer = (info) => {
    if (textLabelGraphicLayer == null) {
      textLabelGraphicLayer = new mars3d.layer.GraphicLayer({
        isAutoEditing: false,
      });
      map.addLayer(textLabelGraphicLayer);
    } else {
      textLabelGraphicLayer.clear();
    }


  // 绘制文本标注
  const handlerLoadtextLabelGraphicLayer = (info) => {

    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 () => {
    
    // 解析和设置参考起飞点

    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,
      style: {
        image: '/map/start.png',
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        label: {
          text: '参考起飞点',
          font_size: 16,
          color: '#ffffff',
          outline: true,
          outlineColor: '#000000',
          pixelOffsetY: -50,
        },
        clampToGround: true,
      },
    });

    takeOffPointGraphicLayer.addGraphic(startFlyGraphic);

    // 处理 和 加载测区数据

    let coordinateArray =
      props.templateKmlConfig.Folder.Placemark.Polygon.outerBoundaryIs.LinearRing.coordinates.split(
        '\n',
      );

    let geomtryCoorinate = [];

    coordinateArray.forEach((item, index) => {
      let trimStr = item.trim();
      let arr = trimStr.split(',');
      for (let i = 0; i < arr.length; i++) {
        arr[i] = parseFloat(arr[i]);
      }
      geomtryCoorinate.push(arr);
    });

    geomtryCoorinate.push(geomtryCoorinate[0]);

    let geometry = {
      type: 'Polygon',
      coordinates: [geomtryCoorinate],
    };

    // let areaJson = WktToGeojson(props.airLineForm.flyToFirstPointMode)
    polygonGeoJson.value = geometry.coordinates[0];

    let geojsonData = {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: geometry,
        },
      ],
    };

    polygonGraphicLayer ? polygonGraphicLayer.clear() : null;

    polygonGraphicLayer.loadGeoJSON(geojsonData, {
      type: 'polygon',
      flyTo: true,
      style: {
        color: '#408eff',
        opacity: 0.3,
        outline: true,
        outlineColor: '#408eff',
        outlineWidth: 3.0,
        clampToGround: true,
      },
    });

    // 加载文本标注
    handlerGetPolygonBorderInfo(geometry.coordinates[0]);

    // 加载航线
    // let placemark = props.waylineInfo?.Folder?.Placemark

    // placemark?.forEach((item, index) => {
    //     let coordinate = item.Point.coordinates.split(',');
    //     let airPointInfo = {
    //       id: item.index,
    //       name: '航点',
    //       lng: coordinate[0],
    //       lat: coordinate[1],
    //       alt: item.executeHeight,
    //       aircraftHorizontalAngle: 0,
    //       cameraHorizontalAngle: 0,
    //       cameraVerticalAngle: 0,
    //       focalLength: 2,
    //     };
    //     airPoints.value?.push(airPointInfo);
    // });

    // let coordinates = [];

    // airPoints.value?.forEach((item, index) => {
    //   coordinates.push([item.lng, item.lat]);
    // });

    // let line = turf.lineString(coordinates);

    // handlerDrawPolygonLine(line);
  };

  // 监测区域面图层回显
  const handlerReportPolygonAirLine = () => {
    let geometry = {
      type: 'Polygon',
      coordinates: [props.polygonArea],
    };
    let geojsonData = {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: geometry,
        },
      ],
    };

    patrolPolygonGraphicLayer ? patrolPolygonGraphicLayer.clear() : null;

    patrolPolygonGraphicLayer.loadGeoJSON(geojsonData, {
      type: 'polygon',
      flyTo: true,
      style: {
        color: '#408eff',
        opacity: 0.3,
        outline: true,
        outlineColor: '#408eff',
        outlineWidth: 3.0,
        clampToGround: true,
      },
    });
  };

  ///////////////////////////////航点航线计算////////////////////////////////////////////

  // 航点移动
  const pointMove = (e, id) => {
    const cartographic = mars3d.Cesium.Cartographic.fromCartesian(e.position);
    const longitude = mars3d.Cesium.Math.toDegrees(cartographic.longitude);
    const latitude = mars3d.Cesium.Math.toDegrees(cartographic.latitude);
    const height = cartographic.height; // 高度（米）
    let stickGraphic = stickGroundPointLayer.getGraphicById('stick' + id);
    if (stickGraphic) {
      stickGraphic.setOptions({
        position: [longitude, latitude],
        style: {
          color: '#f5f5f5',
          pixelSize: 8,
          outline: true,
          outlineColor: '#f5f5f5',
          outlineWidth: 1,
          clampToGround: true,
        },
      });
    }
    let lineGraphic = lineGroundPointLayer.getGraphicById('line' + id);
    if (lineGraphic) {
      lineGraphic.setOptions({
        positions: [
          [longitude, latitude, height],
          [longitude, latitude, 0],
        ],
        style: {
          color: '#f5f5f5',
          width: 1,
        },
      });
    }

    // 更新坐标数据
    airPoints.value?.forEach((item, index) => {
      if (item.id == id) {
        airPoints.value[index].lng = longitude;
        airPoints.value[index].lat = latitude;
        airPoints.value[index].alt = height;
      }
    });

    // 更新航线
    handlerDrawLine();
  };

  // 绘制航线
  const handlerDrawLine = () => {
    let positions = [];

    airPoints.value?.forEach((item, index) => {
      positions.push([item.lng, item.lat, item.alt]);
    });

    positions.unshift([
      takeOffPointPosition.value[0],
      takeOffPointPosition.value[1],
      airPoints.value[0].alt,
    ]);

    positions.unshift([
      takeOffPointPosition.value[0],
      takeOffPointPosition.value[1],
      takeOffPointPosition.value[2],
    ]);

    // 判断是否已经绘制
    if (positions.length > 1) {
      let lineGraphic = graphicLayer.getGraphicById('pointsLine');

      if (lineGraphic) {
        lineGraphic.setOptions({
          id: 'pointsLine',
          positions: positions,
          style: {
            width: 2,
            color: '#3388ff',
          },
        });
      } else {
        const graphic = new mars3d.graphic.PolylineEntity({
          id: 'pointsLine',
          positions: positions,
          style: {
            width: 2,
            color: '#3388ff',
          },
        });
        graphicLayer.addGraphic(graphic);
      }
    }

    // 计算航线长度
    // let lineString = turf.lineString(positions);
    // lineInfo.value.length = turf.length(lineString).toFixed(2);
  };

  // 全局航点数组
  const uavPoints = ref([]);

  // 绘制航点
  const handlerDrawPoint = (e) => {
    if (moveTool) {
      moveTool.destroy();
      moveTool = null;
    }
    // 设置航线默认高度
    let position = mars3d.LngLatPoint.fromCartesian(e.position);
    let uuid = airPoints.value.length + 1;

    // 获取默认航线高度
    let globalHeight = props.templateKmlConfig.Folder.globalHeight;

    // 航点三维模型
    let uavAngleGraphic = new mars3d.graphic.ModelEntity({
      id: uuid,
      name: '航向',
      position: [position._lng, position._lat, globalHeight],
      style: {
        url: '/map/uav-angle.gltf',
        scale: 0.1,
        heading: 90,
        distanceDisplayCondition: true,
        distanceDisplayCondition_near: 0,
        distanceDisplayPoint: {
          color: '#00ff00',
          pixelSize: 8,
        },
      },
    });
    graphicLayer.addGraphic(uavAngleGraphic);

    // 地面投影点
    let stickGraphic = new mars3d.graphic.PointEntity({
      id: 'stick' + uuid,
      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' + uuid,
      positions: [
        [position._lng, position._lat, globalHeight],
        [position._lng, position._lat, 0],
      ],
      style: {
        color: '#f5f5f5',
        width: 1,
      },
    });
    lineGroundPointLayer.addGraphic(lineGraphic);

    // 航点列表
    let airPointInfo = {
      id: uuid,
      name: '航点',
      lng: position._lng,
      lat: position._lat,
      alt: globalHeight,
      aircraftHorizontalAngle: 0,
      cameraHorizontalAngle: 0,
      cameraVerticalAngle: 0,
      focalLength: 2,
      actions: [
        {
          // 设置无人机偏航角
          name: '飞行器偏航角',
          value: 'rotateYaw',
          type: 'action',
          config: {
            actionId: null,
            actionActuatorFunc: 'rotateYaw',
            actionActuatorFuncParam: {
              aircraftHeading: 0,
              aircraftPathMode: 'counterClockwise',
            },
          },
        },
        {
          // 设置旋转云台俯仰角
          name: '云台俯仰角',
          value: 'gimbalRotate',
          type: 'action',
          config: {
            actionId: 3,
            actionActuatorFunc: 'gimbalRotate',
            actionActuatorFuncParam: {
              gimbalHeadingYawBase: 'north',
              gimbalRotateMode: 'absoluteAngle',
              gimbalPitchRotateEnable: 1,
              gimbalPitchRotateAngle: 0,
              gimbalRollRotateEnable: 0,
              gimbalRollRotateAngle: 0,
              gimbalYawRotateEnable: 0,
              gimbalYawRotateAngle: 0,
              gimbalRotateTimeEnable: 0,
              gimbalRotateTime: 0,
              payloadPositionIndex: 0,
            },
          },
        },
        {
          // 调整相机焦距
          name: '相机焦距',
          value: 'zoom',
          type: 'action',
          config: {
            actionId: null,
            actionActuatorFunc: 'zoom',
            actionActuatorFuncParam: {
              focalLength: 24,
              isUseFocalFactor: 0,
              payloadPositionIndex: 0,
            },
          },
        },
      ],
    };
    airPoints.value?.push(airPointInfo);
    uavPoints.value.push(graphic);

    // 当前航点
    currentAirPoint.value = airPoints.value[airPoints.value?.length - 1];

    // 更新镜头
    handlerDrawCamera(airPointInfo);

    // 更新航线
    handlerDrawLine();
  };

  // 绘制镜头
  const handlerDrawCamera = (e) => {
    // 判断是否已经添加
    const graphic = graphicLayer.getGraphicById('cameraGraphic');
    if (graphic) {
      // 如果存在更新数据
      graphic.setOptions({
        id: 'cameraGraphic',
        position: [e.lng, e.lat, e.alt],
        show: true,
        style: {
          angle1: 30, // 椎体夹角1
          angle2: 30, // 椎体夹角2
          length: 100, // 椎体长度
          rayEllipsoid: false,
          color: 'rgba(0,255,255,0.3)',
          outline: true,
          topShow: true,
          topSteps: 2,
          flat: true,
          cameraHpr: true,
          heading: e.aircraftHorizontalAngle - 90, // 偏航角
          pitch: e.cameraVerticalAngle - 90, // 俯仰角 0 - 360度
          roll: 0,
        },
      });
    } else {
      let satelliteSensor = new mars3d.graphic.RectSensor({
        id: 'cameraGraphic',
        position: [e.lng, e.lat, e.alt],
        style: {
          flat: true,
          angle1: 30, // 椎体夹角1
          angle2: 30, // 椎体夹角2
          length: 100, // 椎体长度
          rayEllipsoid: false,
          color: 'rgba(0,255,255,0.3)',
          outline: true,
          topShow: true,
          topSteps: 2,
          cameraHpr: true,
          heading: e.aircraftHorizontalAngle - 90,
          pitch: e.cameraVerticalAngle - 90, // 俯仰角 0 - 360度
          roll: 0,
        },
      });
      graphicLayer.addGraphic(satelliteSensor);
    }
  };

  // 更新航点
  const updateAirPoint = (e) => {
    // 更新航点
    let graphic = graphicLayer.getGraphicById(e.id);
    if (graphic) {
      graphic.setOptions({
        name: '航向',
        position: [e.lng, e.lat, e.alt],
        style: {
          url: '/map/uav-angle.gltf',
          scale: 0.1,
          heading: e.aircraftHorizontalAngle + 90,
          distanceDisplayCondition: true,
          distanceDisplayCondition_near: 0,
          distanceDisplayPoint: {
            color: '#00ff00',
            pixelSize: 8,
          },
        },
      });
    }

    // 更新贴地点
    let stickGraphic = stickGroundPointLayer.getGraphicById('stick' + e.id);
    if (stickGraphic) {
      stickGraphic.setOptions({
        position: [e.lng, e.lat],
        style: {
          color: '#f5f5f5',
          pixelSize: 8,
          outline: true,
          outlineColor: '#f5f5f5',
          outlineWidth: 1,
          clampToGround: true,
        },
      });
    }

    // 更新投影点连线
    let lineGraphic = lineGroundPointLayer.getGraphicById('line' + e.id);
    if (lineGraphic) {
      lineGraphic.setOptions({
        positions: [
          [e.lng, e.lat, e.alt],
          [e.lng, e.lat, 0],
        ],
        style: {
          color: '#f5f5f5',
          width: 1,
        },
      });
    }

    let cameraGraphic = graphicLayer.getGraphicById('camera' + e.id);
    if (cameraGraphic) {
      cameraGraphic.setOptions({
        position: [e.lng, e.lat, e.alt],
        // style: {
        //     angle1: 30,   // 椎体夹角1
        //     angle2: 30,   // 椎体夹角2
        //     length: 50,  // 椎体长度
        //     rayEllipsoid: true,
        //     color: "rgba(0,255,255,0.3)",
        //     outline: true,
        //     topShow: true,
        //     topSteps: 2,
        //     flat: true,
        //     cameraHpr: true,
        //     heading: 0,
        //     pitch: 180,
        //     roll: 0,   //
        //     clippingPlanes: [{
        //         distance: 0, // 设置裁剪平面在地表（0高度）
        //         normal: new Cesium.Cartesian3(0, 0, -1) // 法向量向下（隐藏地表以下部分）
        //     }]
        // }
      });
    }

    // 更新航线
    handlerDrawLine();
  };

  // 航点动作参数改变
  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 == 'gimbalRotate') {
      // 云台俯仰角
      // 设置参数
      currentAirPoint.value.cameraVerticalAngle =
        info.config.actionActuatorFuncParam.gimbalPitchRotateAngle;
      // 更新镜头
      handlerDrawCamera(currentAirPoint.value);
    }

    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];
      }
    }

    // 更新镜头
    handlerDrawCamera(currentAirPoint.value);
  };

  // 删除航点
  const deleteAirPoint = (e) => {
    let id = e.graphic.id;

    // 删除航点
    let uavModel = graphicLayer.getGraphicById(id);
    if (uavModel) {
      graphicLayer.removeGraphic(uavModel);
    }

    // 删除相机
    let camera = graphicLayer.getGraphicById('cameraGraphic');
    if (camera) {
      graphicLayer.removeGraphic(camera);
    }

    // 删除贴地点
    let point = lineGroundPointLayer.getGraphicById('line' + id);
    if (point) {
      lineGroundPointLayer.removeGraphic(point);
    }

    // 删除连接线
    let line = stickGroundPointLayer.getGraphicById('stick' + id);
    if (line) {
      stickGroundPointLayer.removeGraphic(line);
    }

    // 删除数据
    airPoints.value?.forEach((item, index) => {
      if (item.id == id) {
        airPoints.value?.splice(index, 1);
      }
    });

    // 更新航线
    handlerDrawLine();
  };

  // 编辑回显航点航线
  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]),
    ];
    takeOffPointGraphicLayer ? takeOffPointGraphicLayer.clear() : null;
    let startFlyGraphic = new mars3d.graphic.BillboardEntity({
      position: takeOffPointPosition.value,
      style: {
        image: '/map/start.png',
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        label: {
          text: '参考起飞点',
          font_size: 16,
          color: '#ffffff',
          outline: true,
          outlineColor: '#000000',
          pixelOffsetY: -50,
        },
        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));

          console.log('123', action);

          // 处理航偏角和俯仰角
          if (action.actionActuatorFunc == 'rotateYaw') {
            airPointInfo.aircraftHorizontalAngle = action.actionActuatorFuncParam.aircraftHeading;
          }

          if (action.actionActuatorFunc == 'gimbalRotate') {
            airPointInfo.cameraVerticalAngle =
              action.actionActuatorFuncParam.gimbalPitchRotateAngle;
          }

          airPointInfo.actions.push(actionConfig);
        });
        airPoints.value?.push(airPointInfo);
        // 回显航点
        displayWaypointAirLine(airPointInfo);
      });
      // 更新航线
      handlerDrawLine();
    }
  };

  // 回显航点航线信息
  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);

    // 地面投影点
    let stickGraphic = new mars3d.graphic.PointEntity({
      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: {
        color: '#f5f5f5',
        width: 1,
      },
    });
    lineGroundPointLayer.addGraphic(lineGraphic);
  };

  let stickGraphicLayer: mars3d.layer.GraphicLayer;

  // 飞行到此处
  const flyToThere = (e) => {
    if (!uavGraphicLayer) {
      uavGraphicLayer = new mars3d.layer.GraphicLayer({
        isAutoEditing: false, // 是否自动激活编辑
      });

      uavGraphicLayer.bindContextMenu([
        {
          text: '按轴平移',
          icon: 'fa fa-pencil',
          callback: (event) => {
            const graphic = event.graphic;
            if (moveTool) {
              return null;
            }

            // 按轴移动
            moveTool = new mars3d.thing.MatrixMove2({
              position: graphic.position,
            });
            map.addThing(moveTool);
            moveTool.on(mars3d.EventType.change, (event) => {
              graphic.position = event.position;
              uavGraphicMove(event);
            });
          },
        },
        {
          text: '停止平移',
          icon: 'fa fa-pencil',
          callback: (event) => {
            const graphic = event.graphic;
            if (moveTool) {
              moveTool.destroy();
              moveTool = null;
            }
          },
        },
        {
          text: '删除',
          icon: 'fa fa-camera-retro', // 支持 font-class 的字体方式图标
          callback: (e) => {
            deleteFlyToThere(e);
          },
        },
      ]);

      map.addLayer(uavGraphicLayer);

      uavGraphicLayer.on(mars3d.EventType.editMouseMove, (e) => {});
    }

    if (moveTool) {
      moveTool.destroy();
      moveTool = null;
    }

    if (!stickGraphicLayer) {
      stickGraphicLayer = new mars3d.layer.GraphicLayer({
        isAutoEditing: false, // 是否自动激活编辑
      });
      map.addLayer(stickGraphicLayer);
    }

    uavGraphicLayer.clear();
    stickGraphicLayer.clear();

    let position = mars3d.LngLatPoint.fromCartesian(e.position);

    let mark = graphicLayer.getGraphicById('flytothere');

    if (mark) {
      graphicLayer.removeGraphic(mark);
    }

    // 无人机点
    const graphic = new mars3d.graphic.BillboardEntity({
      id: 'flytothere-uav',
      name: '标点',
      position: [position._lng, position._lat, position._alt + 80],
      style: {
        image: '/map/uav-mark.png',
        scale: 0.3,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        label: {
          text: '',
          font_size: 14,
          color: '#ffffff',
          outline: true,
          outlineColor: '#000000',
          pixelOffsetY: -40,
        },
      },
    });

    // 贴地点
    const stickGraphic = new mars3d.graphic.PointEntity({
      id: 'flytothere-stick',
      position: [position._lng, position._lat],
      style: {
        color: '#f5f5f5',
        pixelSize: 8,
        outline: true,
        outlineColor: '#f5f5f5',
        outlineWidth: 1,
        clampToGround: true,
      },
    });

    stickGraphic.on(mars3d.EventType.editMouseMove, (e) => {
      const cartographic = mars3d.Cesium.Cartographic.fromCartesian(e.cartesian);
      // 弧度转度数
      const longitude = mars3d.Cesium.Math.toDegrees(cartographic.longitude);
      const latitude = mars3d.Cesium.Math.toDegrees(cartographic.latitude);
      const height = cartographic.height; // 高度（米）
      stickGraphicMove([longitude, latitude, height]);
    });

    // 连接线
    let connectLine = new mars3d.graphic.PolylineEntity({
      id: 'flytothere-line',
      positions: [
        [position._lng, position._lat, position._alt + 80],
        [position._lng, position._lat, 0],
      ],
      style: {
        color: '#f5f5f5',
        width: 1,
      },
    });

    uavGraphicLayer.addGraphic(graphic);
    stickGraphicLayer.addGraphic(stickGraphic);
    uavGraphicLayer.addGraphic(connectLine);

    // 获取无人机的坐标并返回
    let flyToPosition = mars3d.LngLatPoint.fromCartesian(graphic.position);
    emits('flyToThere', flyToPosition);
  };

  // 移动贴地点
  const stickGraphicMove = (e) => {
    let uav = uavGraphicLayer.getGraphicById('flytothere-uav');

    if (uav) {
      uav.setOptions({
        id: 'flytothere-uav',
        name: '标点',
        position: [e[0], e[1], 200],
        style: {
          image: '/map/uav-mark.png',
          scale: 0.3,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          label: {
            text: '',
            font_size: 14,
            color: '#ffffff',
            outline: true,
            outlineColor: '#000000',
            pixelOffsetY: -40,
          },
        },
      });
    }

    let line = uavGraphicLayer.getGraphicById('flytothere-line');
    if (line) {
      line.setOptions({
        id: 'flytothere-line',
        positions: [
          [e[0], e[1], 200],
          [e[0], e[1], 0],
        ],
        style: {
          color: '#f5f5f5',
          width: 1,
        },
      });
    }
  };

  // 删除飞行到此处
  const deleteFlyToThere = (e) => {
    let id = e.graphic.id;

    let uavGraphic = uavGraphicLayer.getGraphicById(id);
    if (uavGraphic) {
      uavGraphicLayer.removeGraphic(uavGraphic);
    }

    let lineGraphic = uavGraphicLayer.getGraphicById('flytothere-line');
    if (lineGraphic) {
      uavGraphicLayer.removeGraphic(lineGraphic);
    }

    let stickGraphic = stickGraphicLayer.getGraphicById('flytothere-stick');
    if (stickGraphic) {
      stickGraphicLayer.removeGraphic(stickGraphic);
    }

    if (moveTool) {
      moveTool.destroy();
      moveTool = null;
    }
    emits('flyToThere', { _lng: null, _lat: null, _alt: null });
  };

  // 无人机点按轴移动
  const uavGraphicMove = (e) => {
    const cartographic = mars3d.Cesium.Cartographic.fromCartesian(e.position);

    // 弧度转度数
    const longitude = mars3d.Cesium.Math.toDegrees(cartographic.longitude);
    const latitude = mars3d.Cesium.Math.toDegrees(cartographic.latitude);
    const height = cartographic.height; // 高度（米）

    emits('flyToThere', { _lng: longitude, _lat: latitude, _alt: height });

    let line = uavGraphicLayer.getGraphicById('flytothere-line');

    if (line) {
      line.setOptions({
        id: 'flytothere-line',
        positions: [
          [longitude, latitude, height],
          [longitude, latitude, 0],
        ],
        style: {
          color: '#f5f5f5',
          width: 1,
        },
      });
    }

    let stick = stickGraphicLayer.getGraphicById('flytothere-stick');
    if (stick) {
      stick.setOptions({
        id: 'flytothere-stick',
        position: [longitude, latitude],
        style: {
          color: '#f5f5f5',
          pixelSize: 8,
          outline: true,
          outlineColor: '#f5f5f5',
          outlineWidth: 1,
          clampToGround: true,
        },
      });
    }
  };

  // 预览航点航线
  const preViewPointWayLine = (position) => {
    if (moveTool) {
      moveTool.destroy();
      moveTool = null;
    }

    let uuid = buildUUID();
    // 参考起飞点

    let startGraphic = new mars3d.graphic.BillboardEntity({
      id: 'start-graphic',
      position: takeOffPointPosition.value,
      style: {
        image: '/map/start.png',
        scale: 1,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        label: {
          text: '参考起飞点',
          font_size: 14,
          color: '#ffffff',
          outline: true,
          outlineColor: '#000000',
          pixelOffsetY: -35,
        },
      },
    });
    graphicLayer.addGraphic(startGraphic);

    // 航点
    let graphic = new mars3d.graphic.BillboardEntity({
      id: uuid,
      name: '航点',
      position: [position._lng, position._lat, position._alt],
      style: {
        image: '/map/node.png',
        scale: 1,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        label: {
          text: '航点',
          font_size: 14,
          color: '#ffffff',
          outline: true,
          outlineColor: '#000000',
          pixelOffsetY: -35,
        },
      },
    });
    graphicLayer.addGraphic(graphic);

    // 地面投影点
    let stickGraphic = new mars3d.graphic.PointEntity({
      id: 'stick' + uuid,
      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' + uuid,
      positions: [
        [position._lng, position._lat, position._alt],
        [position._lng, position._lat, 0],
      ],
      style: {
        color: '#f5f5f5',
        width: 1,
      },
    });
    lineGroundPointLayer.addGraphic(lineGraphic);

    graphicLayer.flyTo();

    // 绘制航线
    handlerDrawLine();
  };

  // 预览面状航线
  const preViewPolygonWayLine = (lines) => {
    handlerDrawLine();
  };

  // 清空所有图层
  const clearAllLayer = () => {
    graphicLayer ? graphicLayer.clear() : null;

    stickGroundPointLayer ? stickGroundPointLayer.clear() : null;

    lineGroundPointLayer ? lineGroundPointLayer.clear() : null;

    polygonGraphicLayer ? polygonGraphicLayer.clear() : null;

    // 面状航线
    polygonLineGraphicLayer ? polygonLineGraphicLayer.clear() : null;

    // 文字标注
    textLabelGraphicLayer ? textLabelGraphicLayer.clear() : null;

    airPoints.value = [];
    polygonGeoJson.value = null;
  };

  //////////////////////////////项目、机场、无人机////////////////////////////////////////////

  //   设置机场位置
  const setAirportPosition = async () => {
    if (!graphicLayer) {
      return;
    }
    if (props.airPort.longitude == null) {
      return;
    }
    let point = graphicLayer.getGraphicById('set-airport');
    // // 创建点的经纬度信息
    let position = [props.airPort.longitude, props.airPort.latitude, 70];
    // 更新航点
    if (point) {
      // point.setOptions({
      //   id: 'set-airport',
      //   name: '机场位置',
      //   position: position,
      //   style: {
      //     image: '/projecthome/airport.png',
      //     width: 35,
      //     height: 59,
      //     scale: 1,
      //     horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      //     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      //     label: {
      //       text: '机场',
      //       font_size: 14,
      //       color: '#ffffff',
      //       outline: true,
      //       outlineColor: '#000000',
      //       pixelOffsetY: -70,
      //     },
      //   },
      // });
    } else {
      let startGraphic = new mars3d.graphic.BillboardEntity({
        id: 'set-airport',
        position: position,
        style: {
          image: '/projecthome/airport.png',
          width: 35,
          height: 59,
          scale: 1,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          label: {
            text: '机场',
            font_size: 14,
            color: '#ffffff',
            outline: true,
            outlineColor: '#000000',
            pixelOffsetY: -70,
          },
        },
      });
      graphicLayer.addGraphic(startGraphic);
    }
  };

  // 项目首页设置机场位置
  const homeSetAirportPosition = () => {
    if (!graphicLayer) {
      return;
    }
    // // 创建点的经纬度信息
    let position = [props.homeAirport.longitude, props.homeAirport.latitude, 70];
    let airportImg =
      props.homeAirport.mode_code == 4
        ? '/projecthome/work_airport.png'
        : '/projecthome/standby_airport.png';
    let airportLiveImg =
      props.homeAirport.mode_code == 4
        ? '/projecthome/work_airport_live.png'
        : '/projecthome/standby_airport_live.png';
    // 更新航点
    if (homeStartGraphic && homeStartGraphicLive) {
      homeStartGraphic.position = position;
      homeStartGraphic.image = airportImg;
      homeStartGraphicLive.position = position;
      homeStartGraphicLive.image = airportLiveImg;
    } else {
      homeStartGraphic = new mars3d.graphic.BillboardEntity({
        id: 'set-home-airport',
        position: position,
        style: {
          image: airportImg,
          width: 118,
          height: 133,
          scale: 1,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          label: {
            text: '机场',
            font_size: 14,
            color: '#ffffff',
            outline: true,
            outlineColor: '#000000',
            pixelOffsetY: -70,
          },
        },
      });
      homeStartGraphicLive = new mars3d.graphic.BillboardEntity({
        id: 'set-home-airport-live',
        position: position,
        style: {
          image: airportLiveImg,
          width: 21,
          height: 21,
          scale: 1,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          pixelOffset: new Cesium.Cartesian2(45, -107),
          label: {
            text: '机场',
            font_size: 14,
            color: '#ffffff',
            outline: true,
            outlineColor: '#000000',
            pixelOffsetY: -70,
          },
        },
      });
      homeStartGraphic.on(mars3d.EventType.click, function (event) {
        emits('clickAirPort');
      });
      homeStartGraphicLive.on(mars3d.EventType.click, function (event) {
        emits('changeAirportLive', true);
        if (props.homeAirport.mode_code == 4) {
          emits('changeUAVLive', true);
        }
      });
      graphicLayer.addGraphic(homeStartGraphic);
      graphicLayer.addGraphic(homeStartGraphicLive);
    }
  };
  //   设置无人机轨迹
  const setUAVPosition = () => {
    let point = graphicLayer.getGraphicById('set-uav');
    const position = [props.uavTrack.longitude, props.uavTrack.latitude, props.uavTrack.height];
    // 更新航点
    if (point) {
      point.setOptions({
        id: 'set-uav',
        name: '飞行器位置',
        position: position,
        style: {
          url: '/projecthome/dajiang.gltf',
          scale: 0.1,
          minimumPixelSize: 100,
        },
        frameRate: 1,
      });
    } else {
      const graphicModel = new mars3d.graphic.ModelPrimitive({
        id: 'set-uav',
        name: '飞行器位置',
        position: position,
        style: {
          url: '/projecthome/dajiang.gltf',
          scale: 0.1,
          minimumPixelSize: 100,
        },
        frameRate: 1,
      });
      graphicLayer.addGraphic(graphicModel);
    }

    let route = graphicLayer.getGraphicById('uav-route');
    if (!route) {
      route = new mars3d.graphic.Route({
        id: 'uav-route',
        polyline: {
          color: '#3388ff',
          width: 2,
        },
        flyTo: true,
      });
      graphicLayer.addGraphic(route);
      // 是与route绑定的矢量对象，放在route构造时一起构造
      addGroundLine(route, 'uav-route');
      addRectSensor(route, 'uav-route');
    }
    if (props.uavTrack.longitude) {
      const positionVal = Cesium.Cartesian3.fromDegrees(
        props.uavTrack.longitude,
        props.uavTrack.latitude,
        props.uavTrack.height,
      );
      route.addTimePosition(positionVal, Cesium.JulianDate.fromDate(new Date()));
      const airPortStoreVal = airPortStore();
      const uav = airPortStoreVal.getUAV;
      const type_subtype_gimbalindex = props.uavTrack[uav.camera_index];
      if (type_subtype_gimbalindex) {
        const rectSensor = graphicLayer.getGraphicById('uav-route-rectSensor');
        rectSensor.heading = type_subtype_gimbalindex.gimbal_yaw; //四周方向角，0至360度角度值
        rectSensor.pitch = type_subtype_gimbalindex.gimbal_pitch; //俯仰角，上下摇摆的角度，0至360度角度值
        rectSensor.roll = type_subtype_gimbalindex.gimbal_roll + 90; //滚转角，左右摆动的角度，0至360度角度值
        rectSensor.angle1 = 10; //夹角1，半场角度，取值范围 0.1-89.9
        rectSensor.angle2 = 10; //夹角2，半场角度，取值范围 0.1-89.9
      }
    }
  };
  // 绘制连接地面线
  function addGroundLine(route) {
    const groundPoint = new mars3d.graphic.PointPrimitive({
      id: route.id + '-groundPoint',
      position: route.position,
      style: {
        color: '#ff0000',
        pixelSize: 6,
      },
    });
    graphicLayer.addGraphic(groundPoint);

    const linePositions = [];
    const groundLine = new mars3d.graphic.PolylineEntity({
      id: route.id + '-groundLine',
      positions: new Cesium.CallbackProperty(function (time) {
        return linePositions;
      }, false),
      style: {
        width: 1,
        materialType: mars3d.MaterialType.PolylineDash,
        materialOptions: {
          color: Cesium.Color.WHITE,
          dashLength: 20,
        },
      },
    });
    graphicLayer.addGraphic(groundLine);

    route.on(mars3d.EventType.change, function (event) {
      const wrjPt = route.position;
      const wrjCarto = Cesium.Cartographic.fromCartesian(wrjPt);
      const dmHeight = mars3d.PointUtil.getHeight(map?.scene, wrjCarto, { max: wrjCarto.height });
      const pt2 = Cesium.Cartesian3.fromRadians(wrjCarto.longitude, wrjCarto.latitude, dmHeight);

      // 更新竖直线坐标
      linePositions[0] = wrjPt;
      linePositions[1] = pt2;

      // 更新其他矢量对象
      groundPoint.position = pt2;

      if (route.label) {
        // const wrjHeight = wrjCarto.height - dmHeight // 相对地面高度（AGL）‌: 飞行海拔-地面海拔
        // fixedRoute.label.text = `火星无人机\nAGL:${mars3d.Util.formatNum(wrjHeight, 2)}m`

        // 绝对高度（ASL）‌: 飞行海拔
        route.label.text = `火星无人机\nASL:${mars3d.Util.formatNum(wrjCarto.height, 2)}m`;
      }
    });
  }
  // 绘制 相机视锥体
  function addRectSensor(route) {
    const rectSensor = new mars3d.graphic.RectSensor({
      id: route.id + '-rectSensor',
      position: route.property,
      style: {
        angle1: 10,
        angle2: 10,
        length: 10,
        rayEllipsoid: true,
        color: 'rgba(0,255,255,0.3)',
        outline: true,
        topShow: true,
        topSteps: 2,
        flat: true,
        cameraHpr: true,
        heading: 0,
        pitch: 0,
        roll: 90,
      },
    });
    graphicLayer.addGraphic(rectSensor);

    // 连接线
    const rectLine = new mars3d.graphic.PolylineEntity({
      id: route.id + '-rectLine',
      positions: new Cesium.CallbackProperty(function (time) {
        const localEnd = rectSensor?.rayPosition;
        if (!localEnd) {
          return [];
        }
        return [rectSensor.position, localEnd];
      }, false),
      style: {
        arcType: Cesium.ArcType.NONE,
        materialType: mars3d.MaterialType.PolylineDash,
        materialOptions: {
          color: '#ff0000',
        },
        width: 1,
      },
    });
    graphicLayer.addGraphic(rectLine);
  }

  /////////////////////////////////动作处理//////////////////////////////////////
  const addAction = (action) => {
    // 需要特殊处理拍照动作
    if (action.value == 'takePhoto') {
      currentAirPoint.value.actions.push(JSON.parse(JSON.stringify(airPointActions['focus'])));
    }

    // 当前航点添加动作
    currentAirPoint.value.actions.push(JSON.parse(JSON.stringify(action)));
  };
</script>

<style scoped>
  .mars3d-container {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .air-container {
    width: 400px;
    background: #0d0e15c1;
    position: absolute;
    height: calc(100vh - 80px);
    top: 40px;
    left: 40px;
    z-index: 999;
  }

  .airpolygon-container {
    width: 400px;
    background: #0d0e15c1;
    overflow-y: hidden;
    position: absolute;
    height: calc(100vh - 80px);
    top: 40px;
    left: 40px;
    z-index: 999;
  }

  .airpoint-config-container {
    width: 400px;
    background: #0d0e15c1;
    overflow-y: hidden;
    position: absolute;
    height: calc(100vh - 80px);
    top: 40px;
    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;
  }

.airline-preview-container{
    width:500px;
    background:rgba(0,0,0,0.6);
    position: absolute;
    bottom:100px;
    left:50%;
    transform: translate(0%,0);
    z-index:999;
    border-radius: 10px;
    display: flex;
    padding:20px;
    font-size:18px;
    color:#fff;
  }
  .airline-preview-container .info-item{
    flex:1;
    text-align: center;
  }

  .airline-preview-container .info-item .info-label{
    font-size:14px;
    margin-top:12px;
  }
</style>
