From 63fe7f7424ddc3a3ca3489a5c1de595b2ad5c196 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Fri, 11 Jul 2025 15:38:12 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AA=92=E4=BD=93=E5=BA=93-=E4=BD=9C=E4=B8=9A?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F-=E5=8F=AF=E6=B5=8B=E8=AF=95=E7=89=88?=
 =?UTF-8?q?=EF=BC=88=E8=87=AA=E5=AE=9A=E4=B9=89=E7=A6=81=E9=99=8D=E5=8C=BA?=
 =?UTF-8?q?=E6=9C=AA=E5=AE=9E=E8=A3=85=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/demo/mediaLibrary.ts                  |  40 +
 .../MapboxMaps/src/WktGeojsonTransform.ts     |   8 +-
 .../demo/system/mediaLibrary/path/index.vue   |  84 +-
 .../system/mediaLibrary/path/pathAreaInfo.vue | 150 ++--
 .../system/mediaLibrary/path/pathLeftMenu.vue | 227 +++--
 .../demo/system/mediaLibrary/path/pathMap.vue | 837 ++++++++++++++----
 6 files changed, 967 insertions(+), 379 deletions(-)
 create mode 100644 src/api/demo/mediaLibrary.ts

diff --git a/src/api/demo/mediaLibrary.ts b/src/api/demo/mediaLibrary.ts
new file mode 100644
index 0000000..2094a87
--- /dev/null
+++ b/src/api/demo/mediaLibrary.ts
@@ -0,0 +1,40 @@
+import { defHttp } from '@/utils/http/axios';
+enum Api {
+  // 获取地图作业区域列表
+  GetWorkAreaList = '/api/Manage/GetWorkAreaList',
+  // 添加地图作业区域
+  AddWorkArea = '/api/Manage/AddWorkArea',
+  // 更新地图作业区域
+  UpdateWorkArea = '/api/Manage/UpdateWorkArea',
+  // 删除地图作业区域
+  DeleteWorkArea = '/api/Manage/DeleteWorkArea',
+}
+
+// 获取地图作业区域列表
+export function GetWorkAreaList(params) {
+  return defHttp.get({
+    url: Api.GetWorkAreaList,
+    params
+  });
+}
+// 添加地图作业区域
+export function AddWorkArea(params) {
+  return defHttp.post({
+    url: Api.AddWorkArea,
+    data:params
+  });
+}
+// 更新地图作业区域
+export function UpdateWorkArea(params) {
+return defHttp.post({
+    url: Api.UpdateWorkArea,
+    data:params
+});
+}
+// 删除地图作业区域
+export function DeleteWorkArea(params) {
+return defHttp.post({
+    url: Api.DeleteWorkArea + '?id=' + params.id,
+    data:params
+});
+}
\ No newline at end of file
diff --git a/src/components/MapboxMaps/src/WktGeojsonTransform.ts b/src/components/MapboxMaps/src/WktGeojsonTransform.ts
index 3721c9b..16a8fcd 100644
--- a/src/components/MapboxMaps/src/WktGeojsonTransform.ts
+++ b/src/components/MapboxMaps/src/WktGeojsonTransform.ts
@@ -3,20 +3,20 @@ import { wktToGeoJSON,geojsonToWKT  } from "@terraformer/wkt"
 
 
 const wktCollectionToGeoJson = (wktStr) => {
-  console.log("wktStr",wktStr);
+  // console.log("wktStr",wktStr);
   let geojson = WKT.parse(wktStr);
-  console.log("geojson",geojson);
+  // console.log("geojson",geojson);
 }
 
 const WktToGeojson = (wktData)=> {
     // return WKT.parse(wktData)
-    console.log("wktData",wktData);
+    // console.log("wktData",wktData);
     return wktToGeoJSON(wktData);
 }
 
 const GeojsonToWkt = (geojsonData)=> {
     // return WKT.convert(geojsonData)
-    console.log("geojsonData",geojsonData)
+    // console.log("geojsonData",geojsonData)
     return geojsonToWKT(geojsonData)
 }
 
diff --git a/src/views/demo/system/mediaLibrary/path/index.vue b/src/views/demo/system/mediaLibrary/path/index.vue
index 30486ff..940efaf 100644
--- a/src/views/demo/system/mediaLibrary/path/index.vue
+++ b/src/views/demo/system/mediaLibrary/path/index.vue
@@ -24,6 +24,7 @@
         @setNowShowMarkData="setNowShowMarkData"
         @setNowShowImageData="setNowShowImageData"
         @setNowShowAreaData="setNowShowAreaData"
+        @setAllAreaData="setAllAreaData"
         @deleteMark="deleteMark"
         @deleteArea="deleteArea"
       />
@@ -41,6 +42,9 @@
         @setNowShowMarkData="setNowShowMarkData"
         @setNowShowImageData="setNowShowImageData"
         @setNowShowAreaData="setNowShowAreaData"
+        @setAllMarkData="setAllMarkData"
+        @setAllImageData="setAllImageData"
+        @setAllAreaData="setAllAreaData"
         @closePathImageInfo="closePathImageInfo"
       />
     </div>
@@ -85,6 +89,13 @@
   import markJson from './json/mark.json';
   import areaJson from './json/area.json';
   import imageJson from './json/image.json';
+  import {
+    GetWorkAreaList,
+    AddWorkArea,
+    UpdateWorkArea,
+    DeleteWorkArea,
+  } from '@/api/demo/mediaLibrary';
+  import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
   import { useMessage } from '@/hooks/web/useMessage';
   const { createMessage, createConfirm } = useMessage();
 
@@ -166,28 +177,41 @@
   function closePathAreaInfo() {
     areaInfoShow.value = false;
     nowShowAreaData.value = {};
+    pathMapRef.value.areaRestoreDefault();
   }
   // 当前展示的区域信息
   const nowShowAreaData = ref();
-  const allAreaDataList = ref(areaJson);
+  const allAreaDataList: any = ref(areaJson);
 
   // 设置当前展示的区域信息
-  function setNowShowAreaData(value) {
+  function setNowShowAreaData(value, restore = true) {
     if (value.id) {
       areaInfoShow.value = true;
     } else {
       areaInfoShow.value = false;
     }
+    if (restore) {
+      pathMapRef.value.areaRestoreDefault();
+    }
     nowShowAreaData.value = value;
   }
+  // 刷新区域信息
+  function setAllAreaData() {
+    // 查询地图工作区域
+    getWorkAreaList();
+  }
   // 删除区域
-  function deleteArea(value) {
-    allAreaDataList.value = cloneDeep(allAreaDataList.value).filter((item) => item.id != value.id);
-    areaInfoShow.value = false;
-    nowShowAreaData.value = {};
-    setTimeout(() => {
-      pathLeftMenuRef.value.updateShowMenuInfoList('地图作业区域');
-    }, 50);
+  async function deleteArea(value) {
+    DeleteWorkArea({
+      id: value.id,
+    }).then((result) => {
+      if (result) {
+        // 刷新
+        getWorkAreaList();
+        areaInfoShow.value = false;
+        nowShowAreaData.value = {};
+      }
+    });
   }
 
   // 右侧图片是否显示----------------------------------------------------
@@ -222,7 +246,49 @@
     pathMapRef.value.handlerLocation([position.lng, position.lat]);
   }
 
+  // 查询地图工作区域
+  async function getWorkAreaList() {
+    allAreaDataList.value = await GetWorkAreaList({ workspaceid: 1 });
+    allAreaDataList.value.forEach((area, index) => {
+      let geomjson = WktToGeojson(area.geom);
+      area = {
+        ...area,
+        properties: JSON.parse(area.properties),
+        geomtype: getGeomType(area),
+        coordinates: geomjson.coordinates,
+      };
+      allAreaDataList.value[index] = area;
+    });
+    setTimeout(() => {
+      pathLeftMenuRef.value.updateShowMenuInfoList('地图作业区域');
+    }, 50);
+  }
+
+  // 获取WKT类型
+  function getGeomType(area) {
+    let geom = area.geom;
+    let radiusFlag = area.properties.indexOf('radius') > -1 ? true : false;
+    // 点
+    if (geom.indexOf('POINT Z') > -1 && !radiusFlag) {
+      return 'Point';
+    }
+    // 线
+    if (geom.indexOf('LINESTRING Z') > -1 && !radiusFlag) {
+      return 'Polyline';
+    }
+    // 多边形
+    if (geom.indexOf('MULTIPOLYGON Z') > -1 && !radiusFlag) {
+      return 'Polygon';
+    }
+    // 圈
+    if (geom.indexOf('MULTIPOLYGON Z') > -1 && radiusFlag) {
+      return 'Circle';
+    }
+  }
+
   onMounted(() => {
+    // 查询地图工作区域
+    getWorkAreaList();
     nowShowMarkData.value = markJson[1];
   });
 </script>
diff --git a/src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue b/src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue
index dc63429..641e390 100644
--- a/src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue
@@ -6,13 +6,13 @@
       </a-col>
       <a-col :span="24">
         <div class="markTitle">
-          <!-- 自定义限飞区 -->
+          <!-- 自定义禁降区 -->
           <div
             v-if="props.nowShowAreaData.type == 'noland'"
             :style="{
               width: '15px',
               height: '15px',
-              background: `linear-gradient(to bottom right, transparent 45%, ${props.nowShowAreaData.content.properties.color} 45%, ${props.nowShowAreaData.content.properties.color} 60%, transparent 60%), #ffffff00`,
+              background: `linear-gradient(to bottom right, transparent 45%, #FF9900 45%, #FF9900 60%, transparent 60%), #ffffff00`,
               'margin-left': '2px',
               'margin-right': '12px',
             }"
