<template>
  <div ref="vChartRef" id="mars3d-container" class="mars3d-container">
    <div class="annotationButtons">
      <div
        :class="mapDrawType == 'drawPoint' ? 'button_choose' : 'button_nochoose'"
        @click="drawPoint"
      >
        <a-popover placement="left">
          <template #content>
            <div style="display: flex; gap: 5px">
              <div
                class="popoverAnnotation"
                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="popoverAnnotation"
                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="popoverAnnotation"
                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="popoverAnnotation"
                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_Polygon',
                ]"
                :key="type"
                :style="{ background: '#ffffff' }"
                @click="areaDrawType = type"
              >
                <div
                  v-if="type.indexOf('noland') > -1"
                  :style="{
                    width: '15px',
                    height: '15px',
                    outline: `2px solid #FF9900`,
                    '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_Polygon'">自定义禁降区</div>
                <CheckOutlined v-if="areaDrawType == type" style="color: blue; margin-left: 10px" />
              </div>
            </div>
          </template>
          <div
            v-if="areaDrawType.indexOf('noland') > -1"
            :style="{
              width: '16px',
              height: '16px',
              outline: `2px solid #FF9900`,
            }"
          />
          <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 {
    AddAnnotation,
    UpdateAnnotation,
    AddWorkArea,
    UpdateWorkArea,
  } from '@/api/demo/mediaLibrary';
  import {
    locateBack,
    defaultIcon,
    fireIcon,
    peopleIcon,
    warnIcon,
    carIcon,
    checkIcon,
    closeIcon,
  } from './svg';
  import * as turf from '@turf/turf';
  import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
  import dayjs from 'dayjs';

  const props = defineProps([
    'allAnnotationDataList',
    'nowShowAnnotationData',
    'allImageDataList',
    'nowShowImageData',
    'allAreaDataList',
    'nowShowAreaData',
  ]);
  const emits = defineEmits([
    'setNowShowAnnotationData',
    'setNowShowImageData',
    'setNowShowAreaData',
    'closePathImageInfo',
    'setAllAnnotationData',
    'setAllImageData',
    'setAllAreaData',
  ]);

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

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

  // 地图作业区域
  // 地图作业区域-禁降区-多边形
  let area_noland_PolygonGraphicData: 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);
      // 图层
      showAllAnnotationDataList();
      // showAllImageDataList();
      // showAllAreaDataList();
      handlerLocation([118.2958779, 35.1342553]);
      // 监听地图点击事件
      map.on(mars3d.EventType.click, function (event) {
        if (!event.czmObject) {
          // 地图标注 - 恢复默认
          // if (props.nowShowAnnotationData && props.nowShowAnnotationData.id) {
          //   annotationRestoreDefault();
          //   emits('setNowShowAnnotationData', {});
          // }
          // // 地图作业区域-恢复默认
          // if (props.nowShowAreaData.id) {
          //   areaRestoreDefault();
          //   emits('setNowShowAreaData', {});
          // }
        }
      });
    }
  };

  // 地图标注--------------------------------------------------------------------
  watch(
    () => props.allAnnotationDataList,
    () => {
      showAllAnnotationDataList();
    },
  );
  watch(
    () => props.nowShowAnnotationData,
    (newVal, oldVal) => {
      let time = dayjs().format('YYYY-MM-DD HH:mm:ss');
      if (newVal) {
        // 点
        annotation_PointGraphicData?.forEach((graphicLayer) => {
          if (graphicLayer.options.id == props.nowShowAnnotationData.id) {
            const image1 = new Image();
            image1.crossOrigin = 'Anonymous';
            image1.src = svgToDataURL(
              locateBack.replaceAll('currentColor', props.nowShowAnnotationData.properties.color),
            );
            image1.onload = () => {
              const image2 = new Image();
              image2.crossOrigin = 'Anonymous';
              let svgString = '';
              switch (props.nowShowAnnotationData.properties.iconname) {
                case 'defaultIcon':
                  svgString = defaultIcon;
                  break;
                case 'fireIcon':
                  svgString = fireIcon;
                  break;
                case 'peopleIcon':
                  svgString = peopleIcon;
                  break;
                case 'warnIcon':
                  svgString = warnIcon;
                  break;
                case 'carIcon':
                  svgString = carIcon;
                  break;
                case 'checkIcon':
                  svgString = checkIcon;
                  break;
                case 'closeIcon':
                  svgString = closeIcon;
                  break;
              }
              image2.src = svgToDataURL(
                svgString.replaceAll('currentColor', props.nowShowAnnotationData.properties.color),
              );
              image2.onload = () => {
                // 创建Canvas元素
                const canvas = document.createElement('canvas');
                canvas.width = 30;
                canvas.height = 40;
                // 获取Canvas绘图上下文
                const ctx = canvas.getContext('2d');
                ctx.fillStyle = '#00000000';
                ctx?.fillRect(0, 0, canvas.width, canvas.height);
                // 在Canvas上绘制图片
                if (props.nowShowAnnotationData.properties.iconname == 'defaultIcon') {
                  ctx.drawImage(image2, 0, 0, canvas.width, canvas.height);
                } else {
                  ctx.drawImage(image1, 0, 0, canvas.width, canvas.height);
                  ctx.drawImage(image2, 8, 3, 14, 28);
                }
                // 将Canvas内容转换为图片的数据URL
                const dataURL2 = canvas.toDataURL('image/png');

                graphicLayer.position = [
                  parseFloat(props.nowShowAnnotationData.coordinates[0]),
                  parseFloat(props.nowShowAnnotationData.coordinates[1]),
                  parseFloat(props.nowShowAnnotationData.coordinates[2]),
                ];
                graphicLayer.setStyle({
                  // 图标（待修改）
                  image: dataURL2,
                  iconname: props.nowShowAnnotationData.properties.iconname,
                  label: {
                    text: props.nowShowAnnotationData.name,
                    color: props.nowShowAnnotationData.properties.color,
                    font_size: props.nowShowAnnotationData.properties.font_size,
                  },
                });
                if (oldVal && newVal.id == oldVal.id) {
                  addAndUpdateWorkAnnotation(graphicLayer, 'point', time, 'update');
                }
              };
            };
          }
        });
        // 线
        annotation_LineStringGraphicData?.forEach((graphicLayer) => {
          if (graphicLayer.options.id == props.nowShowAnnotationData.id) {
            graphicLayer.setStyle({
              // 线头部样式/线尾部样式（待修改）
              width: props.nowShowAnnotationData.properties.line_width,
              color: props.nowShowAnnotationData.properties.color,
              label: {
                text: props.nowShowAnnotationData.name,
                color: props.nowShowAnnotationData.properties.color,
                font_size: props.nowShowAnnotationData.properties.font_size,
              },
            });
            if (oldVal && newVal.id == oldVal.id) {
              addAndUpdateWorkAnnotation(graphicLayer, 'polyline', time, 'update');
            }
          }
        });
        // 多边形
        annotation_PolygonGraphicData?.forEach((graphicLayer) => {
          if (graphicLayer.options.id == props.nowShowAnnotationData.id) {
            graphicLayer.setStyle({
              outlineColor: props.nowShowAnnotationData.properties.color,
              label: {
                text: props.nowShowAnnotationData.name,
                color: props.nowShowAnnotationData.properties.color,
                font_size: props.nowShowAnnotationData.properties.font_size,
              },
            });
            if (oldVal && newVal.id == oldVal.id) {
              addAndUpdateWorkAnnotation(graphicLayer, 'polygon', time, 'update');
            }
          }
        });
        // 圆
        annotation_CircleGraphicData?.forEach((graphicLayer) => {
          if (graphicLayer.options.id == props.nowShowAnnotationData.id) {
            graphicLayer.position = [
              parseFloat(props.nowShowAnnotationData.properties.centerPoint[0]),
              parseFloat(props.nowShowAnnotationData.properties.centerPoint[1]),
              parseFloat(props.nowShowAnnotationData.properties.centerPoint[2]),
            ];
            graphicLayer.setStyle({
              radius: props.nowShowAnnotationData.properties.radius,
              outlineColor: props.nowShowAnnotationData.properties.color,
              label: {
                text: props.nowShowAnnotationData.name,
                color: props.nowShowAnnotationData.properties.color,
                font_size: props.nowShowAnnotationData.properties.font_size,
              },
            });
            if (oldVal && newVal.id == oldVal.id) {
              addAndUpdateWorkAnnotation(graphicLayer, 'circle', time, 'update');
            }
          }
        });
      }
    },
    {
      deep: true,
    },
  );
  // 地图标注-初始化-遍历展示
  const showAllAnnotationDataList = async () => {
    // 删除旧数据
    annotation_PointGraphicData?.forEach((graphicLayer) => {
      graphicLayers.removeGraphic(graphicLayer);
    });
    annotation_LineStringGraphicData?.forEach((graphicLayer) => {
      graphicLayers.removeGraphic(graphicLayer);
    });
    annotation_PolygonGraphicData?.forEach((graphicLayer) => {
      graphicLayers.removeGraphic(graphicLayer);
    });
    annotation_CircleGraphicData?.forEach((graphicLayer) => {
      graphicLayers.removeGraphic(graphicLayer);
    });
    // 图层数据
    annotation_PointGraphicData = [];
    annotation_LineStringGraphicData = [];
    annotation_PolygonGraphicData = [];
    annotation_CircleGraphicData = [];
    if (!props.allAnnotationDataList || props.allAnnotationDataList.length == 0) {
      return;
    }
    // 地图标注-遍历
    props.allAnnotationDataList.forEach((item, index) => {
      // console.log(item);
      // 地图标注-点
      if (item.type == 0) {
        const image1 = new Image();
        image1.crossOrigin = 'Anonymous';
        image1.src = svgToDataURL(locateBack.replaceAll('currentColor', item.properties.color));
        image1.onload = () => {
          const image2 = new Image();
          image2.crossOrigin = 'Anonymous';
          let svgString = '';
          switch (item.properties.iconname) {
            case 'defaultIcon':
              svgString = defaultIcon;
              break;
            case 'fireIcon':
              svgString = fireIcon;
              break;
            case 'warnIcon':
              svgString = warnIcon;
              break;
            case 'peopleIcon':
              svgString = peopleIcon;
              break;
            case 'carIcon':
              svgString = carIcon;
              break;
            case 'checkIcon':
              svgString = checkIcon;
              break;
            case 'closeIcon':
              svgString = closeIcon;
              break;
          }
          image2.src = svgToDataURL(svgString.replaceAll('currentColor', item.properties.color));
          image2.onload = () => {
            // 创建Canvas元素
            const canvas = document.createElement('canvas');
            canvas.width = 30;
            canvas.height = 40;
            // 获取Canvas绘图上下文
            const ctx = canvas.getContext('2d');
            ctx.fillStyle = '#00000000';
            ctx?.fillRect(0, 0, canvas.width, canvas.height);
            // 在Canvas上绘制图片
            if (item.properties.iconname == 'defaultIcon') {
              ctx.drawImage(image2, 0, 0, canvas.width, canvas.height);
            } else {
              ctx.drawImage(image1, 0, 0, canvas.width, canvas.height);
              ctx.drawImage(image2, 8, 3, 14, 28);
            }
            // 将Canvas内容转换为图片的数据URL
            const dataURL = canvas.toDataURL('image/png');

            let pointGraphic = new mars3d.graphic.BillboardEntity({
              id: item.id,
              position: item.coordinates,
              style: {
                image: dataURL,
                iconname: item.properties.iconname,
                clampToGround: item.properties.clampToGround,
                scale: 1,
                verticalOrigin: Cesium.VerticalOrigin.CENTER,
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                label: {
                  text: `${item.name}`,
                  font_size: item.properties.font_size,
                  color: '#000000',
                  outline: true,
                  outlineColor: '#ffffff',
                  outlineWidth: 6,
                  verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                  horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                  pixelOffset: [25, 0],
                },
              },
              show: item.state == 0 ? true : false,
              hasEdit: true,
            });
            // 监听mouseover事件
            pointGraphic.on(mars3d.EventType.mouseOver, function () {
              if (!props.nowShowAnnotationData || props.nowShowAnnotationData.id !== item.id) {
                pointGraphic.setStyle({
                  label: {
                    color: item.properties.color,
                  },
                });
              }
            });
            // 监听mouseout事件
            pointGraphic.on(mars3d.EventType.mouseOut, function () {
              if (!props.nowShowAnnotationData || props.nowShowAnnotationData.id !== item.id) {
                pointGraphic.setStyle({
                  label: {
                    color: '#000000',
                  },
                });
              }
            });
            // 监听点击事件
            pointGraphic.on(mars3d.EventType.click, function () {
              // 全部恢复默认
              annotationRestoreDefault();
              pointGraphic.setStyle({
                label: {
                  color: item.properties.color,
                },
              });
              emits('setNowShowAnnotationData', item);
            });
            // 将点对象 添加到图层中
            graphicLayers.addGraphic(pointGraphic);
            // 数据
            annotation_PointGraphicData.push(pointGraphic);
          };
        };
      }
      // 地图标注-线
      if (item.type == 1) {
        let lineGraphic = new mars3d.graphic.PolylineEntity({
          id: item.id,
          positions: item.coordinates,
          style: {
            color: item.properties.color,
            width: item.properties.line_width,
            label: {
              text: `${item.name}`,
              font_size: item.properties.font_size,
              color: '#000000',
              outline: true,
              outlineColor: '#ffffff',
              outlineWidth: 6,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
              pixelOffset: [25, -5],
            },
          },
          show: item.state == 0 ? true : false,
          hasEdit: true,
          drawShowMeasure: true,
        });
        // 监听mouseover事件
        lineGraphic.on(mars3d.EventType.mouseOver, function () {
          if (!props.nowShowAnnotationData || props.nowShowAnnotationData.id !== item.id) {
            lineGraphic.setStyle({
              label: {
                color: item.properties.color,
              },
            });
          }
        });
        // 监听mouseout事件
        lineGraphic.on(mars3d.EventType.mouseOut, function () {
          if (!props.nowShowAnnotationData || props.nowShowAnnotationData.id !== item.id) {
            lineGraphic.setStyle({
              label: {
                color: '#000000',
              },
            });
          }
        });
        // 监听点击事件
        lineGraphic.on(mars3d.EventType.click, function () {
          // 全部恢复默认
          annotationRestoreDefault();
          lineGraphic.setStyle({
            label: {
              color: item.properties.color,
            },
          });
          emits('setNowShowAnnotationData', item);
        });
        // 将线对象 添加到图层中
        graphicLayers.addGraphic(lineGraphic);
        // 数据
        annotation_LineStringGraphicData.push(lineGraphic);
      }
      // 地图标注-多边形
      if (item.type == 2) {
        let polygonGraphic = new mars3d.graphic.PolygonEntity({
          id: item.id,
          positions: item.coordinates,
          style: {
            color: item.properties.color,
            fill: false,
            width: item.properties.line_width,
            outlineColor: item.properties.color,
            outlineWidth: 2,
            outline: true,
            clampToGround: item.properties.clampToGround,
            label: {
              text: `${item.name}`,
              font_size: item.properties.font_size,
              color: '#000000',
              outline: true,
              outlineColor: '#ffffff',
              outlineWidth: 6,
              verticalOrigin: Cesium.VerticalOrigin.CENTER,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            },
          },
          show: item.state == 0 ? true : false,
          hasEdit: true,
          drawShowMeasure: true,
        });
        // 监听mouseover事件
        polygonGraphic.on(mars3d.EventType.mouseOver, function () {
          if (!props.nowShowAnnotationData || props.nowShowAnnotationData.id !== item.id) {
            polygonGraphic.setStyle({
              // color: '#ffffff00',
              label: {
                color: item.properties.color,
              },
            });
          }
        });
        // 监听mouseout事件
        polygonGraphic.on(mars3d.EventType.mouseOut, function () {
          if (!props.nowShowAnnotationData || props.nowShowAnnotationData.id !== item.id) {
            polygonGraphic.setStyle({
              label: {
                color: '#000000',
              },
            });
          }
        });
        // 监听点击事件
        polygonGraphic.on(mars3d.EventType.click, function () {
          // 全部恢复默认
          annotationRestoreDefault();
          polygonGraphic.setStyle({
            label: {
              color: item.properties.color,
            },
          });
          emits('setNowShowAnnotationData', item);
        });
        // 将形状对象 添加到图层中
        graphicLayers.addGraphic(polygonGraphic);
        // 数据
        annotation_PolygonGraphicData.push(polygonGraphic);
      }
      // 地图标注-圆
      if (item.type == 3) {
        let circleGraphic = new mars3d.graphic.CircleEntity({
          id: item.id,
          position: item.properties.centerPoint,
          style: {
            radius: item.properties.radius,
            fill: false,
            outlineColor: item.properties.color,
            outlineWidth: 4,
            outline: true,
            clampToGround: item.properties.clampToGround,
            label: {
              text: `${item.name}`,
              font_size: item.properties.font_size,
              color: '#000000',
              outline: true,
              outlineColor: '#ffffff',
              outlineWidth: 6,
              verticalOrigin: Cesium.VerticalOrigin.CENTER,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            },
          },
          show: item.state == 0 ? true : false,
          hasEdit: true,
          drawShowMeasure: true,
        });
        // 监听mouseover事件
        circleGraphic.on(mars3d.EventType.mouseOver, function () {
          if (!props.nowShowAnnotationData || props.nowShowAnnotationData.id !== item.id) {
            circleGraphic.setStyle({
              label: {
                color: item.properties.color,
              },
            });
          }
        });
        // 监听mouseout事件
        circleGraphic.on(mars3d.EventType.mouseOut, function () {
          if (!props.nowShowAnnotationData || props.nowShowAnnotationData.id !== item.id) {
            circleGraphic.setStyle({
              label: {
                color: '#000000',
              },
            });
          }
        });
        // 监听点击事件
        circleGraphic.on(mars3d.EventType.click, function () {
          // 全部恢复默认
          annotationRestoreDefault();
          circleGraphic.setStyle({
            label: {
              color: item.properties.color,
            },
          });
          emits('setNowShowAnnotationData', item);
        });
        // 将圆对象 添加到图层中
        graphicLayers.addGraphic(circleGraphic);
        // 数据
        annotation_CircleGraphicData.push(circleGraphic);
      }
    });
  };
  // 地图标注-恢复默认
  function annotationRestoreDefault() {
    // 点-恢复默认
    for (let i = 0; i < annotation_PointGraphicData.length; i++) {
      let pointGraphic = annotation_PointGraphicData[i];
      pointGraphic.setStyle({
        label: {
          color: '#000000',
        },
      });
    }
    // 线-恢复默认
    for (let i = 0; i < annotation_LineStringGraphicData.length; i++) {
      let lineGraphic = annotation_LineStringGraphicData[i];
      lineGraphic.setStyle({
        label: {
          color: '#000000',
        },
      });
    }
    // 矩形-恢复默认
    for (let i = 0; i < annotation_PolygonGraphicData.length; i++) {
      let polygonGraphic = annotation_PolygonGraphicData[i];
      polygonGraphic.setStyle({
        label: {
          color: '#000000',
        },
      });
    }
    // 圆形-恢复默认
    for (let i = 0; i < annotation_CircleGraphicData.length; i++) {
      let circleGraphic = annotation_CircleGraphicData[i];
      circleGraphic.setStyle({
        label: {
          color: '#000000',
        },
      });
    }
  }
  // 地图标注-SVG内容生成图片链接
  function svgToDataURL(svgString: any) {
    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';
    let time = dayjs().format('YYYY-MM-DD HH:mm:ss');
    const image = new Image();
    image.crossOrigin = 'Anonymous';
    image.src = svgToDataURL(defaultIcon.replaceAll('currentColor', drawColorPoint.value));
    image.onload = () => {
      // 创建Canvas元素
      const canvas = document.createElement('canvas');
      canvas.width = 30;
      canvas.height = 40;
      // 获取Canvas绘图上下文
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#00000000';
      ctx?.fillRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
      const dataURL = canvas.toDataURL('image/png');
      graphicLayers
        .startDraw({
          type: 'billboard',
          style: {
            image: dataURL,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            iconname: 'defaultIcon',
            label: {
              text: '点 ' + time,
              font_size: 18,
              color: '#000000',
              outline: true,
              outlineWidth: 6,
              outlineColor: '#ffffff',
              pixelOffsetY: -60,
            },
          },
        })
        .then((graphic) => {
          annotation_PointGraphicData.push(graphic);
          addAndUpdateWorkAnnotation(graphic, 'point', time);
        });
    };
  }
  // 地图标注-绘制-线
  async function drawPolyline() {
    if (mapDrawType.value == 'drawPolyline') {
      mapDrawType.value = '';
      return;
    }
    mapDrawType.value = 'drawPolyline';
    let time = dayjs().format('YYYY-MM-DD HH:mm:ss');
    const graphic = await graphicLayers.startDraw({
      type: 'polyline',
      style: {
        width: 5,
        line_start_cap: 0,
        line_end_cap: 0,
        color: drawColorPolyline.value,
        label: {
          text: '线 ' + time,
          font_size: 18,
          color: '#000000',
          outline: true,
          outlineWidth: 6,
          outlineColor: '#ffffff',
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          pixelOffset: [25, -5],
        },
      },
    });
    annotation_LineStringGraphicData.push(graphic);
    addAndUpdateWorkAnnotation(graphic, 'polyline', time);
  }
  // 地图标注-绘制-形状
  async function drawPolygon() {
    if (mapDrawType.value == 'drawPolygon') {
      mapDrawType.value = '';
      return;
    }
    mapDrawType.value = 'drawPolygon';
    let time = dayjs().format('YYYY-MM-DD HH:mm:ss');
    const graphic = await graphicLayers.startDraw({
      type: 'polygon',
      style: {
        color: drawColorPolygon.value,
        fill: false,
        outline: true,
        outlineColor: drawColorPolygon.value,
        outlineWidth: 3,
        label: {
          text: '多边形 ' + time,
          font_size: 18,
          color: '#000000',
          outline: true,
          outlineWidth: 6,
          outlineColor: '#ffffff',
        },
      },
    });
    annotation_PolygonGraphicData.push(graphic);
    addAndUpdateWorkAnnotation(graphic, 'polygon', time);
  }
  // 地图标注-绘制-圆
  async function drawCricle() {
    if (mapDrawType.value == 'drawCricle') {
      mapDrawType.value = '';
      return;
    }
    mapDrawType.value = 'drawCricle';
    let time = dayjs().format('YYYY-MM-DD HH:mm:ss');
    const graphic = await graphicLayers.startDraw({
      type: 'circle',
      style: {
        color: drawColorCricle.value,
        fill: false,
        outline: true,
        outlineColor: drawColorCricle.value,
        outlineWidth: 3,
        label: {
          text: '圆 ' + time,
          font_size: 18,
          color: '#000000',
          outline: true,
          outlineWidth: 6,
          outlineColor: '#ffffff',
        },
      },
    });
    annotation_CircleGraphicData.push(graphic);
    addAndUpdateWorkAnnotation(graphic, 'circle', time);
  }

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

    switch (annotationtype) {
      case 'point':
        type = 0;
        geom = GeojsonToWkt(turf.point(coordinates).geometry);
        properties = {
          iconname: addOrUpdate == 'add' ? 'defaultIcon' : graphicJson.style.iconname,
          font_size: 16,
          iconnum: 0,
          clampToGround: false,
          color: drawColorPoint.value,
          centerPoint: coordinates,
        };
        break;
      case 'polyline':
        type = 1;
        geom = GeojsonToWkt(turf.lineString(coordinates).geometry);
        properties = {
          font_size: 16,
          line_width: 5,
          clampToGround: false,
          color: drawColorPolyline.value,
          centerPoint: coordinates[0],
          line_start_cap: 0,
          line_end_cap: 0,
        };
        break;
      case 'polygon':
        type = 2;
        coordinates.push(coordinates[0]);
        if (addOrUpdate == 'add') {
          polygonData.push(coordinates);
        } else {
          polygonData = coordinates;
        }
        geom = GeojsonToWkt(turf.polygon(polygonData).geometry);
        properties = {
          font_size: 16,
          clampToGround: false,
          color: drawColorPolygon.value,
          centerPoint: coordinates[0],
        };
        break;
      case 'circle':
        type = 3;
        geom = GeojsonToWkt(turf.circle(coordinates, graphicJson.style.radius).geometry);
        properties = {
          font_size: 16,
          clampToGround: true,
          color: drawColorCricle.value,
          radius: graphicJson.style.radius,
          centerPoint: coordinates,
        };
        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: '',
      };
      AddAnnotation(params).then((result) => {
        // 刷新区域信息
        emits('setAllAnnotationData');
        mapDrawType.value = '';
      });
    } else {
      params = {
        id: graphicJson.id,
        name: graphicJson.style.label.text,
        type: type,
        properties: JSON.stringify(properties),
        geom: geom,
        workSpaceId: '1',
        state: props.nowShowAnnotationData.state,
      };
      UpdateAnnotation(params).then((result) => {
        // 刷新区域信息
        // emits('setAllAreaData');
        // mapAreaDrawFlag.value = false;
      });
    }
  }

  // 地图照片--------------------------------------------------------------------
  // 地图照片-初始化-遍历展示
  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_PolygonGraphicData?.forEach((graphicLayer) => {
          if (graphicLayer.options.id == props.nowShowAreaData.id) {
            graphicLayer.setStyle({
              label: {
                text: props.nowShowAreaData.name,
                color: graphicLayer.options.style.color,
              },
            });
            if (oldVal && newVal.id == oldVal.id) {
              addAndUpdateWorkArea(graphicLayer, 'noland_Polygon', 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_PolygonGraphicData?.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_PolygonGraphicData = [];
    // 地图作业区域-作业区-多边形
    area_dfence_PolygonGraphicData = [];
    // 地图作业区域-作业区-圈
    area_dfence_CircleGraphicData = [];
    // 地图作业区域-限飞区-多边形
    area_nfz_PolygonGraphicData = [];
    // 地图作业区域-限飞区-圈
    area_nfz_CircleGraphicData = [];
    if (!props.allAreaDataList || props.allAreaDataList.length == 0) {
      return;
    }
    props.allAreaDataList.forEach((item, index) => {
      // console.log(item);
      // 地图作业区域-禁降区-线
      if (item.type == 'noland' && item.geomtype == 'Polygon') {
        let nolandPolygonGraphic = new mars3d.graphic.PolygonEntity({
          id: item.id,
          positions: item.coordinates,
          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: {
                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事件
        nolandPolygonGraphic.on(mars3d.EventType.mouseOver, function () {
          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
            nolandPolygonGraphic.setStyle({
              label: {
                color: item.state == 0 ? item.properties.color : '#6d6d6d',
              },
            });
          }
        });
        // 监听mouseout事件
        nolandPolygonGraphic.on(mars3d.EventType.mouseOut, function () {
          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
            nolandPolygonGraphic.setStyle({
              label: {
                color: '#000000',
              },
            });
          }
        });
        // 监听点击事件
        nolandPolygonGraphic.on(mars3d.EventType.click, function () {
          // 全部恢复默认
          areaRestoreDefault();
          nolandPolygonGraphic.setStyle({
            label: {
              color: item.state == 0 ? item.properties.color : '#6d6d6d',
            },
          });
          emits('setNowShowAreaData', item);
        });
        // 将 禁降区-线 添加到图层中
        graphicLayers.addGraphic(nolandPolygonGraphic);
        // 数据
        area_noland_PolygonGraphicData.push(nolandPolygonGraphic);
      }
      // 地图作业区域-作业区-多边形
      if (item.type == 'dfence' && item.geomtype == 'Polygon') {
        let dfence_PolygonGraphic = new mars3d.graphic.PolygonEntity({
          id: item.id,
          positions: item.coordinates,
          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,
          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_PolygonGraphicData.length; i++) {
      let graphic = area_noland_PolygonGraphicData[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_Polygon') {
      const graphic = await graphicLayers.startDraw({
        type: 'polygon',
        style: {
          clampToGround: true,
          color: '#FF9900',
          fill: false,
          outline: true,
          outlineStyle: {
            width: 12,
            materialType: mars3d.MaterialType.LineCross,
            materialOptions: {
              color: '#FF9900',
              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.BOTTOM,
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            pixelOffset: [25, -5],
          },
        },
      });
      area_dfence_PolygonGraphicData.push(graphic);
      addAndUpdateWorkArea(graphic, 'noland_Polygon', time);
    }
    // 自定义多边形限飞区
    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 'noland_Polygon':
        type = 'noland';
        coordinates.push(coordinates[0]);
        if (addOrUpdate == 'add') {
          polygonData.push(coordinates);
        } else {
          polygonData = coordinates;
        }
        geom = GeojsonToWkt(turf.polygon(polygonData).geometry);
        properties = {
          clampToGround: true,
          color: '#FF9900',
          centerPoint: coordinates[0],
        };
        break;
      // 自定义多边形作业区
      case 'dfence_Polygon':
        type = 'dfence';
        coordinates.push(coordinates[0]);
        if (addOrUpdate == 'add') {
          polygonData.push(coordinates);
        } else {
          polygonData = coordinates;
        }
        geom = GeojsonToWkt(turf.polygon(polygonData).geometry);
        properties = {
          clampToGround: true,
          color: '#00FF00',
          centerPoint: coordinates[0],
        };
        break;
      // 自定义多边形限飞区
      case 'nfz_Polygon':
        type = 'nfz';
        coordinates.push(coordinates[0]);
        if (addOrUpdate == 'add') {
          polygonData.push(coordinates);
        } else {
          polygonData = 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 '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;
    }
    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,
    annotationRestoreDefault,
    areaRestoreDefault,
  });
</script>
<style lang="less" scoped>
  .mars3d-container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .annotationButtons {
    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;
  }

  .popoverAnnotation {
    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>
