<template>
  <div ref="vChartRef" id="mars3d-container" class="mars3d-container">
    <div class="areaButtons">
      <div
        :class="mapAreaDrawFlag ? 'button_choose' : 'button_nochoose'"
        style="border-radius: 3px"
        @click="fun_chooseWorkSpaceType('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>
  <a-modal
      title="选择项目"
      :open="chooseWorkSpaceOpen"
      :mask="false"
      :maskClosable="false"
      :closable="false"
      @ok="fun_workSpaceOk"
      @cancel="fun_workSpaceCancel"
    >
      <div style="margin: 10px 30px">
        <a-radio-group v-model:value="chooseWorkSpaceId">
          <a-radio
            v-for="workspace in props.allWorkspaceDataList"
            style="
              display: flex;
              align-items: center;
              justify-content: flex-start;
              height: 30px;
              lineheight: 30px;
            "
            :key="workspace.Id"
            :value="workspace.Id"
          >
            {{ workspace.WorkspaceName }}
          </a-radio>
        </a-radio-group>
      </div>
    </a-modal>
</template>
<script lang="ts" setup>
  import { ref, watch, onMounted, defineEmits } from 'vue';
  import * as mars3d from 'mars3d';
  import * as Cesium from 'mars3d-cesium';
  import {
    CheckOutlined,
    AntDesignOutlined,
    ExpandAltOutlined,
    BorderOutlined,
    LogoutOutlined,
  } from '@ant-design/icons-vue';
  import {
    AddWorkArea,
    UpdateWorkArea,
  } from '@/api/demo/mediaLibrary';
  import * as turf from '@turf/turf';
  import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
  import dayjs from 'dayjs';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage } = useMessage();

  const props = defineProps([
    'allWorkspaceDataList',
    'nowShowAnnotationData',
    'nowShowImageData',
    'allAreaDataList',
    'nowShowAreaData',
  ]);
  const emits = defineEmits([
    'setNowShowAnnotationData',
    'setNowShowAreaData',
    '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);
      // 图层
      showAllAreaDataList();
      handlerLocation([118.2958779, 35.1342553]);
      // 监听地图点击事件
      map.on(mars3d.EventType.click, function (event) {
        if (!event.czmObject) {
          // 地图标注 - 恢复默认
          if (props.nowShowAnnotationData && props.nowShowAnnotationData.id) {
            emits('setNowShowAnnotationData', {});
          }
          // // 地图作业区域-恢复默认
          // if (props.nowShowAreaData.id) {
          //   areaRestoreDefault();
          //   emits('setNowShowAreaData', {});
          // }
        }
      });
    }
  };

  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) {
            graphicLayer.position = [
              parseFloat(props.nowShowAnnotationData.coordinates[0]),
              parseFloat(props.nowShowAnnotationData.coordinates[1]),
              parseFloat(props.nowShowAnnotationData.coordinates[2]),
            ];
            graphicLayer.setStyle({
              // 图标（待修改）
              // image: '',
              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) {
              addAndUpdateWorkArea(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) {
              addAndUpdateWorkArea(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) {
              addAndUpdateWorkArea(graphicLayer, 'circle', time, 'update');
            }
          }
        });
      }
    },
    {
      deep: true,
    },
  );

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

  // 项目弹窗
  const chooseWorkSpaceOpen = ref(false);
  const chooseWorkSpaceId = ref('');
   // 选择项目
   function fun_chooseWorkSpaceType(type) {
    chooseWorkSpaceOpen.value = true;
    mapDrawType.value = type;
  }
  // 确认-选择绘制类型
  function fun_workSpaceOk() {
    if (chooseWorkSpaceId.value == '') {
      createMessage.warning('先选择要标注的项目!');
      return;
    }
    chooseWorkSpaceOpen.value = false;
    switch (mapDrawType.value) {
      case 'drawArea':
        drawArea();
        break;
    }
  }
  // 取消
  function fun_workSpaceCancel() {
    chooseWorkSpaceOpen.value = false;
    mapDrawType.value = '';
    chooseWorkSpaceId.value == '';
  }
  // 地图作业区域--------------------------------------------------------------------
  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,
    },
  );

  watch(
    () => area_noland_PolygonGraphicData,
    () => {
      
    },
    {
      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);
        });
        // 监听点编辑移动事件
        nolandPolygonGraphic.on(mars3d.EventType.editMovePoint, (event) => {
          let positions = event.target._positions_draw;
          let coordinates = positions.map((position) => {
            const cartographic = Cesium.Cartographic.fromCartesian(position);
            const lng = Cesium.Math.toDegrees(cartographic.longitude);
            const lat = Cesium.Math.toDegrees(cartographic.latitude);
            const height = cartographic.height;
            return [lng, lat, height];
          });
          let polygonData: any = [];
          polygonData.push(coordinates);
          let geom = GeojsonToWkt(turf.polygon(polygonData).geometry);
          let properties = {
            ...item.properties,
            centerPoint: coordinates[0],
          };
          let params = {
            ...item,
            properties: JSON.stringify(properties),
            geom: geom,
          };
          UpdateWorkArea(params).then((result) => {
            emits('setAllAreaData');
          });
        });
        // 监听点删除事件
        nolandPolygonGraphic.on(mars3d.EventType.editRemovePoint, (event) => {
          let positions = event.target._positions_draw;
          let coordinates = positions.map((position) => {
            const cartographic = Cesium.Cartographic.fromCartesian(position);
            const lng = Cesium.Math.toDegrees(cartographic.longitude);
            const lat = Cesium.Math.toDegrees(cartographic.latitude);
            const height = cartographic.height;
            return [lng, lat, height];
          });
          let polygonData: any = [];
          polygonData.push(coordinates);
          let geom = GeojsonToWkt(turf.polygon(polygonData).geometry);
          let properties = {
            ...item.properties,
            centerPoint: coordinates[0],
          };
          let params = {
            ...item,
            properties: JSON.stringify(properties),
            geom: geom,
          };
          UpdateWorkArea(params).then((result) => {
            emits('setAllAreaData');
          });
        });
        // 将 禁降区-线 添加到图层中
        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);
        });
        // 监听点编辑移动事件
        dfence_PolygonGraphic.on(mars3d.EventType.editMovePoint, (event) => {
          let positions = event.target._positions_draw;
          let coordinates = positions.map((position) => {
            const cartographic = Cesium.Cartographic.fromCartesian(position);
            const lng = Cesium.Math.toDegrees(cartographic.longitude);
            const lat = Cesium.Math.toDegrees(cartographic.latitude);
            const height = cartographic.height;
            return [lng, lat, height];
          });
          let polygonData: any = [];
          polygonData.push(coordinates);
          let geom = GeojsonToWkt(turf.polygon(polygonData).geometry);
          let properties = {
            ...item.properties,
            centerPoint: coordinates[0],
          };
          let params = {
            ...item,
            properties: JSON.stringify(properties),
            geom: geom,
          };
          UpdateWorkArea(params).then((result) => {
            emits('setAllAreaData');
          });
        });
        // 监听点删除事件
        dfence_PolygonGraphic.on(mars3d.EventType.editRemovePoint, (event) => {
          let positions = event.target._positions_draw;
          let coordinates = positions.map((position) => {
            const cartographic = Cesium.Cartographic.fromCartesian(position);
            const lng = Cesium.Math.toDegrees(cartographic.longitude);
            const lat = Cesium.Math.toDegrees(cartographic.latitude);
            const height = cartographic.height;
            return [lng, lat, height];
          });
          let polygonData: any = [];
          polygonData.push(coordinates);
          let geom = GeojsonToWkt(turf.polygon(polygonData).geometry);
          let properties = {
            ...item.properties,
            centerPoint: coordinates[0],
          };
          let params = {
            ...item,
            properties: JSON.stringify(properties),
            geom: geom,
          };
          UpdateWorkArea(params).then((result) => {
            emits('setAllAreaData');
          });
        });
        // 将 作业区-圈 添加到图层中
        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);
        });
        // 监听点编辑移动事件
        nfz_PolygonGraphic.on(mars3d.EventType.editMovePoint, (event) => {
          let positions = event.target._positions_draw;
          let coordinates = positions.map((position) => {
            const cartographic = Cesium.Cartographic.fromCartesian(position);
            const lng = Cesium.Math.toDegrees(cartographic.longitude);
            const lat = Cesium.Math.toDegrees(cartographic.latitude);
            const height = cartographic.height;
            return [lng, lat, height];
          });
          let polygonData: any = [];
          polygonData.push(coordinates);
          let geom = GeojsonToWkt(turf.polygon(polygonData).geometry);
          let properties = {
            ...item.properties,
            centerPoint: coordinates[0],
          };
          let params = {
            ...item,
            properties: JSON.stringify(properties),
            geom: geom,
          };
          UpdateWorkArea(params).then((result) => {
            emits('setAllAreaData');
          });
        });
        // 监听点删除事件
        nfz_PolygonGraphic.on(mars3d.EventType.editRemovePoint, (event) => {
          let positions = event.target._positions_draw;
          let coordinates = positions.map((position) => {
            const cartographic = Cesium.Cartographic.fromCartesian(position);
            const lng = Cesium.Math.toDegrees(cartographic.longitude);
            const lat = Cesium.Math.toDegrees(cartographic.latitude);
            const height = cartographic.height;
            return [lng, lat, height];
          });
          let polygonData: any = [];
          polygonData.push(coordinates);
          let geom = GeojsonToWkt(turf.polygon(polygonData).geometry);
          let properties = {
            ...item.properties,
            centerPoint: coordinates[0],
          };
          let params = {
            ...item,
            properties: JSON.stringify(properties),
            geom: geom,
          };
          UpdateWorkArea(params).then((result) => {
            emits('setAllAreaData');
          });
        });
        // 将 作业区-圈 添加到图层中
        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);
        });
        // 监听点编辑移动事件
        dfence_CircleGraphic.on(mars3d.EventType.editMovePoint, (event) => {
          let coordinates = event.graphic.options.position;
          let radius = event.graphic.options.style.radius;
          let geom = GeojsonToWkt(turf.point(coordinates).geometry);
          let properties = {
            ...item.properties,
            centerPoint: coordinates,
            radius: radius,
          };
          let params = {
            ...item,
            properties: JSON.stringify(properties),
            geom: geom,
          };
          UpdateWorkArea(params).then((result) => {
            emits('setAllAreaData');
          });
        });
        // 将 作业区-圈 添加到图层中
        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);
        });
        // 监听点编辑移动事件
        nfz_CircleGraphic.on(mars3d.EventType.editMovePoint, (event) => {
          let coordinates = event.graphic.options.position;
          let radius = event.graphic.options.style.radius;
          let geom = GeojsonToWkt(turf.point(coordinates).geometry);
          let properties = {
            ...item.properties,
            centerPoint: coordinates,
            radius: radius,
          };
          let params = {
            ...item,
            properties: JSON.stringify(properties),
            geom: geom,
          };
          UpdateWorkArea(params).then((result) => {
            emits('setAllAreaData');
          });
        });
        // 将 限飞区-圈 添加到图层中
        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.point(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.point(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: chooseWorkSpaceId.value,
        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: chooseWorkSpaceId.value,
        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({
    handlerLocation,
    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: 15%;
    right: 1%;
    width: 30px;
    height: 30px;
  }

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