@@ -23,25 +23,23 @@
             :style="{
               width: '13px',
               height: '13px',
-              outline: `2px solid ${props.nowShowAreaData.content.properties.color}`,
+              outline: `2px solid #00FF00`,
               'margin-left': '2px',
               'margin-right': '12px',
-              'border-radius':
-                props.nowShowAreaData.content.geometry.type == 'Circle' ? '6.5px' : '0px',
+              'border-radius': props.nowShowAreaData.geomtype == 'Circle' ? '6.5px' : '0px',
             }"
           />
-          <!-- 自定义禁降区 -->
+          <!-- 自定义限飞区 -->
           <div
             v-if="props.nowShowAreaData.type == 'nfz'"
             :style="{
               width: '13px',
               height: '13px',
-              outline: `2px solid ${props.nowShowAreaData.content.properties.color}`,
-              background: `${props.nowShowAreaData.content.properties.color}55`,
+              outline: `2px solid #FF0000`,
+              background: `#FF000055`,
               'margin-left': '2px',
               'margin-right': '12px',
-              'border-radius':
-                props.nowShowAreaData.content.geometry.type == 'Circle' ? '6.5px' : '0px',
+              'border-radius': props.nowShowAreaData.geomtype == 'Circle' ? '6.5px' : '0px',
             }"
           />
           <a-input v-model:value="nowAreaData.name" style="width: 65%" size="small"></a-input>
@@ -73,7 +71,7 @@
       </a-col>
       <a-col :span="18">
         <div class="markContent">
-          {{ props.nowShowAreaData.status == 'enable' ? '已启用' : '已禁用' }}
+          {{ props.nowShowAreaData.state == 0 ? '已启用' : '已禁用' }}
         </div>
       </a-col>
       <!-- 水平距离 -->
@@ -81,33 +79,29 @@
         <div class="markTitle">水平距离</div>
       </a-col>
       <a-col :span="18" v-if="props.nowShowAreaData.type == 'noland'">
-        <div class="markContent"> {{ distance.toFixed(1) }}m</div>
+        <div class="markContent"> {{ nowAreaData.length.toFixed(1) }}m</div>
       </a-col>
       <!-- 水平面积 -->
       <a-col :span="6">
         <div class="markTitle">水平面积</div>
       </a-col>
       <a-col :span="18">
-        <div class="markContent"> {{ area.toFixed(2) }}㎡</div>
+        <div class="markContent"> {{ nowAreaData.area.toFixed(2) }}㎡</div>
       </a-col>
       <!-- 水平周长 -->
-      <a-col :span="6" v-if="props.nowShowAreaData.content.geometry.type == 'Polygon'">
+      <a-col :span="6" v-if="props.nowShowAreaData.geomtype == 'Polygon'">
         <div class="markTitle">水平周长</div>
       </a-col>
-      <a-col :span="18" v-if="props.nowShowAreaData.content.geometry.type == 'Polygon'">
-        <div class="markContent"> {{ distance2 }}m</div>
+      <a-col :span="18" v-if="props.nowShowAreaData.geomtype == 'Polygon'">
+        <div class="markContent"> {{ nowAreaData.length.toFixed(1) }}m</div>
       </a-col>
       <!-- 半径 -->
-      <a-col :span="6" v-if="props.nowShowAreaData.content.geometry.type == 'Circle'">
+      <a-col :span="6" v-if="props.nowShowAreaData.geomtype == 'Circle'">
         <div class="markTitle">半径</div>
       </a-col>
-      <a-col :span="18" v-if="props.nowShowAreaData.content.geometry.type == 'Circle'">
+      <a-col :span="18" v-if="props.nowShowAreaData.geomtype == 'Circle'">
         <div class="markContent">
-          <a-input
-            v-model:value="nowAreaData.content.geometry.radius"
-            style="width: 100%"
-            size="small"
-          >
+          <a-input v-model:value="nowAreaData.properties.radius" style="width: 100%" size="small">
             <template #addonAfter> <span style="color: white">m</span> </template>
           </a-input>
         </div>
@@ -120,19 +114,19 @@
         <div class="markContent">
           <div
             class="button"
-            :class="{ disabled: nowAreaData.content.properties.width == 10 }"
+            :class="{ disabled: nowAreaData.properties.width == 10 }"
             @click="removeRecordNum"
           >
             <MinusOutlined style="font-size: 20px; color: #ffffff" />
           </div>
           <div class="numDiv">
             <span v-if="!numInputFlag" class="numSpan" @click="focusInput">
-              {{ nowAreaData.content.properties.width }}
+              {{ nowAreaData.properties.width }}
             </span>
             <a-input
               v-if="numInputFlag"
               ref="focusInputRef"
-              v-model:value="nowAreaData.content.properties.width"
+              v-model:value="nowAreaData.properties.width"
               style="width: 50%"
               @blur="blurInput"
               @keypress.enter="blurInput"
@@ -141,7 +135,7 @@
           </div>
           <div
             class="button"
-            :class="{ disabled: nowAreaData.content.properties.width == 100 }"
+            :class="{ disabled: nowAreaData.properties.width == 100 }"
             @click="addRecordNum"
           >
             <PlusOutlined style="font-size: 20px; color: #ffffff" />
@@ -153,7 +147,7 @@
         <div class="markTitle">绘制者</div>
       </a-col>
       <a-col :span="18">
-        <div class="markContent"> {{ props.nowShowAreaData.created_nickname }}</div>
+        <div class="markContent"> {{ props.nowShowAreaData.createdUser }}</div>
       </a-col>
       <a-col :span="24">
         <div class="area_buttons">
@@ -182,7 +176,15 @@
     MinusOutlined,
     PlusOutlined,
   } from '@ant-design/icons-vue';
+  import {
+    GetWorkAreaList,
+    AddWorkArea,
+    UpdateWorkArea,
+    DeleteWorkArea,
+  } from '@/api/demo/mediaLibrary';
   import { cloneDeep } from 'lodash-es';
+  import { useMessage } from '@/hooks/web/useMessage';
+  const { createMessage, createConfirm } = useMessage();
 
   const props = defineProps(['allAreaDataList', 'nowShowAreaData']);
   const emits = defineEmits([
@@ -193,6 +195,16 @@
   ]);
   const nowAreaData: any = ref(props.nowShowAreaData);
 
+  watch(
+    () => nowAreaData.value,
+    () => {
+      emits('setNowShowAreaData', nowAreaData.value, false);
+    },
+    {
+      deep: true,
+    },
+  );
+
   // 宽度----------------------------------------------------------------------
   const numInputFlag = ref(false);
   const focusInputRef = ref();
