From 6615361dea12b2df7f9630d8afd221591a47b4f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Sat, 12 Jul 2025 17:18:48 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E5=AA=92=E4=BD=93=E5=BA=93-=E4=BD=9C?=
 =?UTF-8?q?=E4=B8=9A=E5=8C=BA=E5=9F=9F=E3=80=81=E6=A0=87=E6=B3=A8=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/demo/mediaLibrary.ts                  |  56 +-
 .../demo/system/mediaLibrary/path/index.vue   | 184 +++--
 .../system/mediaLibrary/path/json/area.json   | 206 ------
 .../system/mediaLibrary/path/json/mark.json   | 348 ----------
 .../demo/system/mediaLibrary/path/path.ts     |   2 +-
 ...athMarkInfo.vue => pathAnnotationInfo.vue} | 374 +++++-----
 .../system/mediaLibrary/path/pathAreaInfo.vue | 208 ++----
 .../system/mediaLibrary/path/pathLeftMenu.vue | 124 ++--
 .../demo/system/mediaLibrary/path/pathMap.vue | 640 +++++++++++++-----
 9 files changed, 966 insertions(+), 1176 deletions(-)
 delete mode 100644 src/views/demo/system/mediaLibrary/path/json/area.json
 delete mode 100644 src/views/demo/system/mediaLibrary/path/json/mark.json
 rename src/views/demo/system/mediaLibrary/path/{pathMarkInfo.vue => pathAnnotationInfo.vue} (58%)

