<template>
  <div ref="vChartRef" id="mars3d-container" class="mars3d-container">
    <div class="markButtons">
      <div
        :class="mapDrawType == 'drawPoint' ? 'button_choose' : 'button_nochoose'"
        @click="drawPoint"
      >
        <a-popover placement="left">
          <template #content>
            <div style="display: flex; gap: 5px">
              <div
                class="popoverMark"
                v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
                :key="color"
                :style="{ background: color }"
                @click="drawColorPoint = color"
              >
                <CheckOutlined v-if="drawColorPoint == color" style="color: white" />
              </div>
            </div>
          </template>
          <AntDesignOutlined
            :style="{
              color: drawColorPoint,
              fontSize: '20px',
            }"
          />
        </a-popover>
      </div>
      <div
        :class="mapDrawType == 'drawPolyline' ? 'button_choose' : 'button_nochoose'"
        @click="drawPolyline"
      >
        <a-popover placement="left">
          <template #content>
            <div style="display: flex; gap: 5px">
              <div
                class="popoverMark"
                v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
                :key="color"
                :style="{ background: color }"
                @click="drawColorPolyline = color"
              >
                <CheckOutlined v-if="drawColorPolyline == color" style="color: white" />
              </div>
            </div>
          </template>
          <ExpandAltOutlined
            :style="{
              color: drawColorPolyline,
              fontSize: '20px',
            }"
          />
        </a-popover>
      </div>
      <div
        :class="mapDrawType == 'drawPolygon' ? 'button_choose' : 'button_nochoose'"
        @click="drawPolygon"
      >
        <a-popover placement="left">
          <template #content>
            <div style="display: flex; gap: 5px">
              <div
                class="popoverMark"
                v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
                :key="color"
                :style="{ background: color }"
                @click="drawColorPolygon = color"
              >
                <CheckOutlined v-if="drawColorPolygon == color" style="color: white" />
              </div>
            </div>
          </template>
          <BorderOutlined
            :style="{
              color: drawColorPolygon,
              fontSize: '20px',
            }"
          />
        </a-popover>
      </div>
      <div
        :class="mapDrawType == 'drawCricle' ? 'button_choose' : 'button_nochoose'"
        @click="drawCricle"
      >
        <a-popover placement="left">
          <template #content>
            <div style="display: flex; gap: 5px">
              <div
                class="popoverMark"
                v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
                :key="color"
                :style="{ background: color }"
                @click="drawColorCricle = color"
              >
                <CheckOutlined v-if="drawColorCricle == color" style="color: white" />
              </div>
            </div>
          </template>
          <LogoutOutlined
            :style="{
              color: drawColorCricle,
              fontSize: '20px',
            }"
          />
        </a-popover>
      </div>
    </div>
    <div class="areaButtons">
      <div
        :class="mapAreaDrawFlag ? 'button_choose' : 'button_nochoose'"
        style="border-radius: 3px"
        @click="drawArea"
      >
        <a-popover placement="leftTop">
          <template #content>
            <div style="display: block; gap: 5px; width: 170px">
              <div
                class="popoverArea"
                v-for="type in [
                  'nfz_Polygon',
                  'nfz_Circle',
                  'dfence_Polygon',
                  'dfence_Circle',
                  'noland_Polyline',
                ]"
                :key="type"
                :style="{ background: '#ffffff' }"
                @click="areaDrawType = type"
              >
                <!-- 自定义禁降区 -->
                <div
                  v-if="type.indexOf('noland') > -1"
                  :style="{
                    width: '15px',
                    height: '15px',
                    background: `linear-gradient(to bottom right, transparent 45%, #FF9900 45%, #FF9900 60%, transparent 60%), #ffffff00`,
                    'margin-right': '6px',
                  }"
                />
                <!-- 自定义作业区 -->
                <div
                  v-if="type.indexOf('dfence') > -1"
                  :style="{
                    width: '13px',
                    height: '13px',
                    outline: `2px solid #00FF00`,
                    'margin-right': '6px',
                    'border-radius': type == 'dfence_Circle' ? '6.5px' : '0px',
                  }"
                />
                <!-- 自定义限飞区 -->
                <div
                  v-if="type.indexOf('nfz') > -1"
                  :style="{
                    width: '13px',
                    height: '13px',
                    outline: `2px solid #FF0000`,
                    background: `#FF000055`,
                    'margin-right': '6px',
                    'border-radius': type == 'nfz_Circle' ? '6.5px' : '0px',
                  }"
                />
                <div style="width: 130px" v-if="type == 'nfz_Polygon'">自定义多边形限飞区</div>
                <div style="width: 130px" v-if="type == 'nfz_Circle'">自定义圆形限飞区</div>
                <div style="width: 130px" v-if="type == 'dfence_Polygon'">自定义多边形作业区</div>
                <div style="width: 130px" v-if="type == 'dfence_Circle'">自定义圆形作业区</div>
                <div style="width: 130px" v-if="type == 'noland_Polyline'">自定义禁降区</div>
                <CheckOutlined v-if="areaDrawType == type" style="color: blue; margin-left: 10px" />
              </div>
            </div>
          </template>
          <!-- 自定义禁降区 -->
          <div
            v-if="areaDrawType.indexOf('noland') > -1"
            :style="{
              width: '18px',
              height: '18px',
              background: `linear-gradient(to bottom right, transparent 45%, #FF9900 45%, #FF9900 60%, transparent 60%), #ffffff00`,
            }"
          />
          <!-- 自定义作业区 -->
          <div
            v-if="areaDrawType.indexOf('dfence') > -1"
            :style="{
              width: '16px',
              height: '16px',
              outline: `2px solid #00FF00`,

              'border-radius': areaDrawType == 'dfence_Circle' ? '6.5px' : '0px',
            }"
          />
          <!-- 自定义限飞区 -->
          <div
            v-if="areaDrawType.indexOf('nfz') > -1"
            :style="{
              width: '16px',
              height: '16px',
              outline: `2px solid #FF0000`,
              background: `#FF000055`,
              'border-radius': areaDrawType == 'nfz_Circle' ? '6.5px' : '0px',
            }"
          />
        </a-popover>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch, onMounted, defineEmits } from 'vue';
  import * as mars3d from 'mars3d';
  import * as Cesium from 'mars3d-cesium';
  import { circle, rect, triangle } from './svg';
  import {
    CheckOutlined,
    AntDesignOutlined,
    ExpandAltOutlined,
    BorderOutlined,
    LogoutOutlined,
  } from '@ant-design/icons-vue';
  import {
    GetWorkAreaList,
    AddWorkArea,
    UpdateWorkArea,
    DeleteWorkArea,
  } from '@/api/demo/mediaLibrary';
  import * as turf from '@turf/turf';
  import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
  import dayjs from 'dayjs';

  const props = defineProps([
    'allMarkDataList',
    'nowShowMarkData',
    'allImageDataList',
    'nowShowImageData',
    'allAreaDataList',
    'nowShowAreaData',
  ]);
  const emits = defineEmits([
    'setNowShowMarkData',
    'setNowShowImageData',
    'setNowShowAreaData',
    'closePathImageInfo',
    'setAllMarkData',
    'setAllImageData',
    'setAllAreaData',
  ]);

  const vChartRef: any = ref<HTMLElement>();
  let map: mars3d.Map; // 地图对象
  let graphicLayers = new mars3d.layer.GraphicLayer({
    isAutoEditing: true,
  });
  // 地图标注
  // 地图标注-点
  let mark_PointGraphicData: any = [];
  // 地图标注-线
  let mark_LineStringGraphicData: any = [];
  // 地图标注-多边形
  let mark_PolygonGraphicData: any = [];
  // 地图标注-圈
  let mark_CircleGraphicData: any = [];

  // 地图照片
  // 地图照片-地面点
  let image_bottomPointGraphicData: any = [];
  // 地图照片-飞行点
  let image_flightointGraphicData: any = [];
  // 地图照片-地面点到展示图片的线
  let image_bottomImagePolylineGraphicData: any = [];
  // 地图照片-展示图片
  let image_imageGraphicData: any = [];

  // 地图作业区域
  // 地图作业区域-禁降区-线
  let area_noland_LineStringGraphicData: any = [];
  // 地图作业区域-作业区-多边形
  let area_dfence_PolygonGraphicData: any = [];
  // 地图作业区域-作业区-圈
  let area_dfence_CircleGraphicData: any = [];
  // 地图作业区域-限飞区-多边形
  let area_nfz_PolygonGraphicData: any = [];
  // 地图作业区域-限飞区-圈
  let area_nfz_CircleGraphicData: any = [];

  onMounted(() => {
    initMap();
  });

  const initMap = () => {
    map = new mars3d.Map(vChartRef.value, {
      scene: {
        center: {
          lat: 35.134608,
          lng: 118.29853,
          alt: 8306.3,
          heading: 360,
          pitch: -45,
        },
        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: false,
          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',
          opacity: 1,
        },
        {
          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',
              eventParent: {
                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',
                    show: true,
                  },
                  {
                    name: '注记',
                    type: 'tdt',
                    layer: 'img_z',
                    show: true,
                  },
                ],
                show: true,
              },
              private: false,
              id: 'm-770c35e7-9054-4259-b5ee-c15f108becd0',
              opacity: 1,
              pid: 2021,
              parent: {
                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',
                    show: true,
                  },
                  {
                    name: '注记',
                    type: 'tdt',
                    layer: 'img_z',
                    show: true,
                  },
                ],
                show: true,
              },
              zIndex: 1,
            },
            {
              name: '注记',
              type: 'tdt',
              layer: 'img_z',
              eventParent: {
                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',
                    show: true,
                  },
                  {
                    name: '注记',
                    type: 'tdt',
                    layer: 'img_z',
                    show: true,
                  },
                ],
                show: true,
              },
              private: false,
              id: 'm-3b881368-574b-48a5-88b2-8b3c2c48fd62',
              opacity: 1,
              pid: 2021,
              parent: {
                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',
                    show: true,
                  },
                  {
                    name: '注记',
                    type: 'tdt',
                    layer: 'img_z',
                    show: true,
                  },
                ],
                show: true,
              },
              zIndex: 2,
            },
          ],
          show: true,
          opacity: 1,
        },
      ],
      layers: [],
    });
    if (map) {
      // 图层
      map.addLayer(graphicLayers);
      showAllMarkDataList();
      showAllImageDataList();
      showAllAreaDataList();
      handlerLocation([118.2958779, 35.1342553]);
      // 监听地图点击事件
      map.on(mars3d.EventType.click, function (event) {
        if (!event.czmObject) {
          // 地图标注-恢复默认
          if (props.nowShowMarkData.id) {
            markRestoreDefault();
            emits('setNowShowMarkData', {});
          }
          // // 地图作业区域-恢复默认
          // if (props.nowShowAreaData.id) {
          //   areaRestoreDefault();
          //   emits('setNowShowAreaData', {});
          // }
        }
      });
    }
  };

  // 地图标注--------------------------------------------------------------------
  // 地图标注-初始化-遍历展示
  const showAllMarkDataList = async () => {
    // 删除旧数据
    mark_PointGraphicData?.forEach((graphicLayer) => {
      graphicLayers.removeGraphic(graphicLayer);
    });
    mark_LineStringGraphicData?.forEach((graphicLayer) => {
      graphicLayers.removeGraphic(graphicLayer);
    });
    mark_PolygonGraphicData?.forEach((graphicLayer) => {
      graphicLayers.removeGraphic(graphicLayer);
    });
    mark_CircleGraphicData?.forEach((graphicLayer) => {
      graphicLayers.removeGraphic(graphicLayer);
    });
    // 图层数据
    mark_PointGraphicData = [];
    mark_LineStringGraphicData = [];
    mark_PolygonGraphicData = [];
    mark_CircleGraphicData = [];
    // 地图标注-遍历
    props.allMarkDataList.forEach((item, index) => {
      let content = item.resource.content;
      // 地图标注-点
      if (content.geometry.type == 'Point') {
        let pointGraphic = new mars3d.graphic.BillboardEntity({
          id: item.id,
          position: content.geometry.coordinates,
          style: {
            image: 'https://data.mars3d.cn/img/marker/mark-red.png',
            clampToGround: false,
            scale: 1,
            label: {
              text: `${item.name}`,
              font_size: content.properties.font_size,
              color: '#000000',
              outline: true,
              outlineColor: '#ffffff',
              outlineWidth: 6,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
              pixelOffset: [25, 0],
            },
          },
        });
        // 监听mouseover事件
        pointGraphic.on(mars3d.EventType.mouseOver, function () {
          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
            pointGraphic.setStyle({
              label: {
                color: content.properties.color,
              },
            });
          }
        });
        // 监听mouseout事件
        pointGraphic.on(mars3d.EventType.mouseOut, function () {
          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
            pointGraphic.setStyle({
              label: {
                color: '#000000',
              },
            });
          }
        });
        // 监听点击事件
        pointGraphic.on(mars3d.EventType.click, function () {
          // 全部恢复默认
          markRestoreDefault();
          pointGraphic.setStyle({
            label: {
              color: content.properties.color,
            },
          });
          emits('setNowShowMarkData', item);
        });
        // 将点对象 添加到图层中
        graphicLayers.addGraphic(pointGraphic);
        // 数据
        mark_PointGraphicData.push(pointGraphic);
      }
      // 地图标注-线
      if (content.geometry.type == 'LineString') {
        let lineGraphic = new mars3d.graphic.PolylineEntity({
          id: item.id,
          positions: content.geometry.coordinates,
          style: {
            color: content.properties.color,
            width: content.properties.line_width,
            label: {
              text: `${item.name}`,
              font_size: content.properties.font_size,
              color: '#000000',
              outline: true,
              outlineColor: '#ffffff',
              outlineWidth: 6,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
              pixelOffset: [25, -5],
            },
          },
          hasEdit: true,
          drawShowMeasure: true,
        });
        // 监听mouseover事件
        lineGraphic.on(mars3d.EventType.mouseOver, function () {
          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
            lineGraphic.setStyle({
              label: {
                color: content.properties.color,
              },
            });
          }
        });
        // 监听mouseout事件
        lineGraphic.on(mars3d.EventType.mouseOut, function () {
          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
            lineGraphic.setStyle({
              label: {
                color: '#000000',
              },
            });
          }
        });
        // 监听点击事件
        lineGraphic.on(mars3d.EventType.click, function () {
          // 全部恢复默认
          markRestoreDefault();
          lineGraphic.setStyle({
            label: {
              color: content.properties.color,
            },
          });
          emits('setNowShowMarkData', item);
        });
        // 将线对象 添加到图层中
        graphicLayers.addGraphic(lineGraphic);
        // 数据
        mark_LineStringGraphicData.push(lineGraphic);
      }
      // 地图标注-多边形
      if (content.geometry.type == 'Polygon') {
        let polygonGraphic = new mars3d.graphic.PolygonEntity({
          id: item.id,
          positions: content.geometry.coordinates,
          style: {
            color: content.properties.color,
            fill: false,
            width: content.properties.line_width,
            outlineColor: content.properties.color,
            outlineWidth: 2,
            outline: true,
            clampToGround: content.properties.clampToGround,
            label: {
              text: `${item.name}`,
              font_size: content.properties.font_size,
              color: '#000000',
              outline: true,
              outlineColor: '#ffffff',
              outlineWidth: 6,
              verticalOrigin: Cesium.VerticalOrigin.CENTER,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            },
          },
        });
        // 监听mouseover事件
        polygonGraphic.on(mars3d.EventType.mouseOver, function () {
          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
            polygonGraphic.setStyle({
              // color: '#ffffff00',
              label: {
                color: content.properties.color,
              },
            });
          }
        });
        // 监听mouseout事件
        polygonGraphic.on(mars3d.EventType.mouseOut, function () {
          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
            polygonGraphic.setStyle({
              label: {
                color: '#000000',
              },
            });
          }
        });
        // 监听点击事件
        polygonGraphic.on(mars3d.EventType.click, function () {
          // 全部恢复默认
          markRestoreDefault();
          polygonGraphic.setStyle({
            label: {
              color: content.properties.color,
            },
          });
          emits('setNowShowMarkData', item);
        });
        // 将形状对象 添加到图层中
        graphicLayers.addGraphic(polygonGraphic);
        // 数据
        mark_PolygonGraphicData.push(polygonGraphic);
      }
      // 地图标注-圆
      if (content.geometry.type == 'Circle') {
        let circleGraphic = new mars3d.graphic.CircleEntity({
          id: item.id,
          position: content.geometry.coordinates,
          style: {
            radius: content.geometry.radius,
            fill: false,
            outlineColor: content.properties.color,
            outlineWidth: 4,
            outline: true,
            clampToGround: content.properties.clampToGround,
            label: {
              text: `${item.name}`,
              font_size: content.properties.font_size,
              color: '#000000',
              outline: true,
              outlineColor: '#ffffff',
              outlineWidth: 6,
              verticalOrigin: Cesium.VerticalOrigin.CENTER,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            },
          },
        });
        // 监听mouseover事件
        circleGraphic.on(mars3d.EventType.mouseOver, function () {
          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
            circleGraphic.setStyle({
              label: {
                color: content.properties.color,
              },
            });
          }
        });
        // 监听mouseout事件
        circleGraphic.on(mars3d.EventType.mouseOut, function () {
          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
            circleGraphic.setStyle({
              label: {
                color: '#000000',
              },
            });
          }
        });
        // 监听点击事件
        circleGraphic.on(mars3d.EventType.click, function () {
          // 全部恢复默认
          markRestoreDefault();
          circleGraphic.setStyle({
            label: {
              color: content.properties.color,
            },
          });
          emits('setNowShowMarkData', item);
        });
        // 将圆对象 添加到图层中
        graphicLayers.addGraphic(circleGraphic);
        // 数据
        mark_CircleGraphicData.push(circleGraphic);
      }
    });
  };
  // 地图标注-恢复默认
  function markRestoreDefault() {
    // 点-恢复默认
    for (let i = 0; i < mark_PointGraphicData.length; i++) {
      let pointGraphic = mark_PointGraphicData[i];
      pointGraphic.setStyle({
        label: {
          color: '#000000',
        },
      });
    }
    // 线-恢复默认
    for (let i = 0; i < mark_LineStringGraphicData.length; i++) {
      let lineGraphic = mark_LineStringGraphicData[i];
      lineGraphic.setStyle({
        label: {
          color: '#000000',
        },
      });
    }
    // 矩形-恢复默认
    for (let i = 0; i < mark_PolygonGraphicData.length; i++) {
      let polygonGraphic = mark_PolygonGraphicData[i];
      polygonGraphic.setStyle({
        label: {
          color: '#000000',
        },
      });
    }
    // 圆形-恢复默认
    for (let i = 0; i < mark_CircleGraphicData.length; i++) {
      let circleGraphic = mark_CircleGraphicData[i];
      circleGraphic.setStyle({
        label: {
          color: '#000000',
        },
      });
    }
  }
  // 地图标注-SVG内容生成图片链接
  function svgToDataURL(svgString) {
    return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgString)));
  }

  // 地图标注-绘制--------------------------------------------------------------------
  const mapDrawType: any = ref('');
  const drawColorPoint = ref('#2D8CF0');
  const drawColorPolyline = ref('#2D8CF0');
  const drawColorPolygon = ref('#2D8CF0');
  const drawColorCricle = ref('#2D8CF0');

  // 地图标注-绘制-点
  async function drawPoint() {
    if (mapDrawType.value == 'drawPoint') {
      mapDrawType.value = '';
      return;
    }
    mapDrawType.value = 'drawPoint';
    const graphic = await graphicLayers.startDraw({
      type: 'billboard',
      style: {
        image: 'https://data.mars3d.cn/img/marker/mark-red.png',
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        label: {
          text: '可以同时支持文字',
          font_size: 26,
          color: drawColorPoint.value,
          outline: true,
          outlineColor: '#000000',
          pixelOffsetY: -60,
        },
      },
    });
  }
  // 地图标注-绘制-线
  async function drawPolyline() {
    if (mapDrawType.value == 'drawPolyline') {
      mapDrawType.value = '';
      return;
    }
    mapDrawType.value = 'drawPolyline';
    const graphic = await graphicLayers.startDraw({
      type: 'polyline',
      style: {
        pixelSize: 12,
        color: '#3388ff',
        label: {
          text: '可以同时支持文字',
          font_size: 20,
          color: '#ffffff',
          outline: true,
          outlineColor: '#000000',
          pixelOffsetY: -20,
        },
      },
    });
    console.log('标绘完成', graphic.toJSON());
  }
  // 地图标注-绘制-形状
  async function drawPolygon() {
    if (mapDrawType.value == 'drawPolygon') {
      mapDrawType.value = '';
      return;
    }
    mapDrawType.value = 'drawPolygon';
    const graphic = await graphicLayers.startDraw({
      type: 'polygon',
      style: {
        color: '#ffff00',
        opacity: 0.5,
        outline: true,
        outlineColor: '#ffffff',
        outlineWidth: 2.0,
      },
    });
    console.log('标绘完成', graphic.toJSON());
  }
  // 地图标注-绘制-形状
  async function drawCricle() {
    if (mapDrawType.value == 'drawCricle') {
      mapDrawType.value = '';
      return;
    }
    mapDrawType.value = 'drawCricle';
    const graphic = await graphicLayers.startDraw({
      type: 'circle',
      style: {
        color: '#ffff00',
        opacity: 0.6,
        outline: true,
        outlineColor: '#ffffff',
        outlineWidth: 2.0,
      },
    });
    console.log('标绘完成', graphic.toJSON());
  }

  // 地图照片--------------------------------------------------------------------
  // 地图照片-初始化-遍历展示
  const showAllImageDataList = async () => {
    // 删除旧数据
    image_bottomPointGraphicData?.forEach((graphicLayer) => {
      graphicLayers.removeGraphic(graphicLayer);
    });
    image_flightointGraphicData?.forEach((graphicLayer) => {
      graphicLayers.removeGraphic(graphicLayer);
    });
    image_bottomImagePolylineGraphicData?.forEach((graphicLayer) => {
      graphicLayers.removeGraphic(graphicLayer);
    });
    image_imageGraphicData?.forEach((graphicLayer) => {
      graphicLayers.removeGraphic(graphicLayer);
    });
    // 图层数据
    image_bottomPointGraphicData = [];
    image_flightointGraphicData = [];
    image_bottomImagePolylineGraphicData = [];
    image_imageGraphicData = [];

    // 地图照片-遍历
    let rotation = 0;
    props.allImageDataList.forEach((item, index) => {
      if (
        item.photo_position &&
        item.photo_position.lng &&
        item.photo_position.lat &&
        item.photo_position.abs_alt
      ) {
        const image = new Image();
        image.crossOrigin = 'Anonymous';
        // image.src = item.preview_url;
        image.src =
          'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871';
        image.onload = () => {
          // 创建Canvas元素
          const canvas = document.createElement('canvas');
          canvas.width = 34;
          canvas.height = 29;
          // 获取Canvas绘图上下文
          const ctx = canvas.getContext('2d');
          ctx.fillStyle = 'white';
          ctx?.fillRect(0, 0, canvas.width, canvas.height);
          // 在Canvas上绘制图片
          ctx.drawImage(image, 2, 2, 30, 25);
          // 将Canvas内容转换为图片的数据URL
          const dataURL1 = canvas.toDataURL('image/png');

          // 在Canvas上绘制图片（假设image变量已经定义并且是一个有效的Image对象）
          ctx.drawImage(image, 2, 2, 30, 25);
          // 设置边框颜色和宽度
          ctx.strokeStyle = '#2d8cef'; // 蓝色边框
          ctx.lineWidth = 1; // 边框宽度
          // 绘制边框
          ctx.strokeRect(0.5, 0.5, canvas.width - 1, canvas.height - 1); // 调整坐标和尺寸以适应边框宽度
          // 将Canvas内容转换为图片的数据URL
          const dataURL2 = canvas.toDataURL('image/png');

          // 位置
          let position = [
            parseFloat(item?.photo_position?.lng),
            parseFloat(item.photo_position.lat),
            parseFloat(item.photo_position.abs_alt),
          ];
          // 地形高度
          mars3d.PointUtil.getSurfaceHeight(
            map.scene,
            Cesium.Cartesian3.fromDegrees(position[0], position[1]),
          ).then((point) => {
            // 地面点
            let bottomPointGraphic = new mars3d.graphic.BillboardEntity({
              id: item.id + '_bottom',
              position: [position[0], position[1], point.height],
              style: {
                image: '/src/assets/images/flightoperation/mediaLibraryPoint.png',
                clampToGround: true,
                scale: 1,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              },
              hasEdit: false,
            });
            if (index + 1 < props.allImageDataList.length) {
              const afterItem = props.allImageDataList[index + 1];
              let lng = afterItem.photo_position.lng - item.photo_position.lng;
              let lat = afterItem.photo_position.lat - item.photo_position.lat;
              let angleARad = Math.atan(lng / lat);
              let angleA = (angleARad * 180) / Math.PI;
              rotation = angleA;
            }
            // 飞行点
            let flightointGraphic = new mars3d.graphic.BillboardEntity({
              id: item.id + '_flight',
              position: [position[0], position[1], position[2] * 2],
              style: {
                image: '/src/assets/images/flightoperation/mediaLibraryFlight.png',
                clampToGround: false,
                scale: 1,
                verticalOrigin: Cesium.VerticalOrigin.CENTER,
                rotation: rotation,
              },
              hasEdit: false,
              show: false,
            });
            // 地面点到展示图片的线
            let bottomImagePolylineGraphic = new mars3d.graphic.PolylineEntity({
              id: item.id + '_polyline',
              positions: [
                Cesium.Cartesian3.fromDegrees(position[0], position[1], point.height),
                Cesium.Cartesian3.fromDegrees(position[0], position[1], position[2]),
              ],
              style: {
                color: '#ffffff',
                width: 1, // 线宽
                clampToGround: false,
              },
              hasEdit: false,
              // 用于恢复默认
              defaultPosition: position,
              // 地形高度
              surfaceHeight: point.height,
            });
            // 展示图片
            let imageGraphic = new mars3d.graphic.BillboardEntity({
              id: item.id + '_image',
              position: [position[0], position[1], position[2]],
              style: {
                image: dataURL1,
                clampToGround: false,
                scale: 1,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                label: {
                  text: `${item.name}`,
                  font_size: 14,
                  color: '#2d8cf0',
                  outline: true,
                  outlineColor: '#ffffff',
                  verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                  horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                  pixelOffset: [25, -5],
                  show: false,
                },
              },
              hasEdit: false,
              // 用于恢复默认
              defaultImage: dataURL1,
              // 用于外侧修改图片
              chooseImage: dataURL2,
            });
            // 监听mouseover事件
            imageGraphic.on(mars3d.EventType.mouseOver, function () {
              if (!props.nowShowImageData || props.nowShowImageData.id !== item.id) {
                // 鼠标悬停时更改图片、图片变大
                imageGraphic.setStyle({
                  image: dataURL2,
                  scale: 1.1,
                  label: {
                    show: true,
                  },
                });
              }
            });
            // 监听mouseout事件
            imageGraphic.on(mars3d.EventType.mouseOut, function () {
              if (!props.nowShowImageData || props.nowShowImageData.id !== item.id) {
                // 鼠标移出时恢复默认图片、图片恢复大小
                imageGraphic.setStyle({
                  image: dataURL1,
                  scale: 1,
                  label: {
                    show: false,
                  },
                });
              }
            });
            // 监听点击事件
            imageGraphic.on(mars3d.EventType.click, function () {
              // 点击当前展示的图片
              if (props.nowShowImageData && props.nowShowImageData.id == item.id) {
                // 全部恢复默认
                imageRestoreDefault();
                emits('setNowShowImageData', {});
                emits('closePathImageInfo');
              } else if (!props.nowShowImageData || props.nowShowImageData.id !== item.id) {
                // 当前展示图片为空 或者 点击与当前展示不同
                // 全部恢复默认
                imageRestoreDefault();
                // 鼠标点击
                // 更新 PolylineEntity 的位置
                bottomImagePolylineGraphic.positions = [
                  Cesium.Cartesian3.fromDegrees(position[0], position[1], point.height),
                  Cesium.Cartesian3.fromDegrees(position[0], position[1], position[2] * 2),
                ];
                // 更新 PolylineEntity 的颜色
                bottomImagePolylineGraphic.setStyle({
                  color: '#2d8cf0',
                });
                // 飞行点显示
                flightointGraphic.show = true;
                // 鼠标更改图片
                imageGraphic.setStyle({
                  image: dataURL2,
                  label: {
                    show: true,
                  },
                });
                emits('setNowShowImageData', item);
              }
            });
            // 将地面点 添加到图层中
            graphicLayers.addGraphic(bottomPointGraphic);
            // 将飞行点 添加到图层中
            graphicLayers.addGraphic(flightointGraphic);
            // 地面点到展示图片的线 添加到图层中
            graphicLayers.addGraphic(bottomImagePolylineGraphic);
            // 展示图片 添加到图层中
            graphicLayers.addGraphic(imageGraphic);
            // 数据
            image_bottomPointGraphicData.push(bottomPointGraphic);
            image_flightointGraphicData.push(flightointGraphic);
            image_bottomImagePolylineGraphicData.push(bottomImagePolylineGraphic);
            image_imageGraphicData.push(imageGraphic);
          });
        };
      }
    });
  };
  // 地图照片-恢复默认
  function imageRestoreDefault() {
    // 飞行点
    for (let i = 0; i < image_flightointGraphicData.length; i++) {
      let flightointGraphic = image_flightointGraphicData[i];
      flightointGraphic.show = false;
    }
    // 地面点到展示图片的线
    for (let i = 0; i < image_bottomImagePolylineGraphicData.length; i++) {
      let bottomImagePolylineGraphic = image_bottomImagePolylineGraphicData[i];
      let defaultPosition = bottomImagePolylineGraphic.options.defaultPosition;
      let surfaceHeight = bottomImagePolylineGraphic.options.surfaceHeight;
      bottomImagePolylineGraphic.setStyle({
        color: '#ffffff',
      });
      bottomImagePolylineGraphic.positions = [
        Cesium.Cartesian3.fromDegrees(defaultPosition[0], defaultPosition[1], surfaceHeight),
        Cesium.Cartesian3.fromDegrees(defaultPosition[0], defaultPosition[1], defaultPosition[2]),
      ];
    }
    // 展示图片
    for (let i = 0; i < image_imageGraphicData.length; i++) {
      let imageGraphic = image_imageGraphicData[i];
      let defaultImage = imageGraphic.options.defaultImage;
      imageGraphic.setStyle({
        image: defaultImage,
        scale: 1,
        label: {
          show: false,
        },
      });
    }
  }
  // 地图照片-右侧图片模块修改当前显示图片
  function setNowShowImageByRight() {
    setTimeout(() => {
      // 全部恢复默认
      imageRestoreDefault();
      // 飞行点
      for (let i = 0; i < image_flightointGraphicData.length; i++) {
        if (image_flightointGraphicData[i].options.id.includes(props.nowShowImageData.id)) {
          let flightointGraphic = image_flightointGraphicData[i];
          flightointGraphic.show = true;
        }
      }
      // 地面点到展示图片的线
      for (let i = 0; i < image_bottomImagePolylineGraphicData.length; i++) {
        if (
          image_bottomImagePolylineGraphicData[i].options.id.includes(props.nowShowImageData.id)
        ) {
          let bottomImagePolylineGraphic = image_bottomImagePolylineGraphicData[i];
          let defaultPosition = bottomImagePolylineGraphic.options.defaultPosition;
          let surfaceHeight = bottomImagePolylineGraphic.options.surfaceHeight;
          bottomImagePolylineGraphic.setStyle({
            color: '#2d8cf0',
          });
          bottomImagePolylineGraphic.positions = [
            Cesium.Cartesian3.fromDegrees(defaultPosition[0], defaultPosition[1], surfaceHeight),
            Cesium.Cartesian3.fromDegrees(
              defaultPosition[0],
              defaultPosition[1],
              defaultPosition[2] * 2,
            ),
          ];
        }
      }
      // 展示图片
      for (let i = 0; i < image_imageGraphicData.length; i++) {
        if (image_imageGraphicData[i].options.id.includes(props.nowShowImageData.id)) {
          let imageGraphic = image_imageGraphicData[i];
          let chooseImage = imageGraphic.options.chooseImage;
          imageGraphic.setStyle({
            image: chooseImage,
            label: {
              show: true,
            },
          });
        }
      }
    }, 500);
  }

  // 地图作业区域--------------------------------------------------------------------
  watch(
    () => props.allAreaDataList,
    () => {
      showAllAreaDataList();
    },
  );
  watch(
    () => props.nowShowAreaData,
    (newVal, oldVal) => {
      let time = dayjs().format('YYYY-MM-DD HH:mm:ss');
      if (newVal) {
        // 样式
        area_noland_LineStringGraphicData?.forEach((graphicLayer) => {
          if (graphicLayer.options.id == props.nowShowAreaData.id) {
            graphicLayer.setStyle({
              label: {
                color: graphicLayer.options.style.color,
              },
            });
            if (oldVal && newVal.id == oldVal.id) {
              addAndUpdateWorkArea(graphicLayer, 'noland_Polyline', time, 'update');
            }
          }
        });
        area_dfence_PolygonGraphicData?.forEach((graphicLayer) => {
          if (graphicLayer.options.id == props.nowShowAreaData.id) {
            graphicLayer.setStyle({
              label: {
                text: props.nowShowAreaData.name,
                color: graphicLayer.options.style.color.substring(0, 7),
              },
            });
            if (oldVal && newVal.id == oldVal.id) {
              addAndUpdateWorkArea(graphicLayer, 'dfence_Polygon', time, 'update');
            }
          }
        });
        area_nfz_PolygonGraphicData?.forEach((graphicLayer) => {
          if (graphicLayer.options.id == props.nowShowAreaData.id) {
            graphicLayer.setStyle({
              label: {
                text: props.nowShowAreaData.name,
                color: graphicLayer.options.style.color.substring(0, 7),
              },
            });
            if (oldVal && newVal.id == oldVal.id) {
              addAndUpdateWorkArea(graphicLayer, 'nfz_Polygon', time, 'update');
            }
          }
        });
        area_dfence_CircleGraphicData?.forEach((graphicLayer) => {
          if (graphicLayer.options.id == props.nowShowAreaData.id) {
            graphicLayer.setStyle({
              radius: props.nowShowAreaData.properties.radius,
              label: {
                text: props.nowShowAreaData.name,
                color: graphicLayer.options.style.color.substring(0, 7),
              },
            });
            if (oldVal && newVal.id == oldVal.id) {
              addAndUpdateWorkArea(graphicLayer, 'dfence_Circle', time, 'update');
            }
          }
        });
        area_nfz_CircleGraphicData?.forEach((graphicLayer) => {
          if (graphicLayer.options.id == props.nowShowAreaData.id) {
            graphicLayer.setStyle({
              radius: props.nowShowAreaData.properties.radius,
              label: {
                text: props.nowShowAreaData.name,
                color: graphicLayer.options.style.color.substring(0, 7),
              },
            });
            if (oldVal && newVal.id == oldVal.id) {
              addAndUpdateWorkArea(graphicLayer, 'nfz_Circle', time, 'update');
            }
          }
        });
      }
    },
    {
      deep: true,
    },
  );

  // 地图作业区域-初始化-遍历展示
  function showAllAreaDataList() {
    // 删除旧数据
    area_noland_LineStringGraphicData?.forEach((graphicLayer) => {
      graphicLayers.removeGraphic(graphicLayer);
    });
    area_dfence_PolygonGraphicData?.forEach((graphicLayer) => {
      graphicLayers.removeGraphic(graphicLayer);
    });
    area_dfence_CircleGraphicData?.forEach((graphicLayer) => {
      graphicLayers.removeGraphic(graphicLayer);
    });
    area_nfz_PolygonGraphicData?.forEach((graphicLayer) => {
      graphicLayers.removeGraphic(graphicLayer);
    });
    area_nfz_CircleGraphicData?.forEach((graphicLayer) => {
      graphicLayers.removeGraphic(graphicLayer);
    });
    // 图层数据
    area_noland_LineStringGraphicData = [];
    // 地图作业区域-作业区-多边形
    area_dfence_PolygonGraphicData = [];
    // 地图作业区域-作业区-圈
    area_dfence_CircleGraphicData = [];
    // 地图作业区域-限飞区-多边形
    area_nfz_PolygonGraphicData = [];
    // 地图作业区域-限飞区-圈
    area_nfz_CircleGraphicData = [];
    props.allAreaDataList.forEach((item, index) => {
      // console.log(item);
      // 地图作业区域-禁降区-线
      if (item.type == 'noland' && item.geomtype == 'Polyline') {
        let nolandLineGraphic = new mars3d.graphic.PolylineEntity({
          positions: item.coordinates[0][0],
          style: {
            clampToGround: item.properties.clampToGround,
            width: 10,
            materialType: mars3d.MaterialType.LineCross,
            materialOptions: {
              color: item.state == 0 ? item.properties.color : '#6d6d6d', // 中心线颜色
              dashLength: 36, // 十字长度
              maskLength: 10, // 空隙间隔长度
              centerPower: 0.1, // 中心宽百分比
              dashPower: 0.2, // 虚线百分比
            },
            label: {
              text: `${item.name}`,
              font_size: 16,
              color: '#000000',
              outline: true,
              outlineColor: '#ffffff',
              outlineWidth: 6,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
              pixelOffset: [25, -5],
            },
          },
        });
        // 监听mouseover事件
        nolandLineGraphic.on(mars3d.EventType.mouseOver, function () {
          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
            nolandLineGraphic.setStyle({
              label: {
                color: item.state == 0 ? item.properties.color : '#6d6d6d',
              },
            });
          }
        });
        // 监听mouseout事件
        nolandLineGraphic.on(mars3d.EventType.mouseOut, function () {
          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
            nolandLineGraphic.setStyle({
              label: {
                color: '#000000',
              },
            });
          }
        });
        // 监听点击事件
        nolandLineGraphic.on(mars3d.EventType.click, function () {
          // 全部恢复默认
          areaRestoreDefault();
          nolandLineGraphic.setStyle({
            label: {
              color: item.state == 0 ? item.properties.color : '#6d6d6d',
            },
          });
          emits('setNowShowAreaData', item);
        });
        // 将 禁降区-线 添加到图层中
        graphicLayers.addGraphic(nolandLineGraphic);
        // 数据
        area_noland_LineStringGraphicData.push(nolandLineGraphic);
      }
      // 地图作业区域-作业区-多边形
      if (item.type == 'dfence' && item.geomtype == 'Polygon') {
        let dfence_PolygonGraphic = new mars3d.graphic.PolygonEntity({
          id: item.id,
          positions: item.coordinates[0][0],
          style: {
            clampToGround: item.properties.clampToGround,
            fill: false,
            color: item.state == 0 ? item.properties.color : '#6d6d6d',
            outline: true,
            outlineStyle: {
              width: 12,
              materialType: mars3d.MaterialType.LineCross,
              materialOptions: {
                background: true,
                color: item.state == 0 ? item.properties.color : '#6d6d6d',
                dashLength: 36,
                maskLength: 10,
                centerPower: 0.1,
                dashPower: 0.2,
              },
            },
            label: {
              text: `${item.name}`,
              font_size: 16,
              color: '#000000',
              outline: true,
              outlineColor: '#ffffff',
              outlineWidth: 6,
              verticalOrigin: Cesium.VerticalOrigin.CENTER,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            },
          },
        });
        // 监听mouseover事件
        dfence_PolygonGraphic.on(mars3d.EventType.mouseOver, function () {
          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
            dfence_PolygonGraphic.setStyle({
              label: {
                color: item.state == 0 ? item.properties.color : '#6d6d6d',
              },
            });
          }
        });
        // 监听mouseout事件
        dfence_PolygonGraphic.on(mars3d.EventType.mouseOut, function () {
          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
            dfence_PolygonGraphic.setStyle({
              label: {
                color: '#000000',
              },
            });
          }
        });
        // 监听点击事件
        dfence_PolygonGraphic.on(mars3d.EventType.click, function () {
          // 全部恢复默认
          areaRestoreDefault();
          dfence_PolygonGraphic.setStyle({
            label: {
              color: item.state == 0 ? item.properties.color : '#6d6d6d',
            },
          });
          emits('setNowShowAreaData', item);
        });
        // 将 作业区-圈 添加到图层中
        graphicLayers.addGraphic(dfence_PolygonGraphic);
        // 数据
        area_dfence_PolygonGraphicData.push(dfence_PolygonGraphic);
      }
      // 地图作业区域-限飞区-多边形
      if (item.type == 'nfz' && item.geomtype == 'Polygon') {
        let nfz_PolygonGraphic = new mars3d.graphic.PolygonEntity({
          id: item.id,
          positions: item.coordinates[0][0],
          style: {
            clampToGround: item.properties.clampToGround,
            color: item.state == 0 ? item.properties.color + '33' : '#6d6d6d' + '33',
            outline: true,
            outlineStyle: {
              width: 12,
              materialType: mars3d.MaterialType.LineCross,
              materialOptions: {
                color: item.state == 0 ? item.properties.color : '#6d6d6d',
                dashLength: 36,
                maskLength: 10,
                centerPower: 0.1,
                dashPower: 0.2,
              },
            },
            label: {
              text: `${item.name}`,
              font_size: 16,
              color: '#000000',
              outline: true,
              outlineColor: '#ffffff',
              outlineWidth: 6,
              verticalOrigin: Cesium.VerticalOrigin.CENTER,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            },
          },
        });
        // 监听mouseover事件
        nfz_PolygonGraphic.on(mars3d.EventType.mouseOver, function () {
          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
            nfz_PolygonGraphic.setStyle({
              label: {
                color: item.state == 0 ? item.properties.color : '#6d6d6d',
              },
            });
          }
        });
        // 监听mouseout事件
        nfz_PolygonGraphic.on(mars3d.EventType.mouseOut, function () {
          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
            nfz_PolygonGraphic.setStyle({
              label: {
                color: '#000000',
              },
            });
          }
        });
        // 监听点击事件
        nfz_PolygonGraphic.on(mars3d.EventType.click, function () {
          // 全部恢复默认
          areaRestoreDefault();
          nfz_PolygonGraphic.setStyle({
            label: {
              color: item.state == 0 ? item.properties.color : '#6d6d6d',
            },
          });
          emits('setNowShowAreaData', item);
        });
        // 将 作业区-圈 添加到图层中
        graphicLayers.addGraphic(nfz_PolygonGraphic);
        // 数据
        area_nfz_PolygonGraphicData.push(nfz_PolygonGraphic);
      }
      // 地图作业区域-作业区-圈
      if (item.type == 'dfence' && item.geomtype == 'Circle') {
        let dfence_CircleGraphic = new mars3d.graphic.CircleEntity({
          id: item.id,
          position: item.properties.centerPoint,
          style: {
            clampToGround: item.properties.clampToGround,
            radius: item.properties.radius,
            fill: false,
            color: item.state == 0 ? item.properties.color : '#6d6d6d',
            outline: true,
            outlineStyle: {
              width: 12,
              materialType: mars3d.MaterialType.LineCross,
              materialOptions: {
                background: true,
                color: item.state == 0 ? item.properties.color : '#6d6d6d',
                dashLength: 36,
                maskLength: 10,
                centerPower: 0.1,
                dashPower: 0.2,
              },
            },
            label: {
              text: `${item.name}`,
              font_size: 16,
              color: '#000000',
              outline: true,
              outlineColor: '#ffffff',
              outlineWidth: 6,
              verticalOrigin: Cesium.VerticalOrigin.CENTER,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            },
          },
        });
        // 监听mouseover事件
        dfence_CircleGraphic.on(mars3d.EventType.mouseOver, function () {
          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
            dfence_CircleGraphic.setStyle({
              label: {
                color: item.state == 0 ? item.properties.color : '#6d6d6d',
              },
            });
          }
        });
        // 监听mouseout事件
        dfence_CircleGraphic.on(mars3d.EventType.mouseOut, function () {
          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
            dfence_CircleGraphic.setStyle({
              label: {
                color: '#000000',
              },
            });
          }
        });
        // 监听点击事件
        dfence_CircleGraphic.on(mars3d.EventType.click, function () {
          // 全部恢复默认
          areaRestoreDefault();
          dfence_CircleGraphic.setStyle({
            label: {
              color: item.state == 0 ? item.properties.color : '#6d6d6d',
            },
          });
          emits('setNowShowAreaData', item);
        });
        // 将 作业区-圈 添加到图层中
        graphicLayers.addGraphic(dfence_CircleGraphic);
        // 数据
        area_dfence_CircleGraphicData.push(dfence_CircleGraphic);
      }
      // 地图作业区域-限飞区-圈
      if (item.type == 'nfz' && item.geomtype == 'Circle') {
        let nfz_CircleGraphic = new mars3d.graphic.CircleEntity({
          id: item.id,
          position: item.properties.centerPoint,
          style: {
            clampToGround: item.properties.clampToGround,
            radius: item.properties.radius,
            color: item.state == 0 ? item.properties.color + '33' : '#6d6d6d' + '33',
            outline: true,
            outlineStyle: {
              width: 12,
              materialType: mars3d.MaterialType.LineCross,
              materialOptions: {
                color: item.state == 0 ? item.properties.color : '#6d6d6d',
                dashLength: 36,
                maskLength: 10,
                centerPower: 0.1,
                dashPower: 0.2,
              },
            },
            label: {
              text: `${item.name}`,
              font_size: 16,
              color: '#000000',
              outline: true,
              outlineColor: '#ffffff',
              outlineWidth: 6,
              verticalOrigin: Cesium.VerticalOrigin.CENTER,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            },
          },
        });
        // 监听mouseover事件
        nfz_CircleGraphic.on(mars3d.EventType.mouseOver, function () {
          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
            nfz_CircleGraphic.setStyle({
              label: {
                color: item.state == 0 ? item.properties.color : '#6d6d6d',
              },
            });
          }
        });
        // 监听mouseout事件
        nfz_CircleGraphic.on(mars3d.EventType.mouseOut, function () {
          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
            nfz_CircleGraphic.setStyle({
              label: {
                color: '#000000',
              },
            });
          }
        });
        // 监听点击事件
        nfz_CircleGraphic.on(mars3d.EventType.click, function () {
          // 全部恢复默认
          areaRestoreDefault();
          nfz_CircleGraphic.setStyle({
            label: {
              color: item.state == 0 ? item.properties.color : '#6d6d6d',
            },
          });
          emits('setNowShowAreaData', item);
        });
        // 将 限飞区-圈 添加到图层中
        graphicLayers.addGraphic(nfz_CircleGraphic);
        // 数据
        area_nfz_CircleGraphicData.push(nfz_CircleGraphic);
      }
    });
  }
  // 地图作业区域-恢复默认
  function areaRestoreDefault() {
    // 作业区-多边形-恢复默认
    for (let i = 0; i < area_noland_LineStringGraphicData.length; i++) {
      let graphic = area_noland_LineStringGraphicData[i];
      graphic.setStyle({
        label: {
          color: '#000000',
        },
      });
    }
    // 作业区-多边形-恢复默认
    for (let i = 0; i < area_dfence_PolygonGraphicData.length; i++) {
      let graphic = area_dfence_PolygonGraphicData[i];
      graphic.setStyle({
        label: {
          color: '#000000',
        },
      });
    }
    // 限飞区-多边形-恢复默认
    for (let i = 0; i < area_nfz_PolygonGraphicData.length; i++) {
      let graphic = area_nfz_PolygonGraphicData[i];
      graphic.setStyle({
        label: {
          color: '#000000',
        },
      });
    }
    // 作业区-圈-恢复默认
    for (let i = 0; i < area_dfence_CircleGraphicData.length; i++) {
      let graphic = area_dfence_CircleGraphicData[i];
      graphic.setStyle({
        label: {
          color: '#000000',
        },
      });
    }
    // 限飞区-圈-恢复默认
    for (let i = 0; i < area_nfz_CircleGraphicData.length; i++) {
      let graphic = area_nfz_CircleGraphicData[i];
      graphic.setStyle({
        label: {
          color: '#000000',
        },
      });
    }
  }

  // 地图区域-绘制
  const mapAreaDrawFlag = ref(false);
  const areaDrawType = ref('dfence_Polygon');
  async function drawArea() {
    if (mapAreaDrawFlag.value) {
      mapAreaDrawFlag.value = false;
      return;
    }
    mapAreaDrawFlag.value = true;
    let time = dayjs().format('YYYY-MM-DD HH:mm:ss');
    // 自定义禁降区
    if (areaDrawType.value == 'noland_Polyline') {
    }
    // 自定义多边形限飞区
    if (areaDrawType.value == 'nfz_Polygon') {
      const graphic = await graphicLayers.startDraw({
        type: 'polygon',
        style: {
          clampToGround: true,
          color: '#FF0000' + '33',
          outline: true,
          outlineStyle: {
            width: 12,
            materialType: mars3d.MaterialType.LineCross,
            materialOptions: {
              color: '#FF0000',
              dashLength: 36,
              maskLength: 10,
              centerPower: 0.1,
              dashPower: 0.2,
            },
          },
          label: {
            text: `自定义多边形限飞区${time}`,
            font_size: 16,
            color: '#000000',
            outline: true,
            outlineColor: '#ffffff',
            outlineWidth: 6,
            verticalOrigin: Cesium.VerticalOrigin.CENTER,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          },
        },
      });
      area_nfz_PolygonGraphicData.push(graphic);
      addAndUpdateWorkArea(graphic, 'nfz_Polygon', time);
    }
    // 自定义圆形限飞区
    if (areaDrawType.value == 'nfz_Circle') {
      const graphic = await graphicLayers.startDraw({
        type: 'circle',
        style: {
          clampToGround: true,
          color: '#FF0000' + '33',
          outline: true,
          outlineStyle: {
            width: 12,
            materialType: mars3d.MaterialType.LineCross,
            materialOptions: {
              background: true,
              color: '#FF0000',
              dashLength: 36,
              maskLength: 10,
              centerPower: 0.1,
              dashPower: 0.2,
            },
          },
          label: {
            text: `自定义圆形限飞区${time}`,
            font_size: 16,
            color: '#000000',
            outline: true,
            outlineColor: '#ffffff',
            outlineWidth: 6,
            verticalOrigin: Cesium.VerticalOrigin.CENTER,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          },
        },
      });
      area_nfz_CircleGraphicData.push(graphic);
      addAndUpdateWorkArea(graphic, 'nfz_Circle', time);
    }
    // 自定义多边形作业区
    if (areaDrawType.value == 'dfence_Polygon') {
      const graphic = await graphicLayers.startDraw({
        type: 'polygon',
        style: {
          clampToGround: true,
          color: '#00FF00',
          fill: false,
          outline: true,
          outlineStyle: {
            width: 12,
            materialType: mars3d.MaterialType.LineCross,
            materialOptions: {
              color: '#00FF00',
              dashLength: 36,
              maskLength: 10,
              centerPower: 0.1,
              dashPower: 0.2,
            },
          },
          label: {
            text: `自定义多边形作业区${time}`,
            font_size: 16,
            color: '#000000',
            outline: true,
            outlineColor: '#ffffff',
            outlineWidth: 6,
            verticalOrigin: Cesium.VerticalOrigin.CENTER,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          },
        },
      });
      area_dfence_PolygonGraphicData.push(graphic);
      addAndUpdateWorkArea(graphic, 'dfence_Polygon', time);
    }
    // 自定义圆形作业区
    if (areaDrawType.value == 'dfence_Circle') {
      const graphic = await graphicLayers.startDraw({
        type: 'circle',
        style: {
          clampToGround: true,
          fill: false,
          color: '#00FF00',
          outline: true,
          outlineStyle: {
            width: 12,
            materialType: mars3d.MaterialType.LineCross,
            materialOptions: {
              background: true,
              color: '#00FF00',
              dashLength: 36,
              maskLength: 10,
              centerPower: 0.1,
              dashPower: 0.2,
            },
          },
          label: {
            text: `自定义圆形作业区${time}`,
            font_size: 16,
            color: '#000000',
            outline: true,
            outlineColor: '#ffffff',
            outlineWidth: 6,
            verticalOrigin: Cesium.VerticalOrigin.CENTER,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          },
        },
      });
      area_dfence_CircleGraphicData.push(graphic);
      addAndUpdateWorkArea(graphic, 'dfence_Circle', time);
    }
  }

  // 新增到数据库并刷新列表
  async function addAndUpdateWorkArea(graphic, areatype, time, addOrUpdate = 'add') {
    let graphicJson = graphic.toJSON();
    let params: any = {};
    let coordinates = graphicJson.position || graphicJson.positions;
    let properties = {};
    let polygonData: any = [];
    let type = '';
    let geom = '';

    switch (areatype) {
      // 自定义圆形限飞区
      case 'nfz_Circle':
        type = 'nfz';
        geom = GeojsonToWkt(turf.circle(coordinates, graphicJson.style.radius).geometry);
        properties = {
          clampToGround: true,
          color: '#FF0000',
          radius: graphicJson.style.radius,
          centerPoint: coordinates,
        };
        break;
      // 自定义多边形作业区
      case 'nfz_Polygon':
        type = 'nfz';
        coordinates.push(coordinates[0]);
        polygonData.push(coordinates);
        geom = GeojsonToWkt(turf.polygon(polygonData).geometry);
        properties = {
          clampToGround: true,
          color: '#FF0000',
          centerPoint: coordinates[0],
        };
        break;
      // 自定义圆形作业区
      case 'dfence_Circle':
        type = 'dfence';
        geom = GeojsonToWkt(turf.circle(coordinates, graphicJson.style.radius).geometry);
        properties = {
          clampToGround: true,
          color: '#00FF00',
          radius: graphicJson.style.radius,
          centerPoint: coordinates,
        };
        break;
      // 自定义多边形作业区
      case 'dfence_Polygon':
        type = 'dfence';
        coordinates.push(coordinates[0]);
        polygonData.push(coordinates);
        geom = GeojsonToWkt(turf.polygon(polygonData).geometry);
        properties = {
          clampToGround: true,
          color: '#00FF00',
          centerPoint: coordinates[0],
        };
        break;
    }
    if (addOrUpdate == 'add') {
      params = {
        name: graphicJson.style.label.text,
        type: type,
        properties: JSON.stringify(properties),
        createTime: time,
        createUser: '',
        geom: geom,
        workSpaceId: '1',
        state: 0,
        createUserName: '',
      };
      AddWorkArea(params).then((result) => {
        // 刷新区域信息
        emits('setAllAreaData');
        mapAreaDrawFlag.value = false;
      });
    } else {
      params = {
        id: graphicJson.id,
        name: graphicJson.style.label.text,
        type: type,
        properties: JSON.stringify(properties),
        geom: geom,
        workSpaceId: '1',
        state: props.nowShowAreaData.state,
      };
      UpdateWorkArea(params).then((result) => {
        // 刷新区域信息
        // emits('setAllAreaData');
        // mapAreaDrawFlag.value = false;
      });
    }
  }

  // 图斑定位
  const handlerLocation = (lngLat) => {
    const position = Cesium.Cartesian3.fromDegrees(lngLat[0], lngLat[1]);
    map.flyToPoint(position);
  };

  defineExpose({
    setNowShowImageByRight,
    handlerLocation,
    markRestoreDefault,
    areaRestoreDefault,
  });
</script>
<style lang="less" scoped>
  .mars3d-container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .markButtons {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    top: 10%;
    right: 1%;
    width: 30px;
    height: 123px;
    gap: 1px;
  }

  .button_nochoose {
    background: #ffffff;
    z-index: 200;
    width: 30px;
    height: 30px;
    // border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      border: 2px solid #2b85e4;
      outline: 1px solid #2b85e4;
    }
  }
  .button_choose {
    background: linear-gradient(to bottom left, #2b85e4 10px, transparent 1px), #ffffff;
    background-size:
      100% 100%,
      auto;
    z-index: 200;
    width: 30px;
    height: 30px;
    // border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: 2px solid #2b85e4;
  }

  .popoverMark {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
  }

  .areaButtons {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 30%;
    right: 1%;
    width: 30px;
    height: 30px;
  }

  .popoverArea {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 170px;
    height: 35px;
  }
</style>