@@ -209,40 +221,40 @@
   function blurInput() {
     numInputFlag.value = false;
     // 检测是否是数字
-    if (/^-?\d+(\.\d+)?$/.test(nowAreaData.value.content.properties.width.toString())) {
-      if (nowAreaData.value.content.properties.width > 100) {
+    if (/^-?\d+(\.\d+)?$/.test(nowAreaData.value.properties.width.toString())) {
+      if (nowAreaData.value.properties.width > 100) {
         // 不能大于100
-        nowAreaData.value.content.properties.width = 100;
-      } else if (nowAreaData.value.content.properties.width < 10) {
+        nowAreaData.value.properties.width = 100;
+      } else if (nowAreaData.value.properties.width < 10) {
         // 不能小于10
-        nowAreaData.value.content.properties.width = 10;
+        nowAreaData.value.properties.width = 10;
       } else {
         // 保存小数点后两位
-        let newnum = cloneDeep(nowAreaData.value.content.properties.width);
-        nowAreaData.value.content.properties.width = parseFloat(parseFloat(newnum).toFixed(2));
+        let newnum = cloneDeep(nowAreaData.value.properties.width);
+        nowAreaData.value.properties.width = parseFloat(parseFloat(newnum).toFixed(2));
       }
     } else {
       // 不是数字
-      nowAreaData.value.content.properties.width = 10;
+      nowAreaData.value.properties.width = 10;
     }
   }
   // 宽度-减少
   function removeRecordNum() {
-    let newnum = cloneDeep(nowAreaData.value.content.properties.width);
+    let newnum = cloneDeep(nowAreaData.value.properties.width);
     if (newnum == 10) {
       return;
     }
     newnum -= 5;
-    nowAreaData.value.content.properties.width = parseFloat(newnum.toFixed(2));
+    nowAreaData.value.properties.width = parseFloat(newnum.toFixed(2));
   }
   // 宽度-增加
   function addRecordNum() {
-    let newnum = cloneDeep(nowAreaData.value.content.properties.width);
+    let newnum = cloneDeep(nowAreaData.value.properties.width);
     if (newnum == 100) {
       return;
     }
     newnum += 5;
-    nowAreaData.value.content.properties.width = parseFloat(newnum.toFixed(2));
+    nowAreaData.value.properties.width = parseFloat(newnum.toFixed(2));
   }
 
   // 关闭
@@ -251,52 +263,28 @@
   }
   // 移动到中心位置
   function handlerLocation() {
-    let coordinates = props.nowShowAreaData.content.geometry.coordinates;
-    if (props.nowShowAreaData.content.geometry.type == 'Circle') {
+    if (props.nowShowAreaData.geomtype == 'Circle') {
       emits('handlerLocation', {
-        lng: coordinates[0],
-        lat: coordinates[1],
+        lng: props.nowShowAreaData.properties.centerPoint[0],
+        lat: props.nowShowAreaData.properties.centerPoint[1],
       });
     } else {
       emits('handlerLocation', {
-        lng: coordinates[0][0][0],
-        lat: coordinates[0][0][1],
+        lng: props.nowShowAreaData.properties.centerPoint[0],
+        lat: props.nowShowAreaData.properties.centerPoint[1],
       });
     }
   }
   // 删除此区域
   function deleteArea() {
-    emits('deleteArea', props.nowShowAreaData);
-  }
-
-  // 水平距离
-  const distance = ref(0);
-  async function getDistance() {
-    distance.value = mars3d.MeasureUtil.getSurfaceDistance(
-      props.nowShowAreaData.content.geometry.coordinates[0],
-    );
-  }
-
-  // 水平面积
-  const area = ref(0);
-  async function getArea() {
-    if (props.nowShowAreaData.content.geometry.type == 'Circle') {
-      let radius = props.nowShowAreaData.content.geometry.radius;
-      area.value = Math.PI * radius * radius;
-    } else {
-      area.value = mars3d.MeasureUtil.getSurfaceArea(
-        props.nowShowAreaData.content.geometry.coordinates[0],
-      );
-    }
-  }
-
-  // 水平周长
-  const distance2 = ref(0);
-  async function getDistance2() {
-    distance.value = mars3d.MeasureUtil.getDistance(
-      props.nowShowAreaData.content.geometry.coordinates[0],
-      true,
-    );
+    createConfirm({
+      iconType: 'info',
+      title: '提示',
+      content: '将会影响到项目内设备的作业范围，是否删除该区域？',
+      onOk: async () => {
+        emits('deleteArea', props.nowShowAreaData);
+      },
+    });
   }
 
   watch(
@@ -304,14 +292,14 @@
     () => {
       nowAreaData.value = props.nowShowAreaData;
       // 水平面积
-      getArea();
+      // getArea();
       if (props.nowShowAreaData.type == 'noland') {
         // 水平距离
-        getDistance();
+        // getDistance();
       }
-      if (props.nowShowAreaData.content.geometry.type == 'Polygon') {
+      if (props.nowShowAreaData.geomtype == 'Polygon') {
         // 水平距离
-        getDistance2();
+        // getDistance();
       }
     },
     {
diff --git a/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue b/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
index 209f35f..df01a12 100644
--- a/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
@@ -89,28 +89,17 @@
               <a-select-option value="noland">全部禁降区</a-select-option>
             </a-select>
             <a-select
-              v-model:value="areastatus"
+              v-model:value="areastate"
               style="width: 120px"
               @change="handleChangeAreaSelect"
             >
               <a-select-option value="all">全部状态</a-select-option>
-              <a-select-option value="enable">已启用</a-select-option>
-              <a-select-option value="disable">已禁用</a-select-option>
+              <a-select-option value="0">已启用</a-select-option>
+              <a-select-option value="1">已禁用</a-select-option>
             </a-select>
           </div>
           <!-- 列表 -->
-          <div
-            v-for="show in showMenuInfoList"
-            :key="show.id"
-            @mouseenter="
-              show.mouse = true;
-              show.deleteClickNum = 0;
-            "
-            @mouseleave="
-              show.mouse = false;
-              show.deleteClickNum = 0;
-            "
-          >
+          <div v-for="show in showMenuInfoList" :key="show.id">
             <!-- 地图标注 -->
             <div
               v-if="showMenuInfoName == '地图标注'"
@@ -123,20 +112,31 @@
                       ? '#393939'
                       : '',
               }"
+              @mouseenter="
+                show.mouse = true;
+                show.deleteClickNum = 0;
+              "
+              @mouseleave="
+                show.mouse = false;
+                show.deleteClickNum = 0;
+              "
             >
               <div @click="setNowShowMarkData(show)">
-                <AntDesignOutlined v-if="show.resource.type == '0'" />
-                <ExpandAltOutlined v-if="show.resource.type == '1'" />
-                <BorderOutlined v-if="show.resource.type == '2'" />
-                <LogoutOutlined v-if="show.resource.type == '3'" />
+                <AntDesignOutlined v-if="show.type == '0'" />
+                <ExpandAltOutlined v-if="show.type == '1'" />
+                <BorderOutlined v-if="show.type == '2'" />
+                <LogoutOutlined v-if="show.type == '3'" />
               </div>
               <div
                 class="eye"
-                @click="show.status = !show.status"
-                :style="{ background: show.status ? '#2d8cf0' : '#000000' }"
+                @click="show.status == 0 ? (show.status = 1) : (show.status = 0)"
+                :style="{ background: show.status == 1 ? '#2d8cf0' : '#000000' }"
               >
-                <EyeOutlined v-if="show.status" style="color: #ffffff; font-size: 16px" />
-                <EyeInvisibleOutlined v-if="!show.status" style="color: #ffffff; font-size: 16px" />
+                <EyeOutlined v-if="show.status == 1" style="color: #ffffff; font-size: 16px" />
+                <EyeInvisibleOutlined
+                  v-if="show.status == 0"
+                  style="color: #ffffff; font-size: 16px"
+                />
               </div>
               <div @click="setNowShowMarkData(show)">{{ show.name }}</div>
               <div class="buttonRight2" v-if="show.mouse">
@@ -260,33 +260,35 @@
                   props.nowShowAreaData && props.nowShowAreaData.id == show.id
                     ? '2px solid #2D8CF0'
                     : '',
-                background:
-                  props.nowShowAreaData && show.status == 'enable' ? '#3c3c3c' : '#3c3c3c55',
+                background: props.nowShowAreaData && show.state == 0 ? '#3c3c3c' : '#3c3c3c55',
               }"
             >
-              <div
-                class="name"
-                @click="setNowShowAreaData(show)"
-                :style="{
-                  color: show.status == 'enable' ? '#ffffff' : '#ffffff55',
-                }"
-              >
-                {{ show.name }}
-              </div>
+              <a-tooltip placement="right">
+                <template #title> {{ show.name }} </template>
+                <div
+                  class="name"
+                  @click="setNowShowAreaData(show)"
+                  :style="{
+                    color: show.state == 0 ? '#ffffff' : '#ffffff55',
+                  }"
+                >
+                  {{ show.name }}
+                </div>
+              </a-tooltip>
               <div
                 class="type"
                 @click="setNowShowAreaData(show)"
                 :style="{
-                  color: show.status == 'enable' ? '#ffffff' : '#ffffff55',
+                  color: show.state == 0 ? '#ffffff' : '#ffffff55',
                 }"
               >