diff --git a/src/api/demo/mediaLibrary.ts b/src/api/demo/mediaLibrary.ts
index 2094a87..b466817 100644
--- a/src/api/demo/mediaLibrary.ts
+++ b/src/api/demo/mediaLibrary.ts
@@ -1,5 +1,14 @@
 import { defHttp } from '@/utils/http/axios';
 enum Api {
+  // 获取地图标注列表
+  GetAnnotationList = '/api/Manage/GetAnnotationList',
+  // 添加地图标注
+  AddAnnotation = '/api/Manage/AddAnnotation',
+  // 更新地图标注
+  UpdateAnnotation = '/api/Manage/UpdateAnnotation',
+  // 删除地图标注
+  DeleteAnnotation = '/api/Manage/DeleteAnnotation',
+
   // 获取地图作业区域列表
   GetWorkAreaList = '/api/Manage/GetWorkAreaList',
   // 添加地图作业区域
@@ -10,6 +19,35 @@ enum Api {
   DeleteWorkArea = '/api/Manage/DeleteWorkArea',
 }
 
+// 获取地图标注列表
+export function GetAnnotationList(params) {
+  return defHttp.get({
+    url: Api.GetAnnotationList,
+    params
+  });
+}
+// 添加地图标注
+export function AddAnnotation(params) {
+  return defHttp.post({
+    url: Api.AddAnnotation,
+    data:params
+  });
+}
+// 更新地图标注
+export function UpdateAnnotation(params) {
+  return defHttp.post({
+    url: Api.UpdateAnnotation,
+    data:params
+  });
+}
+// 删除地图标注
+export function DeleteAnnotation(params) {
+  return defHttp.post({
+    url: Api.DeleteAnnotation + '?id=' + params.id,
+    data:params
+  });
+}
+
 // 获取地图作业区域列表
 export function GetWorkAreaList(params) {
   return defHttp.get({
@@ -26,15 +64,15 @@ export function AddWorkArea(params) {
 }
 // 更新地图作业区域
 export function UpdateWorkArea(params) {
-return defHttp.post({
-    url: Api.UpdateWorkArea,
-    data: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
+  return defHttp.post({
+      url: Api.DeleteWorkArea + '?id=' + params.id,
+      data:params
+  });
+}
diff --git a/src/views/demo/system/mediaLibrary/path/index.vue b/src/views/demo/system/mediaLibrary/path/index.vue
index 940efaf..0f2bef4 100644
--- a/src/views/demo/system/mediaLibrary/path/index.vue
+++ b/src/views/demo/system/mediaLibrary/path/index.vue
@@ -11,8 +11,8 @@
         ref="pathLeftMenuRef"
         :pathRecord="props.pathRecord"
         :leftMenuShow="leftMenuShow"
-        :allMarkDataList="allMarkDataList"
-        :nowShowMarkData="nowShowMarkData"
+        :allAnnotationDataList="allAnnotationDataList"
+        :nowShowAnnotationData="nowShowAnnotationData"
         :allAreaDataList="allAreaDataList"
         :nowShowAreaData="nowShowAreaData"
         :allImageDataList="allImageDataList"
@@ -20,12 +20,13 @@
         @changeLeftMenuShow="changeLeftMenuShow"
         @handlerLocation="handlerLocation"
         @closePathModal="closePathModal"
-        @changeMarkInfoShow="changeMarkInfoShow"
-        @setNowShowMarkData="setNowShowMarkData"
+        @changeAnnotationInfoShow="changeAnnotationInfoShow"
+        @setNowShowAnnotationData="setNowShowAnnotationData"
         @setNowShowImageData="setNowShowImageData"
         @setNowShowAreaData="setNowShowAreaData"
+        @setAllAnnotationData="setAllAnnotationData"
         @setAllAreaData="setAllAreaData"
-        @deleteMark="deleteMark"
+        @deleteAnnotation="deleteAnnotation"
         @deleteArea="deleteArea"
       />
     </div>
@@ -33,30 +34,30 @@
     <div class="mapDiv" :style="{ width: dynamicWidth }">
       <PathMap
         ref="pathMapRef"
-        :allMarkDataList="allMarkDataList"
-        :nowShowMarkData="nowShowMarkData"
+        :allAnnotationDataList="allAnnotationDataList"
+        :nowShowAnnotationData="nowShowAnnotationData"
         :allAreaDataList="allAreaDataList"
         :nowShowAreaData="nowShowAreaData"
         :allImageDataList="allImageDataList"
         :nowShowImageData="nowShowImageData"
-        @setNowShowMarkData="setNowShowMarkData"
+        @setNowShowAnnotationData="setNowShowAnnotationData"
         @setNowShowImageData="setNowShowImageData"
         @setNowShowAreaData="setNowShowAreaData"
-        @setAllMarkData="setAllMarkData"
+        @setAllAnnotationData="setAllAnnotationData"
         @setAllImageData="setAllImageData"
         @setAllAreaData="setAllAreaData"
         @closePathImageInfo="closePathImageInfo"
       />
     </div>
     <!-- 地图标注 -->
-    <div class="markInfoDiv" v-if="markInfoShow">
-      <PathMarkInfo
-        :allMarkDataList="allMarkDataList"
-        :nowShowMarkData="nowShowMarkData"
-        @setNowShowMarkData="setNowShowMarkData"
-        @closePathMarkInfo="closePathMarkInfo"
+    <div class="annotationInfoDiv" v-if="annotationInfoShow">
+      <PathAnnotationInfo
+        :allAnnotationDataList="allAnnotationDataList"
+        :nowShowAnnotationData="nowShowAnnotationData"
+        @setNowShowAnnotationData="setNowShowAnnotationData"
+        @closePathAnnotationInfo="closePathAnnotationInfo"
         @handlerLocation="handlerLocation"
-        @deleteMark="deleteMark"
+        @deleteAnnotation="deleteAnnotation"
       />
     </div>
     <!-- 地图作业区域 -->
@@ -84,15 +85,13 @@
 </template>
 <script lang="ts" setup>
   import { ref, computed, onMounted } from 'vue';
-  import { PathLeftMenu, PathMap, PathMarkInfo, PathAreaInfo, PathImageInfo } from './path';
+  import { PathLeftMenu, PathMap, PathAnnotationInfo, PathAreaInfo, PathImageInfo } from './path';
   import { cloneDeep } from 'lodash-es';
-  import markJson from './json/mark.json';
-  import areaJson from './json/area.json';
   import imageJson from './json/image.json';
   import {
+    GetAnnotationList,
+    DeleteAnnotation,
     GetWorkAreaList,
-    AddWorkArea,
-    UpdateWorkArea,
     DeleteWorkArea,
   } from '@/api/demo/mediaLibrary';
   import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
@@ -111,7 +110,7 @@
       width += 64;
     }
     // 地图标注
-    if (markInfoShow.value) {
+    if (annotationInfoShow.value) {
       width += 320;
     }
     // 地图作业区域
@@ -136,36 +135,73 @@
   }
 
   // 右侧标注信息是否显示----------------------------------------------------
-  const markInfoShow = ref(false);
-  function changeMarkInfoShow() {
-    markInfoShow.value = !markInfoShow.value;
+  const annotationInfoShow = ref(false);
+  function changeAnnotationInfoShow() {
+    annotationInfoShow.value = !annotationInfoShow.value;
   }
   // 关闭右侧标注
-  function closePathMarkInfo() {
-    markInfoShow.value = false;
-    nowShowMarkData.value = {};
+  function closePathAnnotationInfo() {
+    annotationInfoShow.value = false;
+    nowShowAnnotationData.value = {};
+    pathMapRef.value.annotationRestoreDefault();
   }
   // 当前展示的标注信息
-  const nowShowMarkData = ref();
-  const allMarkDataList = ref(markJson);
+  const nowShowAnnotationData = ref();
+  const allAnnotationDataList: any = ref([]);
   // 设置当前展示的标注信息
-  function setNowShowMarkData(value) {
+  function setNowShowAnnotationData(value, restore = true) {
     if (value.id) {
-      markInfoShow.value = true;
+      annotationInfoShow.value = true;
     } else {
-      markInfoShow.value = false;
+      annotationInfoShow.value = false;
     }
-    nowShowMarkData.value = value;
+    if (restore) {
+      pathMapRef.value.annotationRestoreDefault();
+    }
+    nowShowAnnotationData.value = value;
   }
+  // 刷新区域信息
+  function setAllAnnotationData() {
+    // 查询地图工作区域
+    getAnnotationList();
+  }
+  // 查询地图标注
+  async function getAnnotationList(showThis = true) {
+    allAnnotationDataList.value = await GetAnnotationList({ workspaceid: 1 });
+    if (allAnnotationDataList.value.length > 0) {
+      allAnnotationDataList.value.forEach((annotation, index) => {
+        let geomjson = WktToGeojson(annotation.geom);
+        annotation = {
+          ...annotation,
+          properties: JSON.parse(annotation.properties),
+          geomtype: getGeomType(annotation),
+          coordinates: geomjson.coordinates,
+        };
+        allAnnotationDataList.value[index] = annotation;
+      });
+    }
+    if (showThis) {
+      setTimeout(() => {
+        pathLeftMenuRef.value.updateShowMenuInfoList('地图标注');
+      }, 50);
+    }
+  }
+
   // 删除标注
-  function deleteMark(value) {
-    allMarkDataList.value = cloneDeep(allMarkDataList.value).filter((item) => item.id != value.id);
-    markInfoShow.value = false;
-    nowShowMarkData.value = {};
-    setTimeout(() => {
-      pathLeftMenuRef.value.updateShowMenuInfoList('地图标注');
-    }, 50);
-    createMessage.success('标注删除成功');
+  function deleteAnnotation(value) {
+    if (nowShowAnnotationData.value && nowShowAnnotationData.value.id == value.id) {
+      annotationInfoShow.value = false;
+      nowShowAnnotationData.value = {};
+    }
+    DeleteAnnotation({
+      id: value.id,
+    }).then((result) => {
+      if (result) {
+        // 刷新
+        getAnnotationList();
+        createMessage.success('删除成功');
+      }
+    });
   }
 
   // 右侧区域信息是否显示----------------------------------------------------
@@ -181,8 +217,7 @@
   }
   // 当前展示的区域信息
   const nowShowAreaData = ref();
-  const allAreaDataList: any = ref(areaJson);
-
+  const allAreaDataList: any = ref([]);
   // 设置当前展示的区域信息
   function setNowShowAreaData(value, restore = true) {
     if (value.id) {
@@ -200,16 +235,41 @@
     // 查询地图工作区域
     getWorkAreaList();
   }
+  // 查询地图工作区域
+  async function getWorkAreaList(showThis = true) {
+    allAreaDataList.value = await GetWorkAreaList({ workspaceid: 1 });
+    if (allAreaDataList.value.length > 0) {
+      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;
+      });
+    }
+    if (showThis) {
+      setTimeout(() => {
+        pathLeftMenuRef.value.updateShowMenuInfoList('地图作业区域');
+      }, 50);
+    }
+  }
+
   // 删除区域
   async function deleteArea(value) {
+    if (nowShowAreaData.value && nowShowAreaData.value.id == value.id) {
+      areaInfoShow.value = false;
+      nowShowAreaData.value = {};
+    }
     DeleteWorkArea({
       id: value.id,
     }).then((result) => {
       if (result) {
         // 刷新
         getWorkAreaList();
-        areaInfoShow.value = false;
-        nowShowAreaData.value = {};
+        createMessage.success('删除成功');
       }
     });
   }
@@ -246,50 +306,32 @@
     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) {
+    if (geom.indexOf('POINT') > -1 && !radiusFlag) {
       return 'Point';
     }
     // 线
-    if (geom.indexOf('LINESTRING Z') > -1 && !radiusFlag) {
+    if (geom.indexOf('LINESTRING') > -1 && !radiusFlag) {
       return 'Polyline';
     }
     // 多边形
-    if (geom.indexOf('MULTIPOLYGON Z') > -1 && !radiusFlag) {
+    if (geom.indexOf('POLYGON') > -1 && !radiusFlag) {
       return 'Polygon';
     }
     // 圈
-    if (geom.indexOf('MULTIPOLYGON Z') > -1 && radiusFlag) {
+    if (geom.indexOf('POLYGON') > -1 && radiusFlag) {
       return 'Circle';
     }
   }
 
   onMounted(() => {
     // 查询地图工作区域
-    getWorkAreaList();
-    nowShowMarkData.value = markJson[1];
+    getWorkAreaList(false);
+    getAnnotationList();
   });
 </script>
 <style lang="less" scoped>
@@ -310,7 +352,7 @@
       // width: auto;
     }
 
-    .markInfoDiv {
+    .annotationInfoDiv {
       position: relative;
       height: 100%;
       width: 320px;
diff --git a/src/views/demo/system/mediaLibrary/path/json/area.json b/src/views/demo/system/mediaLibrary/path/json/area.json
deleted file mode 100644
index f9bd1f1..0000000
--- a/src/views/demo/system/mediaLibrary/path/json/area.json
+++ /dev/null
@@ -1,206 +0,0 @@
-[
-  {
-    "id": "84b09cdc-8138-461a-9008-2ac2fd2dabe1",
-    "name": "fence-2025-07-09 10:58",
-    "status": "enable",
-    "type": "dfence",
-    "content": {
-      "type": "Feature",
-      "geometry": {
-        "type": "Circle",
-        "radius": 25.98278531053457,
-        "coordinates": [
-          113.94260619946274,
-          22.581532991805254
-        ]
-      },
-      "properties": {
-        "color": "#00FF00"
-      }
-    },
-    "area_hash": "enable_dfence_602389930bf13745ad901786a991ee0a",
-    "created_time": 1752029923657,
-    "created_by": "1921832882836627456",
-    "created_nickname": "17854119262",
-    "updated_time": 1752029923657,
-    "updated_by": "1921832882836627456",
-    "updated_nickname": "17854119262"
-  },
-  {
-    "id": "f8a1ba2f-3d75-45e3-8c37-c305b8a8a18f",
-    "name": "noland-2025-07-03 09:37",
-    "status": "enable",
-    "type": "noland",
-    "content": {
-      "type": "Feature",
-      "geometry": {
-        "type": "Polyline",
-        "coordinates": [
-          [
-            [
-              113.94250795742009,
-              22.58060189921086
-            ],
-            [
-              113.94251951924755,
-              22.580338767560157
-            ],
-            [
-              113.94278841610303,
-              22.580473014976874
-            ],
-            [
-              113.94264963349448,
-              22.580583102519093
-            ],
-            [
-              113.9425571112225,
-              22.580658284012188
-            ]
-          ]
-        ]
-      },
-      "properties": {
-        "color": "#FF9900",
-        "width": 50,
-        "clampToGround": true
-      }
-    },
-    "area_hash": "enable_noland_64e037d7470402c7ab2fac8e314dcfd6",
-    "created_time": 1751506632716,
-    "created_by": "1921832882836627456",
-    "created_nickname": "17854119262",
-    "updated_time": 1752051379960,
-    "updated_by": "1921832882836627456",
-    "updated_nickname": "17854119262"
-  },
-  {
-    "id": "c30566e1-efcd-4d23-9f7e-d103816ebf22",
-    "name": "nfz-2025-07-03 09:36",
-    "status": "enable",
-    "type": "nfz",
-    "content": {
-      "type": "Feature",
-      "geometry": {
-        "type": "Circle",
-        "radius": 21.689063819799266,
-        "coordinates": [
-          113.94177749877194,
-          22.58107812199575
-        ]
-      },
-      "properties": {
-        "color": "#FF0000"
-      }
-    },
-    "area_hash": "enable_nfz_d1da0a6137ef50153537ee83155f5cef",
-    "created_time": 1751506599545,
-    "created_by": "1921832882836627456",
-    "created_nickname": "17854119262",
-    "updated_time": 1751506599545,
-    "updated_by": "1921832882836627456",
-    "updated_nickname": "17854119262"
-  },
-  {
-    "id": "53d34e36-83a1-4f27-9379-59916ac22f94",
-    "name": "作业区",
-    "status": "enable",
-    "type": "dfence",
-    "content": {
-      "type": "Feature",
-      "geometry": {
-        "type": "Polygon",
-        "coordinates": [
-          [
-            [
-              113.93691743280002,
-              22.580990598743295,
-              13.105187747054286
-            ],
-            [
-              113.93696596905927,
-              22.57814717285005,
-              50.58228204435394
-            ],
-            [
-              113.9391350491713,
-              22.57816355777337,
-              62.20456885650349
-            ],
-            [
-              113.93905350496071,
-              22.5810254053995,
-              14.889189566602015
-            ],
-            [
-              113.93691743280002,
-              22.580990598743295,
-              13.105187747054286
-            ]
-          ]
-        ]
-      },
-      "properties": {
-        "color": "#00FF00"
-      }
-    },
-    "area_hash": "enable_dfence_d0dc9ea80f32a4ddf9737ed27059da89",
-    "created_time": 1747035695040,
-    "created_by": "",
-    "created_nickname": "",
-    "updated_time": 1751870133102,
-    "updated_by": "1921832882836627456",
-    "updated_nickname": "17854119262"
-  },
-  {
-    "id": "189b2247-a5be-49ef-83cb-768056a00ed6",
-    "name": "限飞区",
-    "status": "enable",
-    "type": "nfz",
-    "content": {
-      "type": "Feature",
-      "geometry": {
-        "type": "Polygon",
-        "coordinates": [
-          [
-            [
-              113.93818303751036,
-              22.57955559024499
-            ],
-            [
-              113.93817466012537,
-              22.579329971314916
-            ],
-            [
-              113.93810624285746,
-              22.579017475880626
-            ],
-            [
-              113.93833802482754,
-              22.57902266288293
-            ],
-            [
-              113.93833942091635,
-              22.57956207360456
-            ],
-            [
-              113.93818303751036,
-              22.57955559024499
-            ]
-          ]
-        ]
-      },
-      "properties": {
-        "color": "#FF0000",
-        "clampToGround": true
-      }
-    },
-    "area_hash": "enable_nfz_d362c13ac83407d94d7e8754f25b1f8d",
-    "created_time": 1747035694853,
-    "created_by": "",
-    "created_nickname": "",
-    "updated_time": 1751870135023,
-    "updated_by": "1921832882836627456",
-    "updated_nickname": "17854119262"
-  }
-]
\ No newline at end of file
diff --git a/src/views/demo/system/mediaLibrary/path/json/mark.json b/src/views/demo/system/mediaLibrary/path/json/mark.json
deleted file mode 100644
index a33585b..0000000
--- a/src/views/demo/system/mediaLibrary/path/json/mark.json
+++ /dev/null
@@ -1,348 +0,0 @@
-[
-  {
-    "id": "302914d9-cb64-42b6-b149-504a8da5fc57",
-    "name": "限时通行",
-    "order": 0,
-    "status": 1,
-    "display": 1,
-    "resource": {
-      "content": {
-        "type": "Feature",
-        "properties": {
-          "color": "#2D8CF0",
-          "is3d": false,
-          "font_size": 24,
-          "line_width": 13,
-          "line_start_cap": 0,
-          "line_end_cap": 3
-        },
-        "geometry": {
-          "type": "LineString",
-          "coordinates": [
-            [
-              113.93791036656113,
-              22.580846919934572,
-              16.289661439575617
-            ],
-            [
-              113.93790662794272,
-              22.58080525893029,
-              16.978841881531686
-            ],
-            [
-              113.93793537498757,
-              22.580571144993392,
-              20.678091836753808
-            ],
-            [
-              113.93771086752942,
-              22.580362654641405,
-              24.05391008697749
-            ],
-            [
-              113.93799551314106,
-              22.58016161251263,
-              26.888214419326214
-            ],
-            [
-              113.93793224643738,
-              22.579899786408422,
-              31.450909981361924
-            ]
-          ]
-        }
-      },
-      "type": 1,
-      "user_name": "",
-      "user_id": "",
-      "remark": ""
-    },
-    "update_time": 1751619820885,
-    "create_time": 1729664978199,
-    "elevation_load_status": 0
-  },
-  {
-    "id": "5f26f8ac-5a35-4254-93a0-0bfc73765c78",
-    "name": "禁止停车区域",
-    "order": 0,
-    "status": 1,
-    "display": 1,
-    "resource": {
-      "content": {
-        "type": "Feature",
-        "properties": {
-          "color": "#B620E0",
-          "is3d": false
-        },
-        "geometry": {
-          "type": "Polygon",
-          "coordinates": [
-            [
-              [
-                113.93710053086316,
-                22.579672717186753,
-                23.320508205597196
-              ],
-              [
-                113.93794932236936,
-                22.579691102044677,
-                34.89822401294342
-              ],
-              [
-                113.93880753828225,
-                22.579712215916796,
-                27.103696311361936
-              ],
-              [
-                113.93880540494872,
-                22.579771626594315,
-                25.942309355632386
-              ],
-              [
-                113.93709983416198,
-                22.579734423484975,
-                23.235941922329605
-              ]
-            ]
-          ]
-        }
-      },
-      "type": 2,
-      "user_name": "",
-      "user_id": "",
-      "remark": ""
-    },
-    "update_time": 1751620038100,
-    "create_time": 1729664978199,
-    "elevation_load_status": 0
-  },
-  {
-    "id": "f52f7506-8b18-4447-a323-8c49033de5c8",
-    "name": "出入口2",
-    "order": 0,
-    "status": 1,
-    "display": 1,
-    "resource": {
-      "content": {
-        "type": "Feature",
-        "properties": {
-          "color": "#19BE6B",
-          "is3d": false,
-          "font_size": 16,
-          "clampToGround": false
-        },
-        "geometry": {
-          "type": "Point",
-          "coordinates": [
-            113.938434636,
-            22.580695156,
-            8982.852151371233
-          ]
-        }
-      },
-      "type": 0,
-      "user_name": "",
-      "user_id": "",
-      "remark": ""
-    },
-    "update_time": 1751593215069,
-    "create_time": 1729664978199,
-    "elevation_load_status": 0
-  },
-  {
-    "id": "05739f91-a6c3-4ba4-9e95-57c75e099a94",
-    "name": "17854119262 1",
-    "order": 0,
-    "status": 0,
-    "display": 1,
-    "resource": {
-      "content": {
-        "type": "Feature",
-        "properties": {
-          "color": "#B620E0",
-          "clampToGround": true,
-          "is3d": false,
-          "font_size": 16,
-          "icon": -4
-        },
-        "geometry": {
-          "type": "Point",
-          "coordinates": [
-            113.9406391943762,
-            22.580527744164762,
-            21.51958588283192
-          ],
-          "breadCrumbs": null
-        }
-      },
-      "type": 0,
-      "user_name": "17854119262",
-      "user_id": "1921832882836627456",
-      "remark": ""
-    },
-    "update_time": 1751685220114,
-    "create_time": 1751448270707,
-    "elevation_load_status": 0
-  },
-  {
-    "id": "9c991a85-8d8f-476f-bece-67ce0c554d55",
-    "name": "17854119262 2123",
-    "order": 0,
-    "status": 0,
-    "display": 1,
-    "resource": {
-      "content": {
-        "type": "Feature",
-        "properties": {
-          "color": "#2D8CF0",
-          "is3d": false,
-          "line_width": 5,
-          "line_start_cap": 3,
-          "line_end_cap": 3
-        },
-        "geometry": {
-          "type": "LineString",
-          "coordinates": [
-            [
-              113.94138861698154,
-              22.580643029700447,
-              20.832049922045826
-            ],
-            [
-              113.9413698107081,
-              22.5800551336431,
-              23.231842464666247
-            ],
-            [
-              113.94119605807259,
-              22.579448966138774,
-              26.76552516976654
-            ],
-            [
-              113.94156736523672,
-              22.579691602916927,
-              28.181016541167885
-            ]
-          ]
-        }
-      },
-      "type": 1,
-      "user_name": "17854119262",
-      "user_id": "1921832882836627456",
-      "remark": "线"
-    },
-    "update_time": 1751685219204,
-    "create_time": 1751506017591,
-    "elevation_load_status": 0
-  },
-  {
-    "id": "1e1a0eb8-22af-41b0-ad3a-f79292e128c5",
-    "name": "17854119262 1",
-    "order": 0,
-    "status": 0,
-    "display": 1,
-    "resource": {
-      "content": {
-        "type": "Feature",
-        "properties": {
-          "color": "#2D8CF0",
-          "is3d": false
-        },
-        "geometry": {
-          "type": "Polygon",
-          "coordinates": [
-            [
-              [
-                113.94179483601683,
-                22.5803370571891,
-                24.600344506309114
-              ],
-              [
-                113.94193361411388,
-                22.579958468841305,
-                29.67288586963777
-              ],
-              [
-                113.94226611869635,
-                22.58025381696287,
-                28.052565527104434
-              ]
-            ]
-          ]
-        }
-      },
-      "type": 2,
-      "user_name": "17854119262",
-      "user_id": "1921832882836627456",
-      "remark": "矩"
-    },
-    "update_time": 1751685218498,
-    "create_time": 1751506060690,
-    "elevation_load_status": 0
-  },
-  {
-    "id": "92c3fb1e-fa82-48bf-911d-af742c737c96",
-    "name": "17854119262 2",
-    "order": 0,
-    "status": 0,
-    "display": 1,
-    "resource": {
-      "content": {
-        "type": "Feature",
-        "properties": {
-          "color": "#2D8CF0",
-          "clampToGround": true,
-          "is3d": false
-        },
-        "geometry": {
-          "radius": 23.519013068778005,
-          "type": "Circle",
-          "coordinates": [
-            113.94093593815374,
-            22.58033819250183
-          ],
-          "breadCrumbs": null
-        }
-      },
-      "type": 3,
-      "user_name": "17854119262",
-      "user_id": "1921832882836627456",
-      "remark": "圈"
-    },
-    "update_time": 1751685217792,
-    "create_time": 1751530265940,
-    "elevation_load_status": 0
-  },
-  {
-    "id": "6d522cc6-3d9e-4b08-9b7c-b578314e8b50",
-    "name": "出入口1",
-    "order": 0,
-    "status": 1,
-    "display": 1,
-    "resource": {
-      "content": {
-        "type": "Feature",
-        "properties": {
-          "color": "#2D8CF0",
-          "clampToGround": false,
-          "is3d": false
-        },
-        "geometry": {
-          "type": "Point",
-          "coordinates": [
-            113.93743037203272,
-            22.580735812179856,
-            8985.824886104954
-          ]
-        }
-      },
-      "type": 0,
-      "user_name": "",
-      "user_id": "",
-      "remark": "点"
-    },
-    "update_time": 1751611711104,
-    "create_time": 1729664978199,
-    "elevation_load_status": 0
-  }
-]
\ No newline at end of file
diff --git a/src/views/demo/system/mediaLibrary/path/path.ts b/src/views/demo/system/mediaLibrary/path/path.ts
index 29c339a..0ae00a1 100644
--- a/src/views/demo/system/mediaLibrary/path/path.ts
+++ b/src/views/demo/system/mediaLibrary/path/path.ts
@@ -1,5 +1,5 @@
 export { default as PathLeftMenu } from './pathLeftMenu.vue';
 export { default as PathMap } from './pathMap.vue';
 export { default as PathImageInfo } from './pathImageInfo.vue';
-export { default as PathMarkInfo } from './pathMarkInfo.vue';
+export { default as PathAnnotationInfo } from './pathAnnotationInfo.vue';
 export { default as PathAreaInfo } from './pathAreaInfo.vue';
diff --git a/src/views/demo/system/mediaLibrary/path/pathMarkInfo.vue b/src/views/demo/system/mediaLibrary/path/pathAnnotationInfo.vue
similarity index 58%
rename from src/views/demo/system/mediaLibrary/path/pathMarkInfo.vue
rename to src/views/demo/system/mediaLibrary/path/pathAnnotationInfo.vue
index 90e1076..a2bfac6 100644
--- a/src/views/demo/system/mediaLibrary/path/pathMarkInfo.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathAnnotationInfo.vue
@@ -1,76 +1,85 @@
 <template>
-  <div class="markInfo">
+  <div class="annotationInfo">
     <!-- 关闭按钮 -->
     <div class="closeButton">
-      <CloseOutlined @click="closePathMarkInfo" style="font-size: 20px; color: white" />
+      <CloseOutlined @click="closePathAnnotationInfo" style="font-size: 20px; color: white" />
     </div>
 
-    <div class="markInfo_biaozhu_1">
+    <div class="annotationInfo_biaozhu_1">
       <a-row>
         <a-col :span="24">
-          <div class="markTitle">标注信息</div>
+          <div class="annotationTitle">标注信息</div>
         </a-col>
         <!-- 标题名：点、线、形、圈 -->
         <a-col :span="24">
-          <div class="markTitle">
-            <div class="markTitleButton_right">
+          <div class="annotationTitle">
+            <div class="annotationTitleButton_right">
               <AntDesignOutlined
-                v-if="nowMarkData.resource.type == '0'"
-                :style="{ color: nowMarkData.resource.content.properties.color }"
+                v-if="nowAnnotationData.type == 0"
+                :style="{ color: nowAnnotationData.properties.color }"
               />
               <ExpandAltOutlined
-                v-if="nowMarkData.resource.type == '1'"
-                :style="{ color: nowMarkData.resource.content.properties.color }"
+                v-if="nowAnnotationData.type == 1"
+                :style="{ color: nowAnnotationData.properties.color }"
               />
               <BorderOutlined
-                v-if="nowMarkData.resource.type == '2'"
-                :style="{ color: nowMarkData.resource.content.properties.color }"
+                v-if="nowAnnotationData.type == 2"
+                :style="{ color: nowAnnotationData.properties.color }"
               />
               <LogoutOutlined
-                v-if="nowMarkData.resource.type == '3'"
-                :style="{ color: nowMarkData.resource.content.properties.color }"
+                v-if="nowAnnotationData.type == 3"
+                :style="{ color: nowAnnotationData.properties.color }"
               />
             </div>
-            <a-input v-model:value="nowMarkData.name" style="width: 60%" size="small"></a-input>
-            <div class="markTitleButton" @click="handlerLocation">
+            <a-input
+              v-model:value="nowAnnotationData.name"
+              style="width: 60%"
+              size="small"
+            ></a-input>
+            <div class="annotationTitleButton" @click="handlerLocation">
               <AimOutlined />
             </div>
-            <div class="markTitleButton" @click="deleteMark">
+            <div class="annotationTitleButton" @click="deleteAnnotation">
               <DeleteOutlined />
             </div>
           </div>
         </a-col>
         <!-- 颜色：点、线、形、圈 -->
         <a-col :span="6">
-          <div class="markTitle">颜色</div>
+          <div class="annotationTitle">颜色</div>
         </a-col>
         <a-col :span="18">
-          <div class="markContent">
+          <div class="annotationContent">
             <div
               class="popoverClass"
               v-for="color in ['#2D8CF0', '#19BE6B', '#FF9900', '#E23C39', '#B620E0']"
               :key="color"
               :style="{ background: color }"
-              @click="nowMarkData.resource.content.properties.color = color"
+              @click="nowAnnotationData.properties.color = color"
             >
               <CheckOutlined
-                v-if="nowMarkData?.resource?.content?.properties?.color == color"
+                v-if="nowAnnotationData.properties.color == color"
                 style="color: white"
               />
             </div>
           </div>
         </a-col>
         <!-- 形态：线 -->
-        <a-col :span="6" v-if="nowMarkData.resource.type == '1'">
-          <div class="markTitle">形态</div>
+        <a-col :span="6" v-if="nowAnnotationData.type == 1">
+          <div class="annotationTitle">形态</div>
         </a-col>
-        <a-col :span="18" v-if="nowMarkData.resource.type == '1'">
-          <div class="markContent" style="gap: 5%">
+        <a-col :span="18" v-if="nowAnnotationData.type == 1">
+          <div class="annotationContent" style="gap: 5%">
             <a-tooltip placement="top">
               <template #title> 线宽度 </template>
               <a-input
-                v-model:value="nowMarkData.resource.content.properties.line_width"
+                v-model:value="nowAnnotationData.properties.line_width"
                 style="width: 30%"
+                @change="
+                  nowAnnotationData.properties.line_width = parseFloat(
+                    nowAnnotationData.properties.line_width.toString().replace(/[^-0-9]/g, ''),
+                  )
+                "
               >
                 <template #prefix><AlignLeftOutlined /></template>
               </a-input>
@@ -78,7 +87,7 @@
             <a-tooltip placement="top">
               <template #title> 线头部样式 </template>
               <a-select
-                v-model:value="nowMarkData.resource.content.properties.line_start_cap"
+                v-model:value="nowAnnotationData.properties.line_start_cap"
                 style="width: 30%"
                 option-label-prop="children"
               >
@@ -99,7 +108,7 @@
             <a-tooltip placement="top">
               <template #title> 线尾部样式 </template>
               <a-select
-                v-model:value="nowMarkData.resource.content.properties.line_end_cap"
+                v-model:value="nowAnnotationData.properties.line_end_cap"
                 style="width: 30%"
                 option-label-prop="children"
               >
@@ -120,20 +129,20 @@
           </div>
         </a-col>
         <!-- 图标：点 -->
-        <a-col :span="6" v-if="nowMarkData.resource.type == '0'">
-          <div class="markTitle">图标</div>
+        <a-col :span="6" v-if="nowAnnotationData.type == 0">
+          <div class="annotationTitle">图标</div>
         </a-col>
-        <a-col :span="18" v-if="nowMarkData.resource.type == '0'">
-          <div class="markContent"></div>
+        <a-col :span="18" v-if="nowAnnotationData.type == 0">
+          <div class="annotationContent"></div>
         </a-col>
         <!-- 字体：点、线、形、圈 -->
         <a-col :span="6">
-          <div class="markTitle">字体</div>
+          <div class="annotationTitle">字体</div>
         </a-col>
         <a-col :span="18">
-          <div class="markContent">
+          <div class="annotationContent">
             <a-radio-group
-              v-model:value="nowMarkData.resource.content.properties.font_size"
+              v-model:value="nowAnnotationData.properties.font_size"
               button-style="solid"
               size="small"
             >
@@ -146,10 +155,10 @@
       </a-row>
     </div>
     <div style="border-bottom: 1px solid #ffffff55; margin-left: 15px; margin-right: 15px"></div>
-    <div class="markInfo_biaozhu_2">
+    <div class="annotationInfo_biaozhu_2">
       <a-row>
         <a-col :span="24">
-          <div class="markTitle">
+          <div class="annotationTitle">
             测量数据
             <a-tooltip placement="top">
               <template #title> 只能测量出当前视窗范围内的数据 </template>
@@ -158,11 +167,11 @@
           </div>
         </a-col>
         <!-- 经纬模式：点、圈 -->
-        <a-col :span="6" v-if="[0, 3].includes(nowMarkData.resource.type)">
-          <div class="markTitle">经纬模式</div>
+        <a-col :span="6" v-if="[0, 3].includes(nowAnnotationData.type)">
+          <div class="annotationTitle">经纬模式</div>
         </a-col>
-        <a-col :span="18" v-if="[0, 3].includes(nowMarkData.resource.type)">
-          <div class="markContent">
+        <a-col :span="18" v-if="[0, 3].includes(nowAnnotationData.type)">
+          <div class="annotationContent">
             <a-radio-group v-model:value="modalType">
               <a-radio :value="0"><span style="color: white">十进制</span></a-radio>
               <a-radio :value="1"><span style="color: white">度分秒</span></a-radio>
@@ -170,16 +179,13 @@
           </div>
         </a-col>
         <!-- 经度：点 -->
-        <a-col :span="6" v-if="[0].includes(nowMarkData.resource.type)">
-          <div class="markTitle">经度</div>
+        <a-col :span="6" v-if="[0].includes(nowAnnotationData.type)">
+          <div class="annotationTitle">经度</div>
         </a-col>
-        <a-col :span="18" v-if="[0].includes(nowMarkData.resource.type)">
-          <div class="markContent">
+        <a-col :span="18" v-if="[0].includes(nowAnnotationData.type)">
+          <div class="annotationContent">
             <!-- 十进制 -->
-            <a-input
-              v-if="modalType == 0"
-              v-model:value="nowMarkData.resource.content.geometry.coordinates[0]"
-            >
+            <a-input v-if="modalType == 0" v-model:value="nowAnnotationData.coordinates[0]">
               <template #addonAfter>
                 <span style="color: white">°</span>
               </template>
@@ -221,16 +227,13 @@
           </div>
         </a-col>
         <!-- 纬度：点 -->
-        <a-col :span="6" v-if="[0].includes(nowMarkData.resource.type)">
-          <div class="markTitle">纬度</div>
+        <a-col :span="6" v-if="[0].includes(nowAnnotationData.type)">
+          <div class="annotationTitle">纬度</div>
         </a-col>
-        <a-col :span="18" v-if="[0].includes(nowMarkData.resource.type)">
-          <div class="markContent">
+        <a-col :span="18" v-if="[0].includes(nowAnnotationData.type)">
+          <div class="annotationContent">
             <!-- 十进制 -->
-            <a-input
-              v-if="modalType == 0"
-              v-model:value="nowMarkData.resource.content.geometry.coordinates[1]"
-            >
+            <a-input v-if="modalType == 0" v-model:value="nowAnnotationData.coordinates[1]">
               <template #addonAfter>
                 <span style="color: white">°</span>
               </template>
@@ -272,126 +275,121 @@
           </div>
         </a-col>
         <!-- 高度：点 -->
-        <a-col :span="6" v-if="[0].includes(nowMarkData.resource.type)">
-          <div class="markTitle">高度</div>
+        <a-col :span="6" v-if="[0].includes(nowAnnotationData.type)">
+          <div class="annotationTitle">高度</div>
         </a-col>
-        <a-col :span="18" v-if="[0].includes(nowMarkData.resource.type)">
-          <div class="markContent">
-            <a-input v-model:value="nowMarkData.resource.content.geometry.coordinates[2]">
+        <a-col :span="18" v-if="[0].includes(nowAnnotationData.type)">
+          <div class="annotationContent">
+            <a-input v-model:value="nowAnnotationData.coordinates[2]">
               <template #addonAfter> <span style="color: white">m</span> </template>
             </a-input>
           </div>
         </a-col>
         <!-- 圆心经度：圈 -->
-        <a-col :span="6" v-if="[3].includes(nowMarkData.resource.type)">
-          <div class="markTitle">圆心经度</div>
+        <a-col :span="6" v-if="[3].includes(nowAnnotationData.type)">
+          <div class="annotationTitle">圆心经度</div>
         </a-col>
-        <a-col :span="18" v-if="[3].includes(nowMarkData.resource.type)">
-          <div class="markContent">
-            <a-input v-model:value="nowMarkData.resource.content.geometry.coordinates[0]">
+        <a-col :span="18" v-if="[3].includes(nowAnnotationData.type)">
+          <div class="annotationContent">
+            <a-input v-model:value="nowAnnotationData.properties.centerPoint[0]">
               <template #addonAfter> <span style="color: white">°</span> </template>
             </a-input>
           </div>
         </a-col>
         <!-- 圆心纬度：圈 -->
-        <a-col :span="6" v-if="[3].includes(nowMarkData.resource.type)">
-          <div class="markTitle">圆心纬度</div>
+        <a-col :span="6" v-if="[3].includes(nowAnnotationData.type)">
+          <div class="annotationTitle">圆心纬度</div>
         </a-col>
-        <a-col :span="18" v-if="[3].includes(nowMarkData.resource.type)">
-          <div class="markContent">
-            <a-input v-model:value="nowMarkData.resource.content.geometry.coordinates[1]">
+        <a-col :span="18" v-if="[3].includes(nowAnnotationData.type)">
+          <div class="annotationContent">
+            <a-input v-model:value="nowAnnotationData.properties.centerPoint[1]">
               <template #addonAfter> <span style="color: white">°</span> </template>
             </a-input>
           </div>
         </a-col>
         <!-- 水平半径：圈 -->
-        <a-col :span="6" v-if="[3].includes(nowMarkData.resource.type)">
-          <div class="markTitle">水平半径</div>
+        <a-col :span="6" v-if="[3].includes(nowAnnotationData.type)">
+          <div class="annotationTitle">水平半径</div>
         </a-col>
-        <a-col :span="18" v-if="[3].includes(nowMarkData.resource.type)">
-          <div class="markContent">
-            <a-input v-model:value="nowMarkData.resource.content.geometry.radius">
+        <a-col :span="18" v-if="[3].includes(nowAnnotationData.type)">
+          <div class="annotationContent">
+            <a-input v-model:value="nowAnnotationData.properties.radius">
               <template #addonAfter> <span style="color: white">m</span> </template>
             </a-input>
           </div>
         </a-col>
         <!-- 水平面积：形状、圈 -->
-        <a-col :span="6" v-if="[2, 3].includes(nowMarkData.resource.type)">
-          <div class="markTitle">水平面积</div>
+        <a-col :span="6" v-if="[2, 3].includes(nowAnnotationData.type)">
+          <div class="annotationTitle">水平面积</div>
         </a-col>
-        <a-col :span="18" v-if="[2, 3].includes(nowMarkData.resource.type)">
-          <div class="markContent">
-            <span style="color: white; gap: 10px" v-if="[2].includes(nowMarkData.resource.type)">
-              ㎡
+        <a-col :span="18" v-if="[2, 3].includes(nowAnnotationData.type)">
+          <div class="annotationContent">
+            <span style="color: white; gap: 10px" v-if="[2].includes(nowAnnotationData.type)">
+              {{ horizontalArea }}㎡
             </span>
-            <span style="color: white; gap: 10px" v-if="[3].includes(nowMarkData.resource.type)">
+            <span style="color: white; gap: 10px" v-if="[3].includes(nowAnnotationData.type)">
               {{
                 (
                   Math.PI *
-                  nowMarkData.resource.content.geometry.radius *
-                  nowMarkData.resource.content.geometry.radius
+                  nowAnnotationData.properties.radius *
+                  nowAnnotationData.properties.radius
                 ).toFixed(2)
               }}㎡
             </span>
           </div>
         </a-col>
         <!-- 水平周长：形状、圈 -->
-        <a-col :span="6" v-if="[2, 3].includes(nowMarkData.resource.type)">
-          <div class="markTitle">水平周长</div>
+        <a-col :span="6" v-if="[2, 3].includes(nowAnnotationData.type)">
+          <div class="annotationTitle">水平周长</div>
         </a-col>
-        <a-col :span="18" v-if="[2, 3].includes(nowMarkData.resource.type)">
-          <div class="markContent">
-            <span style="color: white; gap: 10px" v-if="[2].includes(nowMarkData.resource.type)">
-              m
+        <a-col :span="18" v-if="[2, 3].includes(nowAnnotationData.type)">
+          <div class="annotationContent">
+            <span style="color: white; gap: 10px" v-if="[2].includes(nowAnnotationData.type)">
+              {{ horizontalPerimeter }}m
             </span>
-            <span style="color: white; gap: 10px" v-if="[3].includes(nowMarkData.resource.type)">
-              {{ (2 * Math.PI * nowMarkData.resource.content.geometry.radius).toFixed(1) }}
+            <span style="color: white; gap: 10px" v-if="[3].includes(nowAnnotationData.type)">
+              {{ (2 * Math.PI * nowAnnotationData.properties.radius).toFixed(1) }}
               m
             </span>
           </div>
         </a-col>
         <!-- 水平距离：线 -->
-        <a-col :span="6" v-if="[1].includes(nowMarkData.resource.type)">
-          <div class="markTitle">水平距离</div>
+        <a-col :span="6" v-if="[1].includes(nowAnnotationData.type)">
+          <div class="annotationTitle">水平距离</div>
         </a-col>
-        <a-col :span="18" v-if="[1].includes(nowMarkData.resource.type)">
-          <div class="markContent">
-            <span style="color: white; gap: 10px">
-              <!-- {{ getLineStringDistance(nowMarkData.resource)[0] }}m -->
-            </span>
+        <a-col :span="18" v-if="[1].includes(nowAnnotationData.type)">
+          <div class="annotationContent">
+            <span style="color: white; gap: 10px"> {{ horizontalDistance }}m </span>
           </div>
         </a-col>
         <!-- 直线距离：线 -->
-        <a-col :span="6" v-if="[1].includes(nowMarkData.resource.type)">
-          <div class="markTitle">直线距离</div>
+        <a-col :span="6" v-if="[1].includes(nowAnnotationData.type)">
+          <div class="annotationTitle">直线距离</div>
         </a-col>
-        <a-col :span="18" v-if="[1].includes(nowMarkData.resource.type)">
-          <div class="markContent">
-            <span style="color: white; gap: 10px"> m </span>
+        <a-col :span="18" v-if="[1].includes(nowAnnotationData.type)">
+          <div class="annotationContent">
+            <span style="color: white; gap: 10px"> {{ linearDistance }}m </span>
           </div>
         </a-col>
         <!-- 高度差：线、形 -->
-        <a-col :span="6" v-if="[1, 2].includes(nowMarkData.resource.type)">
-          <div class="markTitle">高度差</div>
+        <a-col :span="6" v-if="[1, 2].includes(nowAnnotationData.type)">
+          <div class="annotationTitle">高度差</div>
         </a-col>
-        <a-col :span="18" v-if="[1, 2].includes(nowMarkData.resource.type)">
-          <div class="markContent">
-            <span style="color: white; gap: 10px" v-if="[1].includes(nowMarkData.resource.type)">
-              m
-            </span>
-            <span style="color: white; gap: 10px" v-if="[2].includes(nowMarkData.resource.type)">
-              m
+        <a-col :span="18" v-if="[1, 2].includes(nowAnnotationData.type)">
+          <div class="annotationContent">
+            <span style="color: white; gap: 10px" v-if="[1, 2].includes(nowAnnotationData.type)">
+              {{ heightDiff }}m
             </span>
           </div>
         </a-col>
         <!-- 简介：点、线、形、圈 -->
         <a-col :span="6">
-          <div class="markTitle">简介</div>
+          <div class="annotationTitle">简介</div>
         </a-col>
         <a-col :span="18">
-          <div class="markContent">
+          <div class="annotationContent">
             <a-textarea
-              v-model:value="nowMarkData.resource.remark"
+              v-model:value="nowAnnotationData.remark"
               :rows="4"
               :maxlength="10"
               placeholder="请输入"
@@ -401,11 +399,11 @@
         </a-col>
         <!-- 绘制者：点、线、形、圈 -->
         <a-col :span="6">
-          <div class="markTitle">绘制者</div>
+          <div class="annotationTitle">绘制者</div>
         </a-col>
         <a-col :span="18">
-          <div class="markContent">
-            <span style="color: white">{{ nowMarkData.resource.user_name }}</span>
+          <div class="annotationContent">
+            <span style="color: white">{{ nowAnnotationData.createUserName }}</span>
           </div>
         </a-col>
       </a-row>
@@ -413,7 +411,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, watch, watchEffect, computed, onMounted } from 'vue';
+  import { ref, watch, computed, onMounted } from 'vue';
   import * as mars3d from 'mars3d';
   import * as Cesium from 'mars3d-cesium';
   import {
@@ -441,14 +439,14 @@
   import { cloneDeep } from 'lodash-es';
 
   let map: mars3d.Map;
-  const props = defineProps(['allMarkDataList', 'nowShowMarkData']);
+  const props = defineProps(['allAnnotationDataList', 'nowShowAnnotationData']);
   const emits = defineEmits([
-    'setNowShowMarkData',
-    'closePathMarkInfo',
+    'setNowShowAnnotationData',
+    'closePathAnnotationInfo',
     'handlerLocation',
-    'deleteMark',
+    'deleteAnnotation',
   ]);
-  const nowMarkData: any = ref(props.nowShowMarkData);
+  const nowAnnotationData: any = ref(props.nowShowAnnotationData);
   // 经纬模式
   const modalType = ref<number>(0);
   // 度分秒-经度
@@ -470,17 +468,17 @@
         // 度分秒-经度 → 十进制-经度
         let { degrees, minutes, seconds } = decimalToDMS_0.value;
         let decimal = Math.abs(degrees) + minutes / 60 + seconds / 3600;
-        nowMarkData.value.resource.content.geometry.coordinates[0] = decimal;
+        nowAnnotationData.value.coordinates[0] = decimal;
         // 度分秒-纬度 → 十进制-纬度
         degrees = decimalToDMS_1.value.degrees;
         minutes = decimalToDMS_1.value.minutes;
         seconds = decimalToDMS_1.value.seconds;
         decimal = Math.abs(degrees) + minutes / 60 + seconds / 3600;
-        nowMarkData.value.resource.content.geometry.coordinates[1] = decimal;
+        nowAnnotationData.value.coordinates[1] = decimal;
       }
       if (newValue == 1) {
         // 十进制-经度 → 度分秒-经度
-        const decimal1 = nowMarkData.value.resource.content.geometry.coordinates[0];
+        const decimal1 = nowAnnotationData.value.coordinates[0];
         const degrees1 = Math.floor(decimal1);
         const minutesFull1 = (decimal1 - degrees1) * 60;
         const minutes1 = Math.floor(minutesFull1);
@@ -491,7 +489,7 @@
           seconds: seconds1,
         };
         // 十进制-纬度 → 度分秒-纬度
-        const decimal2 = nowMarkData.value.resource.content.geometry.coordinates[1];
+        const decimal2 = nowAnnotationData.value.coordinates[1];
         const degrees2 = Math.floor(decimal2);
         const minutesFull2 = (decimal2 - degrees2) * 60;
         const minutes2 = Math.floor(minutesFull2);
@@ -506,48 +504,78 @@
   );
 
   // 关闭
-  function closePathMarkInfo() {
-    emits('closePathMarkInfo');
+  function closePathAnnotationInfo() {
+    emits('closePathAnnotationInfo');
   }
   // 移动到中心位置
   function handlerLocation() {
-    let coordinates = props.nowShowMarkData.resource.content.geometry.coordinates;
-    switch (props.nowShowMarkData.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;
-    }
+    emits('handlerLocation', {
+      lng: props.nowShowAnnotationData.properties.centerPoint[0],
+      lat: props.nowShowAnnotationData.properties.centerPoint[1],
+    });
   }
   // 删除此标注
-  function deleteMark() {
-    emits('deleteMark', props.nowShowMarkData);
+  function deleteAnnotation() {
+    emits('deleteAnnotation', props.nowShowAnnotationData);
   }
+  // 线-直线距离
+  const linearDistance: any = ref();
+  // 线-水平距离
+  const horizontalDistance: any = ref();
+  // 圆-水平面积
+  const horizontalArea: any = ref();
+  // 圆-水平周长
+  const horizontalPerimeter: any = ref();
+  // 高度差
+  const heightDiff: any = ref();
 
   watch(
-    () => props.nowShowMarkData,
+    () => nowAnnotationData.value,
     () => {
-      nowMarkData.value = props.nowShowMarkData;
+      emits('setNowShowAnnotationData', nowAnnotationData.value, false);
+    },
+    {
+      deep: true,
+    },
+  );
+  watch(
+    () => props.nowShowAnnotationData,
+    () => {
+      nowAnnotationData.value = props.nowShowAnnotationData;
+      // 线
+      if (nowAnnotationData.value.type == 1) {
+        // 直线距离
+        linearDistance.value = mars3d.MeasureUtil.getDistance(
+          nowAnnotationData.value.coordinates,
+        ).toFixed(2);
+        // 水平距离
+        horizontalDistance.value = mars3d.MeasureUtil.getSurfaceDistance(
+          nowAnnotationData.value.coordinates,
+        ).toFixed(2);
+        // 高度差
+        let heightlist: any = [];
+        nowAnnotationData.value.coordinates.forEach((item) => {
+          heightlist.push(item[2]);
+        });
+        heightDiff.value = (Math.max(...heightlist) - Math.min(...heightlist)).toFixed(2);
+      }
+      // 多边形
+      if (nowAnnotationData.value.type == 2) {
+        // 水平面积
+        horizontalArea.value = mars3d.MeasureUtil.getSurfaceArea(
+          nowAnnotationData.value.coordinates[0],
+        ).toFixed(2);
+        // 水平周长
+        horizontalPerimeter.value = mars3d.MeasureUtil.getSurfaceDistance(
+          nowAnnotationData.value.coordinates[0],
+        ).toFixed(2);
+        // 高度差
+        let heightlist: any = [];
+        nowAnnotationData.value.coordinates[0].forEach((item) => {
+          heightlist.push(item[2]);
+        });
+        heightDiff.value = (Math.max(...heightlist) - Math.min(...heightlist)).toFixed(2);
+      }
     },
     {
       deep: true,
@@ -557,7 +585,7 @@
   onMounted(() => {});
 </script>
 <style lang="less" scoped>
-  .markInfo {
+  .annotationInfo {
     // 页面不能被选中
     -webkit-user-select: none; /* Safari */
     -moz-user-select: none; /* Firefox */
@@ -569,10 +597,10 @@
     height: 100%;
     background: #232323;
 
-    .markInfo_biaozhu_1 {
+    .annotationInfo_biaozhu_1 {
       padding: 15px;
     }
-    .markInfo_biaozhu_2 {
+    .annotationInfo_biaozhu_2 {
       padding: 15px;
       overflow-y: auto;
       height: 650px;
@@ -587,7 +615,7 @@
     z-index: 200;
   }
 
-  .markTitle {
+  .annotationTitle {
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -598,7 +626,7 @@
     width: 100%;
     flex-wrap: wrap;
 
-    .markTitleButton_right {
+    .annotationTitleButton_right {
       height: 20px;
       width: 20px;
       display: flex;
@@ -607,7 +635,7 @@
       margin-right: 12px;
       font-size: 18px;
     }
-    .markTitleButton {
+    .annotationTitleButton {
       height: 20px;
       width: 20px;
       display: flex;
@@ -617,7 +645,7 @@
       font-size: 18px;
     }
   }
-  .markContent {
+  .annotationContent {
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -640,11 +668,11 @@
   .svg-container {
     display: block;
   }
-  ::v-deep .markContent .ant-input {
+  ::v-deep .annotationContent .ant-input {
     padding: 0px !important;
   }
 
-  ::v-deep .markContent .ant-select-selection-item {
+  ::v-deep .annotationContent .ant-select-selection-item {
     height: 20px !important;
   }
 </style>
diff --git a/src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue b/src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue
index 641e390..2165b03 100644
--- a/src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue
@@ -2,17 +2,17 @@
   <div class="areaInfo">
     <a-row>
       <a-col :span="24">
-        <div class="markTitle"> 自定义飞行区 </div>
+        <div class="annotationTitle"> 自定义飞行区 </div>
       </a-col>
       <a-col :span="24">
-        <div class="markTitle">
+        <div class="annotationTitle">
           <!-- 自定义禁降区 -->
           <div
             v-if="props.nowShowAreaData.type == 'noland'"
             :style="{
               width: '15px',
               height: '15px',
-              background: `linear-gradient(to bottom right, transparent 45%, #FF9900 45%, #FF9900 60%, transparent 60%), #ffffff00`,
+              outline: `2px solid #FF9900`,
               'margin-left': '2px',
               'margin-right': '12px',
             }"
@@ -43,111 +43,68 @@
             }"
           />
           <a-input v-model:value="nowAreaData.name" style="width: 65%" size="small"></a-input>
-          <div class="markTitleButton" @click="handlerLocation">
+          <div class="annotationTitleButton" @click="handlerLocation">
             <AimOutlined />
           </div>
-          <div class="markTitleButton" @click="deleteArea">
+          <div class="annotationTitleButton" @click="deleteArea">
             <DeleteOutlined />
           </div>
         </div>
       </a-col>
       <a-col :span="24">
-        <div class="markPrompt" v-if="props.nowShowAreaData.type == 'noland'">
+        <div class="annotationPrompt" v-if="props.nowShowAreaData.type == 'noland'">
           自定义作业区绘制后，飞行器只能在该区域内飞行
         </div>
-        <div class="markPrompt" v-if="props.nowShowAreaData.type == 'dfence'">
+        <div class="annotationPrompt" v-if="props.nowShowAreaData.type == 'dfence'">
           自定义禁降区绘制后，飞行器不能在绘制区域内自动降落
         </div>
-        <div class="markPrompt" v-if="props.nowShowAreaData.type == 'nfz'">
+        <div class="annotationPrompt" v-if="props.nowShowAreaData.type == 'nfz'">
           自定义作业区绘制后，飞行器只能在该区域内飞行
         </div>
       </a-col>
       <a-col :span="24">
-        <div class="markTitle"> 更多信息 </div>
+        <div class="annotationTitle"> 更多信息 </div>
       </a-col>
       <!-- 启用状态 -->
       <a-col :span="6">
-        <div class="markTitle">启用状态</div>
+        <div class="annotationTitle">启用状态</div>
       </a-col>
       <a-col :span="18">
-        <div class="markContent">
+        <div class="annotationContent">
           {{ props.nowShowAreaData.state == 0 ? '已启用' : '已禁用' }}
         </div>
       </a-col>
-      <!-- 水平距离 -->
-      <a-col :span="6" v-if="props.nowShowAreaData.type == 'noland'">
-        <div class="markTitle">水平距离</div>
+      <!-- 水平周长 -->
+      <a-col :span="6">
+        <div class="annotationTitle">水平周长</div>
       </a-col>
-      <a-col :span="18" v-if="props.nowShowAreaData.type == 'noland'">
-        <div class="markContent"> {{ nowAreaData.length.toFixed(1) }}m</div>
+      <a-col :span="18">
+        <div class="annotationContent"> {{ length.toFixed(2) }}m</div>
       </a-col>
       <!-- 水平面积 -->
       <a-col :span="6">
-        <div class="markTitle">水平面积</div>
+        <div class="annotationTitle">水平面积</div>
       </a-col>
       <a-col :span="18">
-        <div class="markContent"> {{ nowAreaData.area.toFixed(2) }}㎡</div>
-      </a-col>
-      <!-- 水平周长 -->
-      <a-col :span="6" v-if="props.nowShowAreaData.geomtype == 'Polygon'">
-        <div class="markTitle">水平周长</div>
-      </a-col>
-      <a-col :span="18" v-if="props.nowShowAreaData.geomtype == 'Polygon'">
-        <div class="markContent"> {{ nowAreaData.length.toFixed(1) }}m</div>
+        <div class="annotationContent"> {{ area.toFixed(2) }}㎡</div>
       </a-col>
       <!-- 半径 -->
       <a-col :span="6" v-if="props.nowShowAreaData.geomtype == 'Circle'">
-        <div class="markTitle">半径</div>
+        <div class="annotationTitle">半径</div>
       </a-col>
       <a-col :span="18" v-if="props.nowShowAreaData.geomtype == 'Circle'">
-        <div class="markContent">
+        <div class="annotationContent">
           <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>
       </a-col>
-      <!-- 宽度 -->
-      <a-col :span="6" v-if="props.nowShowAreaData.type == 'noland'">
-        <div class="markTitle">宽度</div>
-      </a-col>
-      <a-col :span="18" v-if="props.nowShowAreaData.type == 'noland'">
-        <div class="markContent">
-          <div
-            class="button"
-            :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.properties.width }}
-            </span>
-            <a-input
-              v-if="numInputFlag"
-              ref="focusInputRef"
-              v-model:value="nowAreaData.properties.width"
-              style="width: 50%"
-              @blur="blurInput"
-              @keypress.enter="blurInput"
-            />
-            <span style="margin-left: 10px; font-size: 18px; color: #ffffff">m</span>
-          </div>
-          <div
-            class="button"
-            :class="{ disabled: nowAreaData.properties.width == 100 }"
-            @click="addRecordNum"
-          >
-            <PlusOutlined style="font-size: 20px; color: #ffffff" />
-          </div>
-        </div>
-      </a-col>
       <!-- 绘制者 -->
       <a-col :span="6">
-        <div class="markTitle">绘制者</div>
+        <div class="annotationTitle">绘制者</div>
       </a-col>
       <a-col :span="18">
-        <div class="markContent"> {{ props.nowShowAreaData.createdUser }}</div>
+        <div class="annotationContent"> {{ props.nowShowAreaData.createdUser }}</div>
       </a-col>
       <a-col :span="24">
         <div class="area_buttons">
@@ -195,85 +152,16 @@
   ]);
   const nowAreaData: any = ref(props.nowShowAreaData);
 
-  watch(
-    () => nowAreaData.value,
-    () => {
-      emits('setNowShowAreaData', nowAreaData.value, false);
-    },
-    {
-      deep: true,
-    },
-  );
-
-  // 宽度----------------------------------------------------------------------
-  const numInputFlag = ref(false);
-  const focusInputRef = ref();
-  // input鼠标聚焦
-  function focusInput() {
-    numInputFlag.value = true;
-    nextTick(() => {
-      if (focusInputRef.value && focusInputRef.value.focus) {
-        focusInputRef.value.focus();
-      }
-    });
-  }
-  // input鼠标聚焦后离开or点击Enter
-  function blurInput() {
-    numInputFlag.value = false;
-    // 检测是否是数字
-    if (/^-?\d+(\.\d+)?$/.test(nowAreaData.value.properties.width.toString())) {
-      if (nowAreaData.value.properties.width > 100) {
-        // 不能大于100
-        nowAreaData.value.properties.width = 100;
-      } else if (nowAreaData.value.properties.width < 10) {
-        // 不能小于10
-        nowAreaData.value.properties.width = 10;
-      } else {
-        // 保存小数点后两位
-        let newnum = cloneDeep(nowAreaData.value.properties.width);
-        nowAreaData.value.properties.width = parseFloat(parseFloat(newnum).toFixed(2));
-      }
-    } else {
-      // 不是数字
-      nowAreaData.value.properties.width = 10;
-    }
-  }
-  // 宽度-减少
-  function removeRecordNum() {
-    let newnum = cloneDeep(nowAreaData.value.properties.width);
-    if (newnum == 10) {
-      return;
-    }
-    newnum -= 5;
-    nowAreaData.value.properties.width = parseFloat(newnum.toFixed(2));
-  }
-  // 宽度-增加
-  function addRecordNum() {
-    let newnum = cloneDeep(nowAreaData.value.properties.width);
-    if (newnum == 100) {
-      return;
-    }
-    newnum += 5;
-    nowAreaData.value.properties.width = parseFloat(newnum.toFixed(2));
-  }
-
   // 关闭
   function closePathAreaInfo() {
     emits('closePathAreaInfo');
   }
   // 移动到中心位置
   function handlerLocation() {
-    if (props.nowShowAreaData.geomtype == 'Circle') {
-      emits('handlerLocation', {
-        lng: props.nowShowAreaData.properties.centerPoint[0],
-        lat: props.nowShowAreaData.properties.centerPoint[1],
-      });
-    } else {
-      emits('handlerLocation', {
-        lng: props.nowShowAreaData.properties.centerPoint[0],
-        lat: props.nowShowAreaData.properties.centerPoint[1],
-      });
-    }
+    emits('handlerLocation', {
+      lng: props.nowShowAreaData.properties.centerPoint[0],
+      lat: props.nowShowAreaData.properties.centerPoint[1],
+    });
   }
   // 删除此区域
   function deleteArea() {
@@ -287,19 +175,37 @@
     });
   }
 
+  // 水平周长和水平面积
+  const length: any = ref();
+  const area: any = ref();
+
+  watch(
+    () => nowAreaData.value,
+    () => {
+      emits('setNowShowAreaData', nowAreaData.value, false);
+    },
+    {
+      deep: true,
+    },
+  );
   watch(
     () => props.nowShowAreaData,
     () => {
       nowAreaData.value = props.nowShowAreaData;
-      // 水平面积
-      // getArea();
-      if (props.nowShowAreaData.type == 'noland') {
-        // 水平距离
-        // getDistance();
-      }
       if (props.nowShowAreaData.geomtype == 'Polygon') {
         // 水平距离
-        // getDistance();
+        length.value = mars3d.MeasureUtil.getDistance(nowAreaData.value.coordinates[0]);
+        // 水平面积
+        area.value = mars3d.MeasureUtil.getArea(nowAreaData.value.coordinates[0]);
+      }
+      if (props.nowShowAreaData.geomtype == 'Circle') {
+        // 水平距离
+        length.value = 2 * Math.PI * parseFloat(nowAreaData.value.properties.radius);
+        // 水平面积
+        area.value =
+          Math.PI *
+          parseFloat(nowAreaData.value.properties.radius) *
+          parseFloat(nowAreaData.value.properties.radius);
       }
     },
     {
@@ -323,7 +229,7 @@
     padding: 15px;
   }
 
-  .markTitle {
+  .annotationTitle {
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -334,7 +240,7 @@
     width: 100%;
     flex-wrap: wrap;
 
-    .markTitleButton_right {
+    .annotationTitleButton_right {
       height: 20px;
       width: 20px;
       display: flex;
@@ -343,7 +249,7 @@
       margin-right: 12px;
       font-size: 18px;
     }
-    .markTitleButton {
+    .annotationTitleButton {
       height: 20px;
       width: 20px;
       display: flex;
@@ -354,7 +260,7 @@
     }
   }
 
-  .markContent {
+  .annotationContent {
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -365,7 +271,7 @@
     color: #ffffff;
   }
 
-  .markButton {
+  .annotationButton {
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -375,7 +281,7 @@
     flex-wrap: wrap;
   }
 
-  .markPrompt {
+  .annotationPrompt {
     display: flex;
     align-items: center;
     justify-content: flex-start;
diff --git a/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue b/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
index df01a12..59ebc33 100644
--- a/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
@@ -24,13 +24,14 @@
         </div>
         <div class="leftMenu_buttonList">
           <div
-            class="leftMenu_buttonList_mark"
+            class="leftMenu_buttonList_annotation"
             :style="{
               background: showMenuInfoName == '地图标注' ? '#2D8CF0' : '#1a375a',
             }"
             @click="
               showMenuInfoName = '地图标注';
               updateShowMenuInfoList(showMenuInfoName);
+              showMenuInfoList = filterAfterAnnotationDataList;
             "
           >
             <a-tooltip placement="right">
@@ -103,10 +104,10 @@
             <!-- 地图标注 -->
             <div
               v-if="showMenuInfoName == '地图标注'"
-              class="showMenuInfo_mark"
+              class="showMenuInfo_annotation"
               :style="{
                 background:
-                  props.nowShowMarkData && props.nowShowMarkData.id == show.id
+                  props.nowShowAnnotationData && props.nowShowAnnotationData.id == show.id
                     ? '#274D75'
                     : show.mouse
                       ? '#393939'
@@ -121,24 +122,24 @@
                 show.deleteClickNum = 0;
               "
             >
-              <div @click="setNowShowMarkData(show)">
-                <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 @click="setNowShowAnnotationData(show)">
+                <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 == 0 ? (show.status = 1) : (show.status = 0)"
-                :style="{ background: show.status == 1 ? '#2d8cf0' : '#000000' }"
+                @click="show.state == 0 ? hideThisAnnotation(show) : showThisAnnotation(show)"
+                :style="{ background: show.state == 0 ? '#2d8cf0' : '#000000' }"
               >
-                <EyeOutlined v-if="show.status == 1" style="color: #ffffff; font-size: 16px" />
+                <EyeOutlined v-if="show.state == 0" style="color: #ffffff; font-size: 16px" />
                 <EyeInvisibleOutlined
-                  v-if="show.status == 0"
+                  v-if="show.state == 1"
                   style="color: #ffffff; font-size: 16px"
                 />
               </div>
-              <div @click="setNowShowMarkData(show)">{{ show.name }}</div>
+              <div @click="setNowShowAnnotationData(show)">{{ show.name }}</div>
               <div class="buttonRight2" v-if="show.mouse">
                 <a-tooltip placement="top">
                   <template #title>
@@ -157,7 +158,9 @@
                     <span>删除</span>
                   </template>
                   <DeleteOutlined
-                    @click="show.deleteClickNum == 1 ? deleteMark(show) : show.deleteClickNum++"
+                    @click="
+                      show.deleteClickNum == 1 ? deleteAnnotation(show) : show.deleteClickNum++
+                    "
                   />
                 </a-tooltip>
               </div>
@@ -286,9 +289,9 @@
                 <div
                   v-if="show.type == 'noland'"
                   :style="{
-                    width: '15px',
-                    height: '15px',
-                    background: `linear-gradient(to bottom right, transparent 45%, #FF9900 45%, #FF9900 60%, transparent 60%), #ffffff00`,
+                    width: '13px',
+                    height: '13px',
+                    outline: `2px solid #FF9900`,
                     'margin-right': '6px',
                   }"
                 />
@@ -407,12 +410,7 @@
     CheckCircleOutlined,
     StopOutlined,
   } from '@ant-design/icons-vue';
-  import {
-    GetWorkAreaList,
-    AddWorkArea,
-    UpdateWorkArea,
-    DeleteWorkArea,
-  } from '@/api/demo/mediaLibrary';
+  import { UpdateWorkArea, UpdateAnnotation } from '@/api/demo/mediaLibrary';
   import { cloneDeep } from 'lodash-es';
   import { useMessage } from '@/hooks/web/useMessage';
   const { createMessage, createConfirm } = useMessage();
@@ -420,8 +418,8 @@
   const props = defineProps([
     'pathRecord',
     'leftMenuShow',
-    'allMarkDataList',
-    'nowShowMarkData',
+    'allAnnotationDataList',
+    'nowShowAnnotationData',
     'allImageDataList',
     'nowShowImageData',
     'allAreaDataList',
@@ -431,19 +429,20 @@
     'changeLeftMenuShow',
     'handlerLocation',
     'closePathModal',
-    'changeMarkInfoShow',
-    'setNowShowMarkData',
+    'changeAnnotationInfoShow',
+    'setNowShowAnnotationData',
     'setNowShowImageData',
     'setNowShowAreaData',
     'setAllAreaData',
-    'deleteMark',
+    'setAllAnnotationData',
+    'deleteAnnotation',
     'deleteArea',
   ]);
-  const showMenuInfoList = ref(props.allMarkDataList);
+  const showMenuInfoList = ref(props.allAnnotationDataList);
   const showMenuInfoName = ref('地图标注');
   function updateShowMenuInfoList(type) {
     if (type == '地图标注') {
-      showMenuInfoList.value = props.allMarkDataList;
+      handleChangeAnnotationSearch();
     }
     if (type == '地图照片') {
       showMenuInfoList.value = props.allImageDataList;
@@ -461,7 +460,6 @@
   function closePathModal() {
     emits('closePathModal');
   }
-
   // 地图图片-加载到地图上
   function funAddOrRemoveToMap(show) {
     show.show_on_map = !show.show_on_map;
@@ -472,9 +470,51 @@
     }
   }
 
+  // 地图标注-搜索
+  const filterAfterAnnotationDataList = ref(props.allAnnotationDataList);
+  function handleChangeAnnotationSearch() {
+    let filterAnnotationData = props.allAnnotationDataList;
+    // if (areatype.value !== 'all') {
+    //   filterAnnotationData = filterAnnotationData.filter((item) => item.type == areatype.value);
+    // }
+    // if (areastate.value !== 'all') {
+    //   filterAnnotationData = filterAnnotationData.filter((item) => item.state == areastate.value);
+    // }
+    filterAfterAnnotationDataList.value = filterAnnotationData;
+    showMenuInfoList.value = filterAfterAnnotationDataList.value;
+  }
   // 地图标注-删除标注
-  function deleteMark(show) {
-    emits('deleteMark', show);
+  function deleteAnnotation(show) {
+    show.deleteClickNum = 0;
+    emits('deleteAnnotation', show);
+  }
+  // 地图标注-显示该标注
+  function showThisAnnotation(value) {
+    setNowShowAnnotationData({
+      ...value,
+      state: 0,
+    });
+    UpdateAnnotation({
+      ...value,
+      properties: JSON.stringify(value.properties),
+      state: 0,
+    }).then((res) => {
+      emits('setAllAnnotationData');
+    });
+  }
+  // 地图标注-隐藏该标注
+  function hideThisAnnotation(value) {
+    setNowShowAnnotationData({
+      ...value,
+      state: 1,
+    });
+    UpdateAnnotation({
+      ...value,
+      properties: JSON.stringify(value.properties),
+      state: 1,
+    }).then((res) => {
+      emits('setAllAnnotationData');
+    });
   }
 
   // 地图作业区域-------------------------------------------------
@@ -519,12 +559,7 @@
     });
     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');
@@ -537,13 +572,8 @@
       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');
@@ -555,8 +585,8 @@
   }
 
   // 设定当前标记
-  function setNowShowMarkData(value) {
-    emits('setNowShowMarkData', value);
+  function setNowShowAnnotationData(value) {
+    emits('setNowShowAnnotationData', value);
   }
   // 设定当前图片
   function setNowShowImageData(value) {
@@ -689,7 +719,7 @@
           padding-bottom: 5px;
           gap: 10px;
 
-          .leftMenu_buttonList_mark {
+          .leftMenu_buttonList_annotation {
             position: relative;
             border-radius: 5px;
             height: 40px;
@@ -739,7 +769,7 @@
           max-height: 800px;
 
           // 地图标注
-          .showMenuInfo_mark {
+          .showMenuInfo_annotation {
             position: relative;
             display: flex;
             align-items: center;
diff --git a/src/views/demo/system/mediaLibrary/path/pathMap.vue b/src/views/demo/system/mediaLibrary/path/pathMap.vue
index 9932398..4161975 100644
--- a/src/views/demo/system/mediaLibrary/path/pathMap.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathMap.vue
@@ -1,6 +1,6 @@
 <template>
   <div ref="vChartRef" id="mars3d-container" class="mars3d-container">
-    <div class="markButtons">
+    <div class="annotationButtons">
       <div
         :class="mapDrawType == 'drawPoint' ? 'button_choose' : 'button_nochoose'"
         @click="drawPoint"
@@ -9,7 +9,7 @@
           <template #content>
             <div style="display: flex; gap: 5px">
               <div
-                class="popoverMark"
+                class="popoverAnnotation"
                 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="popoverMark"
+                class="popoverAnnotation"
                 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="popoverMark"
+                class="popoverAnnotation"
                 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="popoverMark"
+                class="popoverAnnotation"
                 v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
                 :key="color"
                 :style="{ background: color }"
@@ -122,7 +122,7 @@
                   'nfz_Circle',
                   'dfence_Polygon',
                   'dfence_Circle',
-                  'noland_Polyline',
+                  'noland_Polygon',
                 ]"
                 :key="type"
                 :style="{ background: '#ffffff' }"
@@ -134,7 +134,7 @@
                   :style="{
                     width: '15px',
                     height: '15px',
-                    background: `linear-gradient(to bottom right, transparent 45%, #FF9900 45%, #FF9900 60%, transparent 60%), #ffffff00`,
+                    outline: `2px solid #FF9900`,
                     'margin-right': '6px',
                   }"
                 />
@@ -165,7 +165,7 @@
                 <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>
+                <div style="width: 130px" v-if="type == 'noland_Polygon'">自定义禁降区</div>
                 <CheckOutlined v-if="areaDrawType == type" style="color: blue; margin-left: 10px" />
               </div>
             </div>
@@ -174,9 +174,9 @@
           <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`,
+              width: '16px',
+              height: '16px',
+              outline: `2px solid #FF9900`,
             }"
           />
           <!-- 自定义作业区 -->
@@ -219,29 +219,29 @@
     LogoutOutlined,
   } from '@ant-design/icons-vue';
   import {
-    GetWorkAreaList,
+    AddAnnotation,
+    UpdateAnnotation,
     AddWorkArea,
     UpdateWorkArea,
-    DeleteWorkArea,
   } from '@/api/demo/mediaLibrary';
   import * as turf from '@turf/turf';
   import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
   import dayjs from 'dayjs';
 
   const props = defineProps([
-    'allMarkDataList',
-    'nowShowMarkData',
+    'allAnnotationDataList',
+    'nowShowAnnotationData',
     'allImageDataList',
     'nowShowImageData',
     'allAreaDataList',
     'nowShowAreaData',
   ]);
   const emits = defineEmits([
-    'setNowShowMarkData',
+    'setNowShowAnnotationData',
     'setNowShowImageData',
     'setNowShowAreaData',
     'closePathImageInfo',
-    'setAllMarkData',
+    'setAllAnnotationData',
     'setAllImageData',
     'setAllAreaData',
   ]);
@@ -253,13 +253,13 @@
   });
   // 地图标注
   // 地图标注-点
-  let mark_PointGraphicData: any = [];
+  let annotation_PointGraphicData: any = [];
   // 地图标注-线
-  let mark_LineStringGraphicData: any = [];
+  let annotation_LineStringGraphicData: any = [];
   // 地图标注-多边形
-  let mark_PolygonGraphicData: any = [];
+  let annotation_PolygonGraphicData: any = [];
   // 地图标注-圈
-  let mark_CircleGraphicData: any = [];
+  let annotation_CircleGraphicData: any = [];
 
   // 地图照片
   // 地图照片-地面点
@@ -272,8 +272,8 @@
   let image_imageGraphicData: any = [];
 
   // 地图作业区域
-  // 地图作业区域-禁降区-线
-  let area_noland_LineStringGraphicData: any = [];
+  // 地图作业区域-禁降区-多边形
+  let area_noland_PolygonGraphicData: any = [];
   // 地图作业区域-作业区-多边形
   let area_dfence_PolygonGraphicData: any = [];
   // 地图作业区域-作业区-圈
@@ -513,19 +513,19 @@
       layers: [],
     });
     if (map) {
-      // 图层
       map.addLayer(graphicLayers);
-      showAllMarkDataList();
+      // 图层
+      showAllAnnotationDataList();
       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.nowShowAnnotationData && props.nowShowAnnotationData.id) {
+            annotationRestoreDefault();
+            emits('setNowShowAnnotationData', {});
           }
           // // 地图作业区域-恢复默认
           // if (props.nowShowAreaData.id) {
@@ -538,41 +538,139 @@
   };
 
   // 地图标注--------------------------------------------------------------------
+  watch(
+    () => props.allAnnotationDataList,
+    () => {
+      showAllAnnotationDataList();
+    },
+  );
+  watch(
+    () => props.nowShowAnnotationData,
+    (newVal, oldVal) => {
+      let time = dayjs().format('YYYY-MM-DD HH:mm:ss');
+      if (newVal) {
+        // 点
+        annotation_PointGraphicData?.forEach((graphicLayer) => {
+          if (graphicLayer.options.id == props.nowShowAnnotationData.id) {
+            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 showAllMarkDataList = async () => {
+  const showAllAnnotationDataList = async () => {
     // 删除旧数据
-    mark_PointGraphicData?.forEach((graphicLayer) => {
+    annotation_PointGraphicData?.forEach((graphicLayer) => {
       graphicLayers.removeGraphic(graphicLayer);
     });
-    mark_LineStringGraphicData?.forEach((graphicLayer) => {
+    annotation_LineStringGraphicData?.forEach((graphicLayer) => {
       graphicLayers.removeGraphic(graphicLayer);
     });
-    mark_PolygonGraphicData?.forEach((graphicLayer) => {
+    annotation_PolygonGraphicData?.forEach((graphicLayer) => {
       graphicLayers.removeGraphic(graphicLayer);
     });
-    mark_CircleGraphicData?.forEach((graphicLayer) => {
+    annotation_CircleGraphicData?.forEach((graphicLayer) => {
       graphicLayers.removeGraphic(graphicLayer);
     });
     // 图层数据
-    mark_PointGraphicData = [];
-    mark_LineStringGraphicData = [];
-    mark_PolygonGraphicData = [];
-    mark_CircleGraphicData = [];
+    annotation_PointGraphicData = [];
+    annotation_LineStringGraphicData = [];
+    annotation_PolygonGraphicData = [];
+    annotation_CircleGraphicData = [];
+    if (!props.allAnnotationDataList || props.allAnnotationDataList.length == 0) {
+      return;
+    }
     // 地图标注-遍历
-    props.allMarkDataList.forEach((item, index) => {
-      let content = item.resource.content;
+    props.allAnnotationDataList.forEach((item, index) => {
+      // console.log(item);
       // 地图标注-点
-      if (content.geometry.type == 'Point') {
+      if (item.type == 0) {
         let pointGraphic = new mars3d.graphic.BillboardEntity({
           id: item.id,
-          position: content.geometry.coordinates,
+          position: item.coordinates,
           style: {
             image: 'https://data.mars3d.cn/img/marker/mark-red.png',
-            clampToGround: false,
+            clampToGround: item.properties.clampToGround,
             scale: 1,
             label: {
               text: `${item.name}`,
-              font_size: content.properties.font_size,
+              font_size: item.properties.font_size,
               color: '#000000',
               outline: true,
               outlineColor: '#ffffff',
@@ -582,20 +680,22 @@
               pixelOffset: [25, 0],
             },
           },
+          show: item.state == 0 ? true : false,
+          hasEdit: true,
         });
         // 监听mouseover事件
         pointGraphic.on(mars3d.EventType.mouseOver, function () {
-          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
+          if (!props.nowShowAnnotationData || props.nowShowAnnotationData.id !== item.id) {
             pointGraphic.setStyle({
               label: {
-                color: content.properties.color,
+                color: item.properties.color,
               },
             });
           }
         });
         // 监听mouseout事件
         pointGraphic.on(mars3d.EventType.mouseOut, function () {
-          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
+          if (!props.nowShowAnnotationData || props.nowShowAnnotationData.id !== item.id) {
             pointGraphic.setStyle({
               label: {
                 color: '#000000',
@@ -606,30 +706,30 @@
         // 监听点击事件
         pointGraphic.on(mars3d.EventType.click, function () {
           // 全部恢复默认
-          markRestoreDefault();
+          annotationRestoreDefault();
           pointGraphic.setStyle({
             label: {
-              color: content.properties.color,
+              color: item.properties.color,
             },
           });
-          emits('setNowShowMarkData', item);
+          emits('setNowShowAnnotationData', item);
         });
         // 将点对象 添加到图层中
         graphicLayers.addGraphic(pointGraphic);
         // 数据
-        mark_PointGraphicData.push(pointGraphic);
+        annotation_PointGraphicData.push(pointGraphic);
       }
       // 地图标注-线
-      if (content.geometry.type == 'LineString') {
+      if (item.type == 1) {
         let lineGraphic = new mars3d.graphic.PolylineEntity({
           id: item.id,
-          positions: content.geometry.coordinates,
+          positions: item.coordinates,
           style: {
-            color: content.properties.color,
-            width: content.properties.line_width,
+            color: item.properties.color,
+            width: item.properties.line_width,
             label: {
               text: `${item.name}`,
-              font_size: content.properties.font_size,
+              font_size: item.properties.font_size,
               color: '#000000',
               outline: true,
               outlineColor: '#ffffff',
@@ -639,22 +739,23 @@
               pixelOffset: [25, -5],
             },
           },
+          show: item.state == 0 ? true : false,
           hasEdit: true,
           drawShowMeasure: true,
         });
         // 监听mouseover事件
         lineGraphic.on(mars3d.EventType.mouseOver, function () {
-          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
+          if (!props.nowShowAnnotationData || props.nowShowAnnotationData.id !== item.id) {
             lineGraphic.setStyle({
               label: {
-                color: content.properties.color,
+                color: item.properties.color,
               },
             });
           }
         });
         // 监听mouseout事件
         lineGraphic.on(mars3d.EventType.mouseOut, function () {
-          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
+          if (!props.nowShowAnnotationData || props.nowShowAnnotationData.id !== item.id) {
             lineGraphic.setStyle({
               label: {
                 color: '#000000',
@@ -665,35 +766,35 @@
         // 监听点击事件
         lineGraphic.on(mars3d.EventType.click, function () {
           // 全部恢复默认
-          markRestoreDefault();
+          annotationRestoreDefault();
           lineGraphic.setStyle({
             label: {
-              color: content.properties.color,
+              color: item.properties.color,
             },
           });
-          emits('setNowShowMarkData', item);
+          emits('setNowShowAnnotationData', item);
         });
         // 将线对象 添加到图层中
         graphicLayers.addGraphic(lineGraphic);
         // 数据
-        mark_LineStringGraphicData.push(lineGraphic);
+        annotation_LineStringGraphicData.push(lineGraphic);
       }
       // 地图标注-多边形
-      if (content.geometry.type == 'Polygon') {
+      if (item.type == 2) {
         let polygonGraphic = new mars3d.graphic.PolygonEntity({
           id: item.id,
-          positions: content.geometry.coordinates,
+          positions: item.coordinates,
           style: {
-            color: content.properties.color,
+            color: item.properties.color,
             fill: false,
-            width: content.properties.line_width,
-            outlineColor: content.properties.color,
+            width: item.properties.line_width,
+            outlineColor: item.properties.color,
             outlineWidth: 2,
             outline: true,
-            clampToGround: content.properties.clampToGround,
+            clampToGround: item.properties.clampToGround,
             label: {
               text: `${item.name}`,
-              font_size: content.properties.font_size,
+              font_size: item.properties.font_size,
               color: '#000000',
               outline: true,
               outlineColor: '#ffffff',
@@ -702,21 +803,24 @@
               horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
             },
           },
+          show: item.state == 0 ? true : false,
+          hasEdit: true,
+          drawShowMeasure: true,
         });
         // 监听mouseover事件
         polygonGraphic.on(mars3d.EventType.mouseOver, function () {
-          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
+          if (!props.nowShowAnnotationData || props.nowShowAnnotationData.id !== item.id) {
             polygonGraphic.setStyle({
               // color: '#ffffff00',
               label: {
-                color: content.properties.color,
+                color: item.properties.color,
               },
             });
           }
         });
         // 监听mouseout事件
         polygonGraphic.on(mars3d.EventType.mouseOut, function () {
-          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
+          if (!props.nowShowAnnotationData || props.nowShowAnnotationData.id !== item.id) {
             polygonGraphic.setStyle({
               label: {
                 color: '#000000',
@@ -727,34 +831,34 @@
         // 监听点击事件
         polygonGraphic.on(mars3d.EventType.click, function () {
           // 全部恢复默认
-          markRestoreDefault();
+          annotationRestoreDefault();
           polygonGraphic.setStyle({
             label: {
-              color: content.properties.color,
+              color: item.properties.color,
             },
           });
-          emits('setNowShowMarkData', item);
+          emits('setNowShowAnnotationData', item);
         });
         // 将形状对象 添加到图层中
         graphicLayers.addGraphic(polygonGraphic);
         // 数据
-        mark_PolygonGraphicData.push(polygonGraphic);
+        annotation_PolygonGraphicData.push(polygonGraphic);
       }
       // 地图标注-圆
-      if (content.geometry.type == 'Circle') {
+      if (item.type == 3) {
         let circleGraphic = new mars3d.graphic.CircleEntity({
           id: item.id,
-          position: content.geometry.coordinates,
+          position: item.properties.centerPoint,
           style: {
-            radius: content.geometry.radius,
+            radius: item.properties.radius,
             fill: false,
-            outlineColor: content.properties.color,
+            outlineColor: item.properties.color,
             outlineWidth: 4,
             outline: true,
-            clampToGround: content.properties.clampToGround,
+            clampToGround: item.properties.clampToGround,
             label: {
               text: `${item.name}`,
-              font_size: content.properties.font_size,
+              font_size: item.properties.font_size,
               color: '#000000',
               outline: true,
               outlineColor: '#ffffff',
@@ -763,20 +867,23 @@
               horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
             },
           },
+          show: item.state == 0 ? true : false,
+          hasEdit: true,
+          drawShowMeasure: true,
         });
         // 监听mouseover事件
         circleGraphic.on(mars3d.EventType.mouseOver, function () {
-          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
+          if (!props.nowShowAnnotationData || props.nowShowAnnotationData.id !== item.id) {
             circleGraphic.setStyle({
               label: {
-                color: content.properties.color,
+                color: item.properties.color,
               },
             });
           }
         });
         // 监听mouseout事件
         circleGraphic.on(mars3d.EventType.mouseOut, function () {
-          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
+          if (!props.nowShowAnnotationData || props.nowShowAnnotationData.id !== item.id) {
             circleGraphic.setStyle({
               label: {
                 color: '#000000',
@@ -787,26 +894,26 @@
         // 监听点击事件
         circleGraphic.on(mars3d.EventType.click, function () {
           // 全部恢复默认
-          markRestoreDefault();
+          annotationRestoreDefault();
           circleGraphic.setStyle({
             label: {
-              color: content.properties.color,
+              color: item.properties.color,
             },
           });
-          emits('setNowShowMarkData', item);
+          emits('setNowShowAnnotationData', item);
         });
         // 将圆对象 添加到图层中
         graphicLayers.addGraphic(circleGraphic);
         // 数据
-        mark_CircleGraphicData.push(circleGraphic);
+        annotation_CircleGraphicData.push(circleGraphic);
       }
     });
   };
   // 地图标注-恢复默认
-  function markRestoreDefault() {
+  function annotationRestoreDefault() {
     // 点-恢复默认
-    for (let i = 0; i < mark_PointGraphicData.length; i++) {
-      let pointGraphic = mark_PointGraphicData[i];
+    for (let i = 0; i < annotation_PointGraphicData.length; i++) {
+      let pointGraphic = annotation_PointGraphicData[i];
       pointGraphic.setStyle({
         label: {
           color: '#000000',
@@ -814,8 +921,8 @@
       });
     }
     // 线-恢复默认
-    for (let i = 0; i < mark_LineStringGraphicData.length; i++) {
-      let lineGraphic = mark_LineStringGraphicData[i];
+    for (let i = 0; i < annotation_LineStringGraphicData.length; i++) {
+      let lineGraphic = annotation_LineStringGraphicData[i];
       lineGraphic.setStyle({
         label: {
           color: '#000000',
@@ -823,8 +930,8 @@
       });
     }
     // 矩形-恢复默认
-    for (let i = 0; i < mark_PolygonGraphicData.length; i++) {
-      let polygonGraphic = mark_PolygonGraphicData[i];
+    for (let i = 0; i < annotation_PolygonGraphicData.length; i++) {
+      let polygonGraphic = annotation_PolygonGraphicData[i];
       polygonGraphic.setStyle({
         label: {
           color: '#000000',
@@ -832,8 +939,8 @@
       });
     }
     // 圆形-恢复默认
-    for (let i = 0; i < mark_CircleGraphicData.length; i++) {
-      let circleGraphic = mark_CircleGraphicData[i];
+    for (let i = 0; i < annotation_CircleGraphicData.length; i++) {
+      let circleGraphic = annotation_CircleGraphicData[i];
       circleGraphic.setStyle({
         label: {
           color: '#000000',
@@ -860,6 +967,7 @@
       return;
     }
     mapDrawType.value = 'drawPoint';
+    let time = dayjs().format('YYYY-MM-DD HH:mm:ss');
     const graphic = await graphicLayers.startDraw({
       type: 'billboard',
       style: {
@@ -867,15 +975,18 @@
         horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
         verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
         label: {
-          text: '可以同时支持文字',
-          font_size: 26,
-          color: drawColorPoint.value,
+          text: '点 ' + time,
+          font_size: 18,
+          color: '#000000',
           outline: true,
-          outlineColor: '#000000',
+          outlineWidth: 6,
+          outlineColor: '#ffffff',
           pixelOffsetY: -60,
         },
       },
     });
+    annotation_PointGraphicData.push(graphic);
+    addAndUpdateWorkAnnotation(graphic, 'point', time);
   }
   // 地图标注-绘制-线
   async function drawPolyline() {
@@ -884,22 +995,29 @@
       return;
     }
     mapDrawType.value = 'drawPolyline';
+    let time = dayjs().format('YYYY-MM-DD HH:mm:ss');
     const graphic = await graphicLayers.startDraw({
       type: 'polyline',
       style: {
-        pixelSize: 12,
-        color: '#3388ff',
+        width: 5,
+        line_start_cap: 0,
+        line_end_cap: 0,
+        color: drawColorPolyline.value,
         label: {
-          text: '可以同时支持文字',
-          font_size: 20,
-          color: '#ffffff',
+          text: '线 ' + time,
+          font_size: 18,
+          color: '#000000',
           outline: true,
-          outlineColor: '#000000',
-          pixelOffsetY: -20,
+          outlineWidth: 6,
+          outlineColor: '#ffffff',
+          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
+          pixelOffset: [25, -5],
         },
       },
     });
-    console.log('标绘完成', graphic.toJSON());
+    annotation_LineStringGraphicData.push(graphic);
+    addAndUpdateWorkAnnotation(graphic, 'polyline', time);
   }
   // 地图标注-绘制-形状
   async function drawPolygon() {
@@ -908,36 +1026,154 @@
       return;
     }
     mapDrawType.value = 'drawPolygon';
+    let time = dayjs().format('YYYY-MM-DD HH:mm:ss');
     const graphic = await graphicLayers.startDraw({
       type: 'polygon',
       style: {
-        color: '#ffff00',
-        opacity: 0.5,
+        color: drawColorPolygon.value,
+        fill: false,
         outline: true,
-        outlineColor: '#ffffff',
-        outlineWidth: 2.0,
+        outlineColor: drawColorPolygon.value,
+        outlineWidth: 3,
+        label: {
+          text: '多边形 ' + time,
+          font_size: 18,
+          color: '#000000',
+          outline: true,
+          outlineWidth: 6,
+          outlineColor: '#ffffff',
+        },
       },
     });
-    console.log('标绘完成', graphic.toJSON());
+    annotation_PolygonGraphicData.push(graphic);
+    addAndUpdateWorkAnnotation(graphic, 'polygon', time);
   }
-  // 地图标注-绘制-形状
+  // 地图标注-绘制-圆
   async function drawCricle() {
     if (mapDrawType.value == 'drawCricle') {
       mapDrawType.value = '';
       return;
     }
     mapDrawType.value = 'drawCricle';
+    let time = dayjs().format('YYYY-MM-DD HH:mm:ss');
     const graphic = await graphicLayers.startDraw({
       type: 'circle',
       style: {
-        color: '#ffff00',
-        opacity: 0.6,
+        color: drawColorCricle.value,
+        fill: false,
         outline: true,
-        outlineColor: '#ffffff',
-        outlineWidth: 2.0,
+        outlineColor: drawColorCricle.value,
+        outlineWidth: 3,
+        label: {
+          text: '圆 ' + time,
+          font_size: 18,
+          color: '#000000',
+          outline: true,
+          outlineWidth: 6,
+          outlineColor: '#ffffff',
+        },
       },
     });
-    console.log('标绘完成', graphic.toJSON());
+    annotation_CircleGraphicData.push(graphic);
+    addAndUpdateWorkAnnotation(graphic, 'circle', time);
+  }
+
+  // 新增到数据库并刷新列表
+  async function addAndUpdateWorkAnnotation(graphic, annotationtype, time, addOrUpdate = 'add') {
+    let graphicJson = graphic.toJSON();
+    let params: any = {};
+    let coordinates = graphicJson.position || graphicJson.positions;
+    let properties = {};
+    let polygonData: any = [];
+    let type = 0;
+    let geom = '';
+
+    switch (annotationtype) {
+      case 'point':
+        type = 0;
+        geom = GeojsonToWkt(turf.point(coordinates).geometry);
+        properties = {
+          font_size: 16,
+          iconnum: 0,
+          clampToGround: false,
+          color: drawColorPoint.value,
+          centerPoint: coordinates,
+        };
+        break;
+      case 'polyline':
+        type = 1;
+        geom = GeojsonToWkt(turf.lineString(coordinates).geometry);
+        properties = {
+          font_size: 16,
+          line_width: 5,
+          clampToGround: false,
+          color: drawColorPolyline.value,
+          centerPoint: coordinates[0],
+          line_start_cap: 0,
+          line_end_cap: 0,
+        };
+        break;
+      case 'polygon':
+        type = 2;
+        coordinates.push(coordinates[0]);
+        if (addOrUpdate == 'add') {
+          polygonData.push(coordinates);
+        } else {
+          polygonData = coordinates;
+        }
+        geom = GeojsonToWkt(turf.polygon(polygonData).geometry);
+        properties = {
+          font_size: 16,
+          clampToGround: false,
+          color: drawColorPolygon.value,
+          centerPoint: coordinates[0],
+        };
+        break;
+      case 'circle':
+        type = 3;
+        geom = GeojsonToWkt(turf.circle(coordinates, graphicJson.style.radius).geometry);
+        properties = {
+          font_size: 16,
+          clampToGround: true,
+          color: drawColorCricle.value,
+          radius: graphicJson.style.radius,
+          centerPoint: coordinates,
+        };
+        break;
+    }
+    if (addOrUpdate == 'add') {
+      params = {
+        name: graphicJson.style.label.text,
+        type: type,
+        properties: JSON.stringify(properties),
+        createTime: time,
+        createUser: '',
+        geom: geom,
+        workSpaceId: '1',
+        state: 0,
+        createUserName: '',
+      };
+      AddAnnotation(params).then((result) => {
+        // 刷新区域信息
+        emits('setAllAnnotationData');
+        mapDrawType.value = '';
+      });
+    } else {
+      params = {
+        id: graphicJson.id,
+        name: graphicJson.style.label.text,
+        type: type,
+        properties: JSON.stringify(properties),
+        geom: geom,
+        workSpaceId: '1',
+        state: props.nowShowAnnotationData.state,
+      };
+      UpdateAnnotation(params).then((result) => {
+        // 刷新区域信息
+        // emits('setAllAreaData');
+        // mapAreaDrawFlag.value = false;
+      });
+    }
   }
 
   // 地图照片--------------------------------------------------------------------
@@ -1263,7 +1499,7 @@
       let time = dayjs().format('YYYY-MM-DD HH:mm:ss');
       if (newVal) {
         // 样式
-        area_noland_LineStringGraphicData?.forEach((graphicLayer) => {
+        area_noland_PolygonGraphicData?.forEach((graphicLayer) => {
           if (graphicLayer.options.id == props.nowShowAreaData.id) {
             graphicLayer.setStyle({
               label: {
@@ -1271,7 +1507,7 @@
               },
             });
             if (oldVal && newVal.id == oldVal.id) {
-              addAndUpdateWorkArea(graphicLayer, 'noland_Polyline', time, 'update');
+              addAndUpdateWorkArea(graphicLayer, 'noland_Polygon', time, 'update');
             }
           }
         });
@@ -1339,7 +1575,7 @@
   // 地图作业区域-初始化-遍历展示
   function showAllAreaDataList() {
     // 删除旧数据
-    area_noland_LineStringGraphicData?.forEach((graphicLayer) => {
+    area_noland_PolygonGraphicData?.forEach((graphicLayer) => {
       graphicLayers.removeGraphic(graphicLayer);
     });
     area_dfence_PolygonGraphicData?.forEach((graphicLayer) => {
@@ -1355,7 +1591,7 @@
       graphicLayers.removeGraphic(graphicLayer);
     });
     // 图层数据
-    area_noland_LineStringGraphicData = [];
+    area_noland_PolygonGraphicData = [];
     // 地图作业区域-作业区-多边形
     area_dfence_PolygonGraphicData = [];
     // 地图作业区域-作业区-圈
@@ -1364,22 +1600,30 @@
     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 == 'Polyline') {
-        let nolandLineGraphic = new mars3d.graphic.PolylineEntity({
-          positions: item.coordinates[0][0],
+      if (item.type == 'noland' && item.geomtype == 'Polygon') {
+        let nolandPolygonGraphic = new mars3d.graphic.PolygonEntity({
+          positions: item.coordinates,
           style: {
             clampToGround: item.properties.clampToGround,
-            width: 10,
-            materialType: mars3d.MaterialType.LineCross,
-            materialOptions: {
-              color: item.state == 0 ? item.properties.color : '#6d6d6d', // 中心线颜色
-              dashLength: 36, // 十字长度
-              maskLength: 10, // 空隙间隔长度
-              centerPower: 0.1, // 中心宽百分比
-              dashPower: 0.2, // 虚线百分比
+            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}`,
@@ -1395,9 +1639,9 @@
           },
         });
         // 监听mouseover事件
-        nolandLineGraphic.on(mars3d.EventType.mouseOver, function () {
+        nolandPolygonGraphic.on(mars3d.EventType.mouseOver, function () {
           if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
-            nolandLineGraphic.setStyle({
+            nolandPolygonGraphic.setStyle({
               label: {
                 color: item.state == 0 ? item.properties.color : '#6d6d6d',
               },
@@ -1405,9 +1649,9 @@
           }
         });
         // 监听mouseout事件
-        nolandLineGraphic.on(mars3d.EventType.mouseOut, function () {
+        nolandPolygonGraphic.on(mars3d.EventType.mouseOut, function () {
           if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
-            nolandLineGraphic.setStyle({
+            nolandPolygonGraphic.setStyle({
               label: {
                 color: '#000000',
               },
@@ -1415,10 +1659,10 @@
           }
         });
         // 监听点击事件
-        nolandLineGraphic.on(mars3d.EventType.click, function () {
+        nolandPolygonGraphic.on(mars3d.EventType.click, function () {
           // 全部恢复默认
           areaRestoreDefault();
-          nolandLineGraphic.setStyle({
+          nolandPolygonGraphic.setStyle({
             label: {
               color: item.state == 0 ? item.properties.color : '#6d6d6d',
             },
@@ -1426,15 +1670,15 @@
           emits('setNowShowAreaData', item);
         });
         // 将 禁降区-线 添加到图层中
-        graphicLayers.addGraphic(nolandLineGraphic);
+        graphicLayers.addGraphic(nolandPolygonGraphic);
         // 数据
-        area_noland_LineStringGraphicData.push(nolandLineGraphic);
+        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[0][0],
+          positions: item.coordinates,
           style: {
             clampToGround: item.properties.clampToGround,
             fill: false,
@@ -1504,7 +1748,7 @@
       if (item.type == 'nfz' && item.geomtype == 'Polygon') {
         let nfz_PolygonGraphic = new mars3d.graphic.PolygonEntity({
           id: item.id,
-          positions: item.coordinates[0][0],
+          positions: item.coordinates,
           style: {
             clampToGround: item.properties.clampToGround,
             color: item.state == 0 ? item.properties.color + '33' : '#6d6d6d' + '33',
@@ -1713,8 +1957,8 @@
   // 地图作业区域-恢复默认
   function areaRestoreDefault() {
     // 作业区-多边形-恢复默认
-    for (let i = 0; i < area_noland_LineStringGraphicData.length; i++) {
-      let graphic = area_noland_LineStringGraphicData[i];
+    for (let i = 0; i < area_noland_PolygonGraphicData.length; i++) {
+      let graphic = area_noland_PolygonGraphicData[i];
       graphic.setStyle({
         label: {
           color: '#000000',
@@ -1770,7 +2014,40 @@
     mapAreaDrawFlag.value = true;
     let time = dayjs().format('YYYY-MM-DD HH:mm:ss');
     // 自定义禁降区
-    if (areaDrawType.value == 'noland_Polyline') {
+    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') {
@@ -1923,24 +2200,48 @@
     let polygonData: any = [];
     let type = '';
     let geom = '';
-
     switch (areatype) {
-      // 自定义圆形限飞区
-      case 'nfz_Circle':
-        type = 'nfz';
-        geom = GeojsonToWkt(turf.circle(coordinates, graphicJson.style.radius).geometry);
+      // 自定义禁降区
+      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: '#FF0000',
-          radius: graphicJson.style.radius,
-          centerPoint: coordinates,
+          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]);
-        polygonData.push(coordinates);
+        if (addOrUpdate == 'add') {
+          polygonData.push(coordinates);
+        } else {
+          polygonData = coordinates;
+        }
         geom = GeojsonToWkt(turf.polygon(polygonData).geometry);
         properties = {
           clampToGround: true,
@@ -1959,16 +2260,15 @@
           centerPoint: coordinates,
         };
         break;
-      // 自定义多边形作业区
-      case 'dfence_Polygon':
-        type = 'dfence';
-        coordinates.push(coordinates[0]);
-        polygonData.push(coordinates);
-        geom = GeojsonToWkt(turf.polygon(polygonData).geometry);
+      // 自定义圆形限飞区
+      case 'nfz_Circle':
+        type = 'nfz';
+        geom = GeojsonToWkt(turf.circle(coordinates, graphicJson.style.radius).geometry);
         properties = {
           clampToGround: true,
-          color: '#00FF00',
-          centerPoint: coordinates[0],
+          color: '#FF0000',
+          radius: graphicJson.style.radius,
+          centerPoint: coordinates,
         };
         break;
     }
@@ -2016,7 +2316,7 @@
   defineExpose({
     setNowShowImageByRight,
     handlerLocation,
-    markRestoreDefault,
+    annotationRestoreDefault,
     areaRestoreDefault,
   });
 </script>
@@ -2027,7 +2327,7 @@
     height: 100%;
   }
 
-  .markButtons {
+  .annotationButtons {
     position: absolute;
     display: flex;
     flex-wrap: wrap;
@@ -2068,7 +2368,7 @@
     outline: 2px solid #2b85e4;
   }
 
-  .popoverMark {
+  .popoverAnnotation {
     width: 18px;
     height: 18px;
     display: flex;

From 9dd57c85c299db3c5d6a6235ef9d88d3365a95d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=A6=8D?= <1455167345@qq.com>
Date: Mon, 14 Jul 2025 08:55:24 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E5=8F=98=E7=84=A6=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA2-20?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../flightoperation/src/LoadControl.vue       | 45 ++-----------------
 1 file changed, 3 insertions(+), 42 deletions(-)

diff --git a/src/views/demo/workmanagement/flightoperation/src/LoadControl.vue b/src/views/demo/workmanagement/flightoperation/src/LoadControl.vue
index b2e11cd..ee33926 100644
--- a/src/views/demo/workmanagement/flightoperation/src/LoadControl.vue
+++ b/src/views/demo/workmanagement/flightoperation/src/LoadControl.vue
@@ -123,7 +123,7 @@
     },
   });
   const zoomVale = ref(2);
-  const maxval = ref(200);
+  const maxval = ref(20);
   const marks = ref<Record<number, any>>({
     2: {
       style: {
@@ -131,13 +131,13 @@
       },
       label: createVNode('strong', {}, '2'),
     },
-    100: {
+    10: {
       style: {
         color: '#f50',
       },
       label: createVNode('strong', {}, '100'),
     },
-    200: {
+    20: {
       style: {
         color: '#f50',
       },
@@ -148,45 +148,6 @@
     () => props.cameraType,
     (val) => {
       console.log('props.cameraType', val);
-      if (val == 'ir') {
-        maxval.value = 20;
-        marks.value = {
-          2: {
-            style: {
-              color: '#f50',
-            },
-            label: createVNode('strong', {}, '2'),
-          },
-          20: {
-            style: {
-              color: '#f50',
-            },
-            label: createVNode('strong', {}, '20'),
-          },
-        };
-      } else {
-        maxval.value = 200;
-        marks.value = {
-          2: {
-            style: {
-              color: '#f50',
-            },
-            label: createVNode('strong', {}, '2'),
-          },
-          100: {
-            style: {
-              color: '#f50',
-            },
-            label: createVNode('strong', {}, '100'),
-          },
-          200: {
-            style: {
-              color: '#f50',
-            },
-            label: createVNode('strong', {}, '200'),
-          },
-        };
-      }
       cameraZoom();
     },
   );

From 929ad54b42f03b50aab837f8984b238cf2c7e4b5 Mon Sep 17 00:00:00 2001
From: zhufu <17863654727@163.com>
Date: Mon, 14 Jul 2025 09:18:37 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E8=BF=9B=E5=85=A5=E5=90=8E=E9=BB=98=E8=AE=A4=E9=80=89=E4=B8=AD?=
 =?UTF-8?q?=E7=AC=AC=E4=B8=80=E6=9D=A1=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projecthome/ProjectList/index.vue             | 15 +++++++++++++--
 .../demo/workmanagement/projecthome/index.vue     |  4 +++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/views/demo/workmanagement/projecthome/ProjectList/index.vue b/src/views/demo/workmanagement/projecthome/ProjectList/index.vue
index 9719dc7..9156e9d 100644
--- a/src/views/demo/workmanagement/projecthome/ProjectList/index.vue
+++ b/src/views/demo/workmanagement/projecthome/ProjectList/index.vue
@@ -32,7 +32,7 @@
 
 <script setup lang="ts">
 import AddProject from './AddProject/index.vue'
-import { ref, defineProps, onMounted, createVNode } from "vue"
+import { ref, defineProps, onMounted, createVNode, watch } from "vue"
 import { GetWorkspaceList, GetWorkSpaceById, DeleteWorkspace } from '@/api/demo/projecthome'
 import { message, Modal } from 'ant-design-vue'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
@@ -42,17 +42,24 @@ onMounted(() => {
   getProjectList()
 })
 
-const props = defineProps(['map', 'activeProject', 'airPort'])
+const props = defineProps(['map', 'activeProject', 'airPort', 'connect'])
 const emits = defineEmits(['update:activeProject'])
 const addModal = ref(false)
 const modalType = ref('')
 const projectList = ref([])
 const updateProject = ref({})
 const lastSubscriptUrl = ref('')
+const getList = ref(false)
 const addProject = () => {
   modalType.value = 'insert'
   addModal.value = true
 }
+watch(() => [getList.value, props.connect], (value) => {
+  const check = value.every(item => item === true)
+  if(check){
+    selectProject(projectList.value[0])
+  }
+})
 const selectProject = (item) => {
   if(props.activeProject != item.Id){
     props.airPort.latitude = null
@@ -74,6 +81,10 @@ const selectProject = (item) => {
 const getProjectList = () => {
   GetWorkspaceList().then(res => {
     projectList.value = res
+    if(res.length > 0){
+      emits('update:activeProject',res[0].Id)
+      getList.value = true
+    }
   })
 }
 const editProject = (item) => {
diff --git a/src/views/demo/workmanagement/projecthome/index.vue b/src/views/demo/workmanagement/projecthome/index.vue
index 6c9d254..92bf978 100644
--- a/src/views/demo/workmanagement/projecthome/index.vue
+++ b/src/views/demo/workmanagement/projecthome/index.vue
@@ -5,7 +5,7 @@
     </div>
     <div ref="leftComponentRef" style="position: absolute;top: 0px;left: 0px;">
       <!-- 项目列表 -->
-      <ProjectList :map="map" v-model:activeProject="activeProject" :airPort="airPort"/>
+      <ProjectList :map="map" v-model:activeProject="activeProject" :airPort="airPort" :connect="connect"/>
       <!-- 基本信息 -->
       <Info />
     </div>
@@ -46,6 +46,7 @@ const DESIGN_HEIGHT = 962
 const leftComponentRef = ref<HTMLElement | null>(null)
 const rightComponentRef = ref<HTMLElement | null>(null)
 const map = ref()
+const connect = ref(false)
 
 const clickAirPort = () => {
   sessionStorage.setItem('homeToFlightId', activeProject.value);
@@ -68,6 +69,7 @@ function updateScale() {
   }
 }
 const connectionCallback = () => {
+  connect.value = true
   getClient().on('message', (topic, msg) => {
     if (topic.endsWith("osd")) {
       const rs = JSON.parse(msg)