-                <!-- 自定义限飞区 -->
+                <!-- 自定义禁降区 -->
                 <div
                   v-if="show.type == 'noland'"
                   :style="{
                     width: '15px',
                     height: '15px',
-                    background: `linear-gradient(to bottom right, transparent 45%, ${show.content.properties.color} 45%, ${show.content.properties.color} 60%, transparent 60%), #ffffff00`,
+                    background: `linear-gradient(to bottom right, transparent 45%, #FF9900 45%, #FF9900 60%, transparent 60%), #ffffff00`,
                     'margin-right': '6px',
                   }"
                 />
@@ -296,27 +298,27 @@
                   :style="{
                     width: '13px',
                     height: '13px',
-                    outline: `2px solid ${show.content.properties.color}`,
+                    outline: `2px solid #00FF00`,
                     'margin-right': '6px',
-                    'border-radius': show.content.geometry.type == 'Circle' ? '6.5px' : '0px',
+                    'border-radius': show.geomtype == 'Circle' ? '6.5px' : '0px',
                   }"
                 />
-                <!-- 自定义禁降区 -->
+                <!-- 自定义限飞区 -->
                 <div
                   v-if="show.type == 'nfz'"
                   :style="{
                     width: '13px',
                     height: '13px',
-                    outline: `2px solid ${show.content.properties.color}`,
-                    background: `${show.content.properties.color}55`,
+                    outline: `2px solid #FF0000`,
+                    background: `#FF000055`,
                     'margin-right': '6px',
-                    'border-radius': show.content.geometry.type == 'Circle' ? '6.5px' : '0px',
+                    'border-radius': show.geomtype == 'Circle' ? '6.5px' : '0px',
                   }"
                 />
                 <span>{{ getType(show.type) }}</span>
               </div>
               <div class="buttonlist">
-                <div class="button" v-if="show.status == 'disable'">
+                <div class="button" v-if="show.state == 1">
                   <a-popconfirm
                     title="将会影响到项目内设备的作业范围，是否启用该区域？"
                     ok-text="启用"
@@ -332,7 +334,7 @@
                     </a-tooltip>
                   </a-popconfirm>
                 </div>
-                <div class="button" v-if="show.status == 'enable'">
+                <div class="button" v-if="show.state == 0">
                   <a-popconfirm
                     title="将会影响到项目内设备的作业范围，是否禁用该区域？"
                     ok-text="禁用"
@@ -386,7 +388,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { ref, watch } from 'vue';
   import {
     CloseOutlined,
     AntDesignOutlined,
@@ -405,6 +407,12 @@
     CheckCircleOutlined,
     StopOutlined,
   } from '@ant-design/icons-vue';
+  import {
+    GetWorkAreaList,
+    AddWorkArea,
+    UpdateWorkArea,
+    DeleteWorkArea,
+  } from '@/api/demo/mediaLibrary';
   import { cloneDeep } from 'lodash-es';
   import { useMessage } from '@/hooks/web/useMessage';
   const { createMessage, createConfirm } = useMessage();
@@ -427,14 +435,13 @@
     'setNowShowMarkData',
     'setNowShowImageData',
     'setNowShowAreaData',
+    'setAllAreaData',
     'deleteMark',
     'deleteArea',
   ]);
   const showMenuInfoList = ref(props.allMarkDataList);
   const showMenuInfoName = ref('地图标注');
   function updateShowMenuInfoList(type) {
-    console.log(type);
-
     if (type == '地图标注') {
       showMenuInfoList.value = props.allMarkDataList;
     }
@@ -473,7 +480,7 @@
   // 地图作业区域-------------------------------------------------
   // 地图作业区域-单选
   const areatype = ref('all');
-  const areastatus = ref('all');
+  const areastate = ref('all');
   // 地图作业区域-获取类别区分
   function getType(type) {
     let name = '';
@@ -497,24 +504,49 @@
     if (areatype.value !== 'all') {
       filterAreaData = filterAreaData.filter((item) => item.type == areatype.value);
     }
-    if (areastatus.value !== 'all') {
-      filterAreaData = filterAreaData.filter((item) => item.status == areastatus.value);
+    if (areastate.value !== 'all') {
+      filterAreaData = filterAreaData.filter((item) => item.state == areastate.value);
     }
     filterAfterAreaDataList.value = filterAreaData;
     showMenuInfoList.value = filterAfterAreaDataList.value;
   }
+
   // 地图作业区域-启用该区域
   function enableThisArea(value) {
     setNowShowAreaData({
       ...value,
-      status: 'enable',
+      state: 0,
+    });
+    UpdateWorkArea({
+      ...value,
+      // id: value.id,
+      // name: value.name,
+      // type: value.type,
+      properties: JSON.stringify(value.properties),
+      // geom: value.geom,
+      // workSpaceId: '1',
+      state: 0,
+    }).then((res) => {
+      emits('setAllAreaData');
     });
   }
   // 地图作业区域-禁用该区域
   function disableThisArea(value) {
     setNowShowAreaData({
       ...value,
-      status: 'disable',
+      state: 1,
+    });
+    UpdateWorkArea({
+      // id: value.id,
+      // name: value.name,
+      // type: value.type,
+      ...value,
+      properties: JSON.stringify(value.properties),
+      // geom: value.geom,
+      // workSpaceId: '1',
+      state: 1,
+    }).then((res) => {
+      emits('setAllAreaData');
     });
   }
   // 地图作业区域-删除此区域
@@ -538,52 +570,51 @@
   // ------------------------------------------------------------------
   // 移动到中心位置
   function handlerLocation(position) {
-    if (showMenuInfoName.value == '地图标注') {
-      let coordinates = position.resource.content.geometry.coordinates;
-      switch (position.resource.type) {
-        case 0:
-          emits('handlerLocation', {
-            lng: coordinates[0],
-            lat: coordinates[1],
-          });
-          break;
-        case 1:
-          emits('handlerLocation', {
-            lng: coordinates[0][0],
-            lat: coordinates[0][1],
-          });
-          break;
-        case 2:
-          emits('handlerLocation', {
-            lng: coordinates[0][0][0],
-            lat: coordinates[0][0][1],
-          });
-          break;
-        case 3:
-          emits('handlerLocation', {
-            lng: coordinates[0],
-            lat: coordinates[1],
-          });
-          break;
-      }
-    }
-    if (showMenuInfoName.value == '地图照片') {
-      emits('handlerLocation', {
-        lng: position.photo_position.lng,
-        lat: position.photo_position.lat,
-      });
-    }
+    // if (showMenuInfoName.value == '地图标注') {
+    //   let coordinates = position.coordinates;
+    //   switch (position.type) {
+    //     case 0:
+    //       emits('handlerLocation', {
+    //         lng: coordinates[0],
+    //         lat: coordinates[1],
+    //       });
+    //       break;
+    //     case 1:
+    //       emits('handlerLocation', {
+    //         lng: coordinates[0][0],
+    //         lat: coordinates[0][1],
+    //       });
+    //       break;
+    //     case 2:
+    //       emits('handlerLocation', {
+    //         lng: coordinates[0][0][0],
+    //         lat: coordinates[0][0][1],
+    //       });
+    //       break;
+    //     case 3:
+    //       emits('handlerLocation', {
+    //         lng: coordinates[0],
+    //         lat: coordinates[1],
+    //       });
+    //       break;
+    //   }
+    // }
+    // if (showMenuInfoName.value == '地图照片') {
+    //   emits('handlerLocation', {
+    //     lng: position.photo_position.lng,
+    //     lat: position.photo_position.lat,
+    //   });
+    // }
     if (showMenuInfoName.value == '地图作业区域') {
-      let coordinates = position.content.geometry.coordinates;
-      if (position.content.geometry.type == 'Circle') {
+      if (position.geomtype == 'Circle') {
         emits('handlerLocation', {
-          lng: coordinates[0],
-          lat: coordinates[1],
+          lng: position.properties.centerPoint[0],
+          lat: position.properties.centerPoint[1],
         });
       } else {
         emits('handlerLocation', {
-          lng: coordinates[0][0][0],
-          lat: coordinates[0][0][1],
+          lng: position.properties.centerPoint[0],
+          lat: position.properties.centerPoint[1],
         });
       }
     }
@@ -785,8 +816,12 @@
               left: 6px;
               color: #ffffff;
               font-size: 15px;
-              width: 240px;
-              height: 29px;
+              width: 90%;
+              height: 30px;
+
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
             }
             .type {
               position: absolute;
diff --git a/src/views/demo/system/mediaLibrary/path/pathMap.vue b/src/views/demo/system/mediaLibrary/path/pathMap.vue
index 9bf3e7f..9932398 100644
--- a/src/views/demo/system/mediaLibrary/path/pathMap.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathMap.vue
@@ -9,7 +9,7 @@
           <template #content>
             <div style="display: flex; gap: 5px">
               <div
-                class="popoverClass"
+                class="popoverMark"
                 v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
                 :key="color"
                 :style="{ background: color }"
@@ -35,7 +35,7 @@
           <template #content>
             <div style="display: flex; gap: 5px">
               <div
-                class="popoverClass"
+                class="popoverMark"
                 v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
                 :key="color"
                 :style="{ background: color }"
@@ -61,7 +61,7 @@
           <template #content>
             <div style="display: flex; gap: 5px">
               <div
-                class="popoverClass"
+                class="popoverMark"
                 v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
                 :key="color"
                 :style="{ background: color }"
@@ -87,7 +87,7 @@
           <template #content>
             <div style="display: flex; gap: 5px">
               <div
-                class="popoverClass"
+                class="popoverMark"
                 v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
                 :key="color"
                 :style="{ background: color }"
@@ -106,10 +106,108 @@
         </a-popover>
       </div>
     </div>
+    <div class="areaButtons">
+      <div
+        :class="mapAreaDrawFlag ? 'button_choose' : 'button_nochoose'"
+        style="border-radius: 3px"
+        @click="drawArea"
+      >
+        <a-popover placement="leftTop">
+          <template #content>
+            <div style="display: block; gap: 5px; width: 170px">
+              <div
+                class="popoverArea"
+                v-for="type in [
+                  'nfz_Polygon',
+                  'nfz_Circle',
+                  'dfence_Polygon',
+                  'dfence_Circle',
+                  'noland_Polyline',
+                ]"
+                :key="type"
+                :style="{ background: '#ffffff' }"
+                @click="areaDrawType = type"
+              >
+                <!-- 自定义禁降区 -->
+                <div
+                  v-if="type.indexOf('noland') > -1"
+                  :style="{
+                    width: '15px',
+                    height: '15px',
+                    background: `linear-gradient(to bottom right, transparent 45%, #FF9900 45%, #FF9900 60%, transparent 60%), #ffffff00`,
+                    'margin-right': '6px',
+                  }"
+                />
+                <!-- 自定义作业区 -->
+                <div
+                  v-if="type.indexOf('dfence') > -1"
+                  :style="{
+                    width: '13px',
+                    height: '13px',
+                    outline: `2px solid #00FF00`,
+                    'margin-right': '6px',
+                    'border-radius': type == 'dfence_Circle' ? '6.5px' : '0px',
+                  }"
+                />
+                <!-- 自定义限飞区 -->
+                <div
+                  v-if="type.indexOf('nfz') > -1"
+                  :style="{
+                    width: '13px',
+                    height: '13px',
+                    outline: `2px solid #FF0000`,
+                    background: `#FF000055`,
+                    'margin-right': '6px',
+                    'border-radius': type == 'nfz_Circle' ? '6.5px' : '0px',
+                  }"
+                />
+                <div style="width: 130px" v-if="type == 'nfz_Polygon'">自定义多边形限飞区</div>
+                <div style="width: 130px" v-if="type == 'nfz_Circle'">自定义圆形限飞区</div>
+                <div style="width: 130px" v-if="type == 'dfence_Polygon'">自定义多边形作业区</div>
+                <div style="width: 130px" v-if="type == 'dfence_Circle'">自定义圆形作业区</div>
+                <div style="width: 130px" v-if="type == 'noland_Polyline'">自定义禁降区</div>
+                <CheckOutlined v-if="areaDrawType == type" style="color: blue; margin-left: 10px" />
+              </div>
+            </div>
+          </template>
+          <!-- 自定义禁降区 -->
+          <div
+            v-if="areaDrawType.indexOf('noland') > -1"
+            :style="{
+              width: '18px',
+              height: '18px',
+              background: `linear-gradient(to bottom right, transparent 45%, #FF9900 45%, #FF9900 60%, transparent 60%), #ffffff00`,
+            }"
+          />
+          <!-- 自定义作业区 -->
+          <div
+            v-if="areaDrawType.indexOf('dfence') > -1"
+            :style="{
+              width: '16px',
+              height: '16px',
+              outline: `2px solid #00FF00`,
+
+              'border-radius': areaDrawType == 'dfence_Circle' ? '6.5px' : '0px',
+            }"
+          />
+          <!-- 自定义限飞区 -->
+          <div
+            v-if="areaDrawType.indexOf('nfz') > -1"
+            :style="{
+              width: '16px',
+              height: '16px',
+              outline: `2px solid #FF0000`,
+              background: `#FF000055`,
+              'border-radius': areaDrawType == 'nfz_Circle' ? '6.5px' : '0px',
+            }"
+          />
+        </a-popover>
+      </div>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, onMounted, defineEmits } from 'vue';
+  import { ref, watch, onMounted, defineEmits } from 'vue';
   import * as mars3d from 'mars3d';
   import * as Cesium from 'mars3d-cesium';
   import { circle, rect, triangle } from './svg';
@@ -120,6 +218,15 @@
     BorderOutlined,
     LogoutOutlined,
   } from '@ant-design/icons-vue';
+  import {
+    GetWorkAreaList,
+    AddWorkArea,
+    UpdateWorkArea,
+    DeleteWorkArea,
+  } from '@/api/demo/mediaLibrary';
+  import * as turf from '@turf/turf';
+  import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
+  import dayjs from 'dayjs';
 
   const props = defineProps([
     'allMarkDataList',
@@ -134,6 +241,9 @@
     'setNowShowImageData',
     'setNowShowAreaData',
     'closePathImageInfo',
+    'setAllMarkData',
+    'setAllImageData',
+    'setAllAreaData',
   ]);
 
   const vChartRef: any = ref<HTMLElement>();
@@ -402,27 +512,29 @@
       ],
       layers: [],
     });
-    // 图层
-    map.addLayer(graphicLayers);
-    showAllMarkDataList();
-    showAllImageDataList();
-    showAllAreaDataList();
-    handlerLocation([118.2958779, 35.1342553]);
-    // 监听地图点击事件
-    map.on(mars3d.EventType.click, function (event) {
-      if (!event.czmObject) {
-        // 地图标注-恢复默认
-        if (props.nowShowMarkData.id) {
-          markRestoreDefault();
-          emits('setNowShowMarkData', {});
+    if (map) {
+      // 图层
+      map.addLayer(graphicLayers);
+      showAllMarkDataList();
+      showAllImageDataList();
+      showAllAreaDataList();
+      handlerLocation([118.2958779, 35.1342553]);
+      // 监听地图点击事件
+      map.on(mars3d.EventType.click, function (event) {
+        if (!event.czmObject) {
+          // 地图标注-恢复默认
+          if (props.nowShowMarkData.id) {
+            markRestoreDefault();
+            emits('setNowShowMarkData', {});
+          }
+          // // 地图作业区域-恢复默认
+          // if (props.nowShowAreaData.id) {
+          //   areaRestoreDefault();
+          //   emits('setNowShowAreaData', {});
+          // }
         }
-        // // 地图作业区域-恢复默认
-        // if (props.nowShowAreaData.id) {
-        //   areaRestoreDefault();
-        //   emits('setNowShowAreaData', {});
-        // }
-      }
-    });
+      });
+    }
   };
 
   // 地图标注--------------------------------------------------------------------
@@ -513,7 +625,7 @@
           id: item.id,
           positions: content.geometry.coordinates,
           style: {
-            color: Cesium.Color.fromCssColorString(content.properties.color),
+            color: content.properties.color,
             width: content.properties.line_width,
             label: {
               text: `${item.name}`,
@@ -595,7 +707,7 @@
         polygonGraphic.on(mars3d.EventType.mouseOver, function () {
           if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
             polygonGraphic.setStyle({
-              // color: Cesium.Color.fromCssColorString('#ffffff00'),
+              // color: '#ffffff00',
               label: {
                 color: content.properties.color,
               },
@@ -734,6 +846,100 @@
     return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgString)));
   }
 
+  // 地图标注-绘制--------------------------------------------------------------------
+  const mapDrawType: any = ref('');
+  const drawColorPoint = ref('#2D8CF0');
+  const drawColorPolyline = ref('#2D8CF0');
+  const drawColorPolygon = ref('#2D8CF0');
+  const drawColorCricle = ref('#2D8CF0');
+
+  // 地图标注-绘制-点
+  async function drawPoint() {
+    if (mapDrawType.value == 'drawPoint') {
+      mapDrawType.value = '';
+      return;
+    }
+    mapDrawType.value = 'drawPoint';
+    const graphic = await graphicLayers.startDraw({
+      type: 'billboard',
+      style: {
+        image: 'https://data.mars3d.cn/img/marker/mark-red.png',
+        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+        label: {
+          text: '可以同时支持文字',
+          font_size: 26,
+          color: drawColorPoint.value,
+          outline: true,
+          outlineColor: '#000000',
+          pixelOffsetY: -60,
+        },
+      },
+    });
+  }
+  // 地图标注-绘制-线
+  async function drawPolyline() {
+    if (mapDrawType.value == 'drawPolyline') {
+      mapDrawType.value = '';
+      return;
+    }
+    mapDrawType.value = 'drawPolyline';
+    const graphic = await graphicLayers.startDraw({
+      type: 'polyline',
+      style: {
+        pixelSize: 12,
+        color: '#3388ff',
+        label: {
+          text: '可以同时支持文字',
+          font_size: 20,
+          color: '#ffffff',
+          outline: true,
+          outlineColor: '#000000',
+          pixelOffsetY: -20,
+        },
+      },
+    });
+    console.log('标绘完成', graphic.toJSON());
+  }
+  // 地图标注-绘制-形状
+  async function drawPolygon() {
+    if (mapDrawType.value == 'drawPolygon') {
+      mapDrawType.value = '';
+      return;
+    }
+    mapDrawType.value = 'drawPolygon';
+    const graphic = await graphicLayers.startDraw({
+      type: 'polygon',
+      style: {
+        color: '#ffff00',
+        opacity: 0.5,
+        outline: true,
+        outlineColor: '#ffffff',
+        outlineWidth: 2.0,
+      },
+    });
+    console.log('标绘完成', graphic.toJSON());
+  }
+  // 地图标注-绘制-形状
+  async function drawCricle() {
+    if (mapDrawType.value == 'drawCricle') {
+      mapDrawType.value = '';
+      return;
+    }
+    mapDrawType.value = 'drawCricle';
+    const graphic = await graphicLayers.startDraw({
+      type: 'circle',
+      style: {
+        color: '#ffff00',
+        opacity: 0.6,
+        outline: true,
+        outlineColor: '#ffffff',
+        outlineWidth: 2.0,
+      },
+    });
+    console.log('标绘完成', graphic.toJSON());
+  }
+
   // 地图照片--------------------------------------------------------------------
   // 地图照片-初始化-遍历展示
   const showAllImageDataList = async () => {
@@ -1045,6 +1251,91 @@
   }
 
   // 地图作业区域--------------------------------------------------------------------
+  watch(
+    () => props.allAreaDataList,
+    () => {
+      showAllAreaDataList();
+    },
+  );
+  watch(
+    () => props.nowShowAreaData,
+    (newVal, oldVal) => {
+      let time = dayjs().format('YYYY-MM-DD HH:mm:ss');
+      if (newVal) {
+        // 样式
+        area_noland_LineStringGraphicData?.forEach((graphicLayer) => {
+          if (graphicLayer.options.id == props.nowShowAreaData.id) {
+            graphicLayer.setStyle({
+              label: {
+                color: graphicLayer.options.style.color,
+              },
+            });
+            if (oldVal && newVal.id == oldVal.id) {
+              addAndUpdateWorkArea(graphicLayer, 'noland_Polyline', time, 'update');
+            }
+          }
+        });
+        area_dfence_PolygonGraphicData?.forEach((graphicLayer) => {
+          if (graphicLayer.options.id == props.nowShowAreaData.id) {
+            graphicLayer.setStyle({
+              label: {
+                text: props.nowShowAreaData.name,
+                color: graphicLayer.options.style.color.substring(0, 7),
+              },
+            });
+            if (oldVal && newVal.id == oldVal.id) {
+              addAndUpdateWorkArea(graphicLayer, 'dfence_Polygon', time, 'update');
+            }
+          }
+        });
+        area_nfz_PolygonGraphicData?.forEach((graphicLayer) => {
+          if (graphicLayer.options.id == props.nowShowAreaData.id) {
+            graphicLayer.setStyle({
+              label: {
+                text: props.nowShowAreaData.name,
+                color: graphicLayer.options.style.color.substring(0, 7),
+              },
+            });
+            if (oldVal && newVal.id == oldVal.id) {
+              addAndUpdateWorkArea(graphicLayer, 'nfz_Polygon', time, 'update');
+            }
+          }
+        });
+        area_dfence_CircleGraphicData?.forEach((graphicLayer) => {
+          if (graphicLayer.options.id == props.nowShowAreaData.id) {
+            graphicLayer.setStyle({
+              radius: props.nowShowAreaData.properties.radius,
+              label: {
+                text: props.nowShowAreaData.name,
+                color: graphicLayer.options.style.color.substring(0, 7),
+              },
+            });
+            if (oldVal && newVal.id == oldVal.id) {
+              addAndUpdateWorkArea(graphicLayer, 'dfence_Circle', time, 'update');
+            }
+          }
+        });
+        area_nfz_CircleGraphicData?.forEach((graphicLayer) => {
+          if (graphicLayer.options.id == props.nowShowAreaData.id) {
+            graphicLayer.setStyle({
+              radius: props.nowShowAreaData.properties.radius,
+              label: {
+                text: props.nowShowAreaData.name,
+                color: graphicLayer.options.style.color.substring(0, 7),
+              },
+            });
+            if (oldVal && newVal.id == oldVal.id) {
+              addAndUpdateWorkArea(graphicLayer, 'nfz_Circle', time, 'update');
+            }
+          }
+        });
+      }
+    },
+    {
+      deep: true,
+    },
+  );
+
   // 地图作业区域-初始化-遍历展示
   function showAllAreaDataList() {
     // 删除旧数据
@@ -1073,19 +1364,18 @@
     area_nfz_PolygonGraphicData = [];
     // 地图作业区域-限飞区-圈
     area_nfz_CircleGraphicData = [];
-
     props.allAreaDataList.forEach((item, index) => {
-      let content = item.content;
+      // console.log(item);
       // 地图作业区域-禁降区-线
-      if (item.type == 'noland' && content.geometry.type == 'Polyline') {
+      if (item.type == 'noland' && item.geomtype == 'Polyline') {
         let nolandLineGraphic = new mars3d.graphic.PolylineEntity({
-          positions: content.geometry.coordinates[0],
+          positions: item.coordinates[0][0],
           style: {
-            clampToGround: content.properties.clampToGround,
+            clampToGround: item.properties.clampToGround,
             width: 10,
             materialType: mars3d.MaterialType.LineCross,
             materialOptions: {
-              color: content.properties.color, // 中心线颜色
+              color: item.state == 0 ? item.properties.color : '#6d6d6d', // 中心线颜色
               dashLength: 36, // 十字长度
               maskLength: 10, // 空隙间隔长度
               centerPower: 0.1, // 中心宽百分比
@@ -1109,7 +1399,7 @@
           if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
             nolandLineGraphic.setStyle({
               label: {
-                color: content.properties.color,
+                color: item.state == 0 ? item.properties.color : '#6d6d6d',
               },
             });
           }
@@ -1130,7 +1420,7 @@
           areaRestoreDefault();
           nolandLineGraphic.setStyle({
             label: {
-              color: content.properties.color,
+              color: item.state == 0 ? item.properties.color : '#6d6d6d',
             },
           });
           emits('setNowShowAreaData', item);
@@ -1141,21 +1431,21 @@
         area_noland_LineStringGraphicData.push(nolandLineGraphic);
       }
       // 地图作业区域-作业区-多边形
-      if (item.type == 'dfence' && content.geometry.type == 'Polygon') {
+      if (item.type == 'dfence' && item.geomtype == 'Polygon') {
         let dfence_PolygonGraphic = new mars3d.graphic.PolygonEntity({
           id: item.id,
-          positions: content.geometry.coordinates,
+          positions: item.coordinates[0][0],
           style: {
-            clampToGround: content.properties.clampToGround,
+            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,
-                backgroundColor: '#ffffff',
-                color: Cesium.Color.fromCssColorString(content.properties.color),
+                color: item.state == 0 ? item.properties.color : '#6d6d6d',
                 dashLength: 36,
                 maskLength: 10,
                 centerPower: 0.1,
@@ -1179,7 +1469,7 @@
           if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
             dfence_PolygonGraphic.setStyle({
               label: {
-                color: content.properties.color,
+                color: item.state == 0 ? item.properties.color : '#6d6d6d',
               },
             });
           }
@@ -1200,7 +1490,7 @@
           areaRestoreDefault();
           dfence_PolygonGraphic.setStyle({
             label: {
-              color: content.properties.color,
+              color: item.state == 0 ? item.properties.color : '#6d6d6d',
             },
           });
           emits('setNowShowAreaData', item);
@@ -1210,23 +1500,20 @@
         // 数据
         area_dfence_PolygonGraphicData.push(dfence_PolygonGraphic);
       }
-      // 地图作业区域-作业区-圈
-      if (item.type == 'dfence' && content.geometry.type == 'Circle') {
-        let dfence_CircleGraphic = new mars3d.graphic.CircleEntity({
+      // 地图作业区域-限飞区-多边形
+      if (item.type == 'nfz' && item.geomtype == 'Polygon') {
+        let nfz_PolygonGraphic = new mars3d.graphic.PolygonEntity({
           id: item.id,
-          position: content.geometry.coordinates,
+          positions: item.coordinates[0][0],
           style: {
-            clampToGround: content.properties.clampToGround,
-            radius: content.geometry.radius,
-            fill: false,
+            clampToGround: item.properties.clampToGround,
+            color: item.state == 0 ? item.properties.color + '33' : '#6d6d6d' + '33',
             outline: true,
             outlineStyle: {
               width: 12,
               materialType: mars3d.MaterialType.LineCross,
               materialOptions: {
-                background: true,
-                backgroundColor: '#ffffff',
-                color: Cesium.Color.fromCssColorString(content.properties.color),
+                color: item.state == 0 ? item.properties.color : '#6d6d6d',
                 dashLength: 36,
                 maskLength: 10,
                 centerPower: 0.1,
@@ -1246,19 +1533,19 @@
           },
         });
         // 监听mouseover事件
-        dfence_CircleGraphic.on(mars3d.EventType.mouseOver, function () {
+        nfz_PolygonGraphic.on(mars3d.EventType.mouseOver, function () {
           if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
-            dfence_CircleGraphic.setStyle({
+            nfz_PolygonGraphic.setStyle({
               label: {
-                color: content.properties.color,
+                color: item.state == 0 ? item.properties.color : '#6d6d6d',
               },
             });
           }
         });
         // 监听mouseout事件
-        dfence_CircleGraphic.on(mars3d.EventType.mouseOut, function () {
+        nfz_PolygonGraphic.on(mars3d.EventType.mouseOut, function () {
           if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
-            dfence_CircleGraphic.setStyle({
+            nfz_PolygonGraphic.setStyle({
               label: {
                 color: '#000000',
               },
@@ -1266,37 +1553,38 @@
           }
         });
         // 监听点击事件
-        dfence_CircleGraphic.on(mars3d.EventType.click, function () {
+        nfz_PolygonGraphic.on(mars3d.EventType.click, function () {
           // 全部恢复默认
           areaRestoreDefault();
-          dfence_CircleGraphic.setStyle({
+          nfz_PolygonGraphic.setStyle({
             label: {
-              color: content.properties.color,
+              color: item.state == 0 ? item.properties.color : '#6d6d6d',
             },
           });
           emits('setNowShowAreaData', item);
         });
         // 将 作业区-圈 添加到图层中
-        graphicLayers.addGraphic(dfence_CircleGraphic);
+        graphicLayers.addGraphic(nfz_PolygonGraphic);
         // 数据
-        area_dfence_CircleGraphicData.push(dfence_CircleGraphic);
+        area_nfz_PolygonGraphicData.push(nfz_PolygonGraphic);
       }
-      // 地图作业区域-限飞区-多边形
-      if (item.type == 'nfz' && content.geometry.type == 'Polygon') {
-        let nfz_PolygonGraphic = new mars3d.graphic.PolygonEntity({
+      // 地图作业区域-作业区-圈
+      if (item.type == 'dfence' && item.geomtype == 'Circle') {
+        let dfence_CircleGraphic = new mars3d.graphic.CircleEntity({
           id: item.id,
-          positions: content.geometry.coordinates,
+          position: item.properties.centerPoint,
           style: {
-            clampToGround: content.properties.clampToGround,
-            color: Cesium.Color.fromCssColorString(content.properties.color + '33'),
+            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,
-                backgroundColor: '#ffffff',
-                color: Cesium.Color.fromCssColorString(content.properties.color),
+                color: item.state == 0 ? item.properties.color : '#6d6d6d',
                 dashLength: 36,
                 maskLength: 10,
                 centerPower: 0.1,
@@ -1316,19 +1604,19 @@
           },
         });
         // 监听mouseover事件
-        nfz_PolygonGraphic.on(mars3d.EventType.mouseOver, function () {
+        dfence_CircleGraphic.on(mars3d.EventType.mouseOver, function () {
           if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
-            nfz_PolygonGraphic.setStyle({
+            dfence_CircleGraphic.setStyle({
               label: {
-                color: content.properties.color,
+                color: item.state == 0 ? item.properties.color : '#6d6d6d',
               },
             });
           }
         });
         // 监听mouseout事件
-        nfz_PolygonGraphic.on(mars3d.EventType.mouseOut, function () {
+        dfence_CircleGraphic.on(mars3d.EventType.mouseOut, function () {
           if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
-            nfz_PolygonGraphic.setStyle({
+            dfence_CircleGraphic.setStyle({
               label: {
                 color: '#000000',
               },
@@ -1336,38 +1624,36 @@
           }
         });
         // 监听点击事件
-        nfz_PolygonGraphic.on(mars3d.EventType.click, function () {
+        dfence_CircleGraphic.on(mars3d.EventType.click, function () {
           // 全部恢复默认
           areaRestoreDefault();
-          nfz_PolygonGraphic.setStyle({
+          dfence_CircleGraphic.setStyle({
             label: {
-              color: content.properties.color,
+              color: item.state == 0 ? item.properties.color : '#6d6d6d',
             },
           });
           emits('setNowShowAreaData', item);
         });
         // 将 作业区-圈 添加到图层中
-        graphicLayers.addGraphic(nfz_PolygonGraphic);
+        graphicLayers.addGraphic(dfence_CircleGraphic);
         // 数据
-        area_nfz_PolygonGraphicData.push(nfz_PolygonGraphic);
+        area_dfence_CircleGraphicData.push(dfence_CircleGraphic);
       }
       // 地图作业区域-限飞区-圈
-      if (item.type == 'nfz' && content.geometry.type == 'Circle') {
+      if (item.type == 'nfz' && item.geomtype == 'Circle') {
         let nfz_CircleGraphic = new mars3d.graphic.CircleEntity({
           id: item.id,
-          position: content.geometry.coordinates,
+          position: item.properties.centerPoint,
           style: {
-            clampToGround: content.properties.clampToGround,
-            radius: content.geometry.radius,
-            color: Cesium.Color.fromCssColorString(content.properties.color + '33'),
+            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: {
-                background: true,
-                backgroundColor: '#ffffff',
-                color: Cesium.Color.fromCssColorString(content.properties.color),
+                color: item.state == 0 ? item.properties.color : '#6d6d6d',
                 dashLength: 36,
                 maskLength: 10,
                 centerPower: 0.1,
@@ -1391,7 +1677,7 @@
           if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
             nfz_CircleGraphic.setStyle({
               label: {
-                color: content.properties.color,
+                color: item.state == 0 ? item.properties.color : '#6d6d6d',
               },
             });
           }
@@ -1412,7 +1698,7 @@
           areaRestoreDefault();
           nfz_CircleGraphic.setStyle({
             label: {
-              color: content.properties.color,
+              color: item.state == 0 ? item.properties.color : '#6d6d6d',
             },
           });
           emits('setNowShowAreaData', item);
@@ -1428,8 +1714,8 @@
   function areaRestoreDefault() {
     // 作业区-多边形-恢复默认
     for (let i = 0; i < area_noland_LineStringGraphicData.length; i++) {
-      let nolandLineGraphic = area_noland_LineStringGraphicData[i];
-      nolandLineGraphic.setStyle({
+      let graphic = area_noland_LineStringGraphicData[i];
+      graphic.setStyle({
         label: {
           color: '#000000',
         },
@@ -1437,26 +1723,26 @@
     }
     // 作业区-多边形-恢复默认
     for (let i = 0; i < area_dfence_PolygonGraphicData.length; i++) {
-      let dfence_PolygonGraphic = area_dfence_PolygonGraphicData[i];
-      dfence_PolygonGraphic.setStyle({
+      let graphic = area_dfence_PolygonGraphicData[i];
+      graphic.setStyle({
         label: {
           color: '#000000',
         },
       });
     }
-    // 作业区-圈-恢复默认
-    for (let i = 0; i < area_dfence_CircleGraphicData.length; i++) {
-      let dfence_CircleGraphic = area_dfence_CircleGraphicData[i];
-      dfence_CircleGraphic.setStyle({
+    // 限飞区-多边形-恢复默认
+    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_nfz_PolygonGraphicData.length; i++) {
-      let nfz_PolygonGraphic = area_nfz_CircleGraphicData[i];
-      nfz_PolygonGraphic.setStyle({
+    // 作业区-圈-恢复默认
+    for (let i = 0; i < area_dfence_CircleGraphicData.length; i++) {
+      let graphic = area_dfence_CircleGraphicData[i];
+      graphic.setStyle({
         label: {
           color: '#000000',
         },
@@ -1464,8 +1750,8 @@
     }
     // 限飞区-圈-恢复默认
     for (let i = 0; i < area_nfz_CircleGraphicData.length; i++) {
-      let nfz_CircleGraphic = area_nfz_CircleGraphicData[i];
-      nfz_CircleGraphic.setStyle({
+      let graphic = area_nfz_CircleGraphicData[i];
+      graphic.setStyle({
         label: {
           color: '#000000',
         },
@@ -1473,100 +1759,252 @@
     }
   }
 
-  // 地图绘制--------------------------------------------------------------------
-  const mapDrawFlag = ref(false);
-  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 = '';
+  // 地图区域-绘制
+  const mapAreaDrawFlag = ref(false);
+  const areaDrawType = ref('dfence_Polygon');
+  async function drawArea() {
+    if (mapAreaDrawFlag.value) {
+      mapAreaDrawFlag.value = false;
       return;
     }
-    mapDrawType.value = 'drawPoint';
-    const graphic = await graphicLayers.startDraw({
-      type: 'billboardP',
-      style: {
-        image: 'https://data.mars3d.cn/img/marker/mark-red.png',
-        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        label: {
-          text: '可以同时支持文字',
-          font_size: 26,
-          color: drawColorPoint.value,
+    mapAreaDrawFlag.value = true;
+    let time = dayjs().format('YYYY-MM-DD HH:mm:ss');
+    // 自定义禁降区
+    if (areaDrawType.value == 'noland_Polyline') {
+    }
+    // 自定义多边形限飞区
+    if (areaDrawType.value == 'nfz_Polygon') {
+      const graphic = await graphicLayers.startDraw({
+        type: 'polygon',
+        style: {
+          clampToGround: true,
+          color: '#FF0000' + '33',
           outline: true,
-          outlineColor: '#000000',
-          pixelOffsetY: -60,
+          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,
+          },
         },
-      },
-    });
-    console.log('标绘完成', graphic.toJSON());
-  }
-  // 地图绘制-线
-  async function drawPolyline() {
-    if (mapDrawType.value == 'drawPolyline') {
-      mapDrawType.value = '';
-      return;
+      });
+      area_nfz_PolygonGraphicData.push(graphic);
+      addAndUpdateWorkArea(graphic, 'nfz_Polygon', time);
     }
-    mapDrawType.value = 'drawPolyline';
-    const graphic = await graphicLayers.startDraw({
-      type: 'polylineP',
-      style: {
-        pixelSize: 12,
-        color: '#3388ff',
-        label: {
-          text: '可以同时支持文字',
-          font_size: 20,
-          color: '#ffffff',
+    // 自定义圆形限飞区
+    if (areaDrawType.value == 'nfz_Circle') {
+      const graphic = await graphicLayers.startDraw({
+        type: 'circle',
+        style: {
+          clampToGround: true,
+          color: '#FF0000' + '33',
           outline: true,
-          outlineColor: '#000000',
-          pixelOffsetY: -20,
+          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,
+          },
         },
-      },
-    });
-    console.log('标绘完成', graphic.toJSON());
-  }
-  // 地图绘制-形状
-  async function drawPolygon() {
-    if (mapDrawType.value == 'drawPolygon') {
-      mapDrawType.value = '';
-      return;
+      });
+      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);
     }
-    mapDrawType.value = 'drawPolygon';
-    const graphic = await graphicLayers.startDraw({
-      type: 'polygonP',
-      style: {
-        color: '#ffff00',
-        opacity: 0.5,
-        outline: true,
-        outlineColor: '#ffffff',
-        outlineWidth: 2.0,
-      },
-    });
-    console.log('标绘完成', graphic.toJSON());
   }
-  // 地图绘制-形状
-  async function drawCricle() {
-    if (mapDrawType.value == 'drawCricle') {
-      mapDrawType.value = '';
-      return;
+
+  // 新增到数据库并刷新列表
+  async function addAndUpdateWorkArea(graphic, areatype, time, addOrUpdate = 'add') {
+    let graphicJson = graphic.toJSON();
+    let params: any = {};
+    let coordinates = graphicJson.position || graphicJson.positions;
+    let properties = {};
+    let polygonData: any = [];
+    let type = '';
+    let geom = '';
+
+    switch (areatype) {
+      // 自定义圆形限飞区
+      case 'nfz_Circle':
+        type = 'nfz';
+        geom = GeojsonToWkt(turf.circle(coordinates, graphicJson.style.radius).geometry);
+        properties = {
+          clampToGround: true,
+          color: '#FF0000',
+          radius: graphicJson.style.radius,
+          centerPoint: coordinates,
+        };
+        break;
+      // 自定义多边形作业区
+      case 'nfz_Polygon':
+        type = 'nfz';
+        coordinates.push(coordinates[0]);
+        polygonData.push(coordinates);
+        geom = GeojsonToWkt(turf.polygon(polygonData).geometry);
+        properties = {
+          clampToGround: true,
+          color: '#FF0000',
+          centerPoint: coordinates[0],
+        };
+        break;
+      // 自定义圆形作业区
+      case 'dfence_Circle':
+        type = 'dfence';
+        geom = GeojsonToWkt(turf.circle(coordinates, graphicJson.style.radius).geometry);
+        properties = {
+          clampToGround: true,
+          color: '#00FF00',
+          radius: graphicJson.style.radius,
+          centerPoint: coordinates,
+        };
+        break;
+      // 自定义多边形作业区
+      case 'dfence_Polygon':
+        type = 'dfence';
+        coordinates.push(coordinates[0]);
+        polygonData.push(coordinates);
+        geom = GeojsonToWkt(turf.polygon(polygonData).geometry);
+        properties = {
+          clampToGround: true,
+          color: '#00FF00',
+          centerPoint: coordinates[0],
+        };
+        break;
+    }
+    if (addOrUpdate == 'add') {
+      params = {
+        name: graphicJson.style.label.text,
+        type: type,
+        properties: JSON.stringify(properties),
+        createTime: time,
+        createUser: '',
+        geom: geom,
+        workSpaceId: '1',
+        state: 0,
+        createUserName: '',
+      };
+      AddWorkArea(params).then((result) => {
+        // 刷新区域信息
+        emits('setAllAreaData');
+        mapAreaDrawFlag.value = false;
+      });
+    } else {
+      params = {
+        id: graphicJson.id,
+        name: graphicJson.style.label.text,
+        type: type,
+        properties: JSON.stringify(properties),
+        geom: geom,
+        workSpaceId: '1',
+        state: props.nowShowAreaData.state,
+      };
+      UpdateWorkArea(params).then((result) => {
+        // 刷新区域信息
+        // emits('setAllAreaData');
+        // mapAreaDrawFlag.value = false;
+      });
     }
-    mapDrawType.value = 'drawCricle';
-    const graphic = await graphicLayers.startDraw({
-      type: 'circleP',
-      style: {
-        color: '#ffff00',
-        opacity: 0.6,
-        outline: true,
-        outlineColor: '#ffffff',
-        outlineWidth: 2.0,
-      },
-    });
-    console.log('标绘完成', graphic.toJSON());
   }
 
   // 图斑定位
@@ -1578,6 +2016,8 @@
   defineExpose({
     setNowShowImageByRight,
     handlerLocation,
+    markRestoreDefault,
+    areaRestoreDefault,
   });
 </script>
 <style lang="less" scoped>
@@ -1628,7 +2068,7 @@
     outline: 2px solid #2b85e4;
   }
 
-  .popoverClass {
+  .popoverMark {
     width: 18px;
     height: 18px;
     display: flex;
@@ -1636,4 +2076,23 @@
     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>