diff --git a/src/views/demo/system/mediaLibrary/index.vue b/src/views/demo/system/mediaLibrary/index.vue
index 7f8975f..2b59b5f 100644
--- a/src/views/demo/system/mediaLibrary/index.vue
+++ b/src/views/demo/system/mediaLibrary/index.vue
@@ -283,7 +283,6 @@
   import { columns, searchFormSchema } from './modal.data';
   import dayjs from 'dayjs';
   import { cloneDeep } from 'lodash-es';
-  import dataJson from './data.json';
 
   const { createConfirm, createMessage } = useMessage();
 
@@ -447,13 +446,6 @@
         // },
       ],
     },
-    {
-      id: '4',
-      name: '新建计划1 2025-06-11 16:28:23 (UTC+08)',
-      createtime: '2025-06-11 16:28:23',
-      type: 'folder',
-      children: dataJson,
-    },
     // {
     //   id: '4',
     //   name: '模型',
diff --git a/src/views/demo/system/mediaLibrary/path/index.vue b/src/views/demo/system/mediaLibrary/path/index.vue
index 86becd0..30486ff 100644
--- a/src/views/demo/system/mediaLibrary/path/index.vue
+++ b/src/views/demo/system/mediaLibrary/path/index.vue
@@ -139,7 +139,7 @@
   const allMarkDataList = ref(markJson);
   // 设置当前展示的标注信息
   function setNowShowMarkData(value) {
-    if (value) {
+    if (value.id) {
       markInfoShow.value = true;
     } else {
       markInfoShow.value = false;
@@ -173,7 +173,7 @@
 
   // 设置当前展示的区域信息
   function setNowShowAreaData(value) {
-    if (value) {
+    if (value.id) {
       areaInfoShow.value = true;
     } else {
       areaInfoShow.value = false;
@@ -202,7 +202,7 @@
 
   // 设置当前展示的图片
   function setNowShowImageData(value) {
-    if (value) {
+    if (value.id) {
       imageInfoShow.value = true;
     } else {
       imageInfoShow.value = false;
diff --git a/src/views/demo/system/mediaLibrary/path/json/area.json b/src/views/demo/system/mediaLibrary/path/json/area.json
index 7c2a68f..f9bd1f1 100644
--- a/src/views/demo/system/mediaLibrary/path/json/area.json
+++ b/src/views/demo/system/mediaLibrary/path/json/area.json
@@ -1,4 +1,31 @@
 [
+  {
+    "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",
@@ -43,82 +70,7 @@
     "created_time": 1751506632716,
     "created_by": "1921832882836627456",
     "created_nickname": "17854119262",
-    "updated_time": 1751506632716,
-    "updated_by": "1921832882836627456",
-    "updated_nickname": "17854119262"
-  },
-  {
-    "id": "4b312405-a1f9-4326-b7ad-f684912931c7",
-    "name": "fence-2025-07-03 09:36",
-    "status": "enable",
-    "type": "dfence",
-    "content": {
-      "type": "Feature",
-      "geometry": {
-        "type": "Circle",
-        "radius": 15.568918453415524,
-        "coordinates": [
-          113.94244540081064,
-          22.581260697110643
-        ]
-      },
-      "properties": {
-        "color": "#00FF00"
-      }
-    },
-    "area_hash": "enable_dfence_cec1fe6f1bdf6ba3de183332ec941336",
-    "created_time": 1751506620283,
-    "created_by": "1921832882836627456",
-    "created_nickname": "17854119262",
-    "updated_time": 1751699622015,
-    "updated_by": "1921832882836627456",
-    "updated_nickname": "17854119262"
-  },
-  {
-    "id": "5ef9074f-332e-4c2c-8caf-0d5e9c2d4bb0",
-    "name": "fence-2025-07-03 09:36",
-    "status": "enable",
-    "type": "dfence",
-    "content": {
-      "type": "Feature",
-      "geometry": {
-        "type": "Polygon",
-        "coordinates": [
-          [
-            [
-              113.94217071448199,
-              22.580710270949893
-            ],
-            [
-              113.94234419200872,
-              22.580557223329823
-            ],
-            [
-              113.94234708696375,
-              22.580804244635136
-            ],
-            [
-              113.942101324811,
-              22.580866002541086
-            ],
-            [
-              113.94217071448199,
-              22.580710270949893
-            ]
-          ]
-        ]
-      },
-      "properties": {
-        "color": "#00FF00",
-        "width": 50,
-        "clampToGround": true
-      }
-    },
-    "area_hash": "enable_dfence_491bd3ba995a30b943fce12cd277f319",
-    "created_time": 1751506610758,
-    "created_by": "1921832882836627456",
-    "created_nickname": "17854119262",
-    "updated_time": 1751506610758,
+    "updated_time": 1752051379960,
     "updated_by": "1921832882836627456",
     "updated_nickname": "17854119262"
   },
@@ -149,58 +101,10 @@
     "updated_by": "1921832882836627456",
     "updated_nickname": "17854119262"
   },
-  {
-    "id": "8fb48c63-b840-448d-b331-0e0dd505cdb2",
-    "name": "nfz-2025-07-03 09:36",
-    "status": "enable",
-    "type": "nfz",
-    "content": {
-      "type": "Feature",
-      "geometry": {
-        "type": "Polygon",
-        "coordinates": [
-          [
-            [
-              113.94081757610996,
-              22.581070072300122
-            ],
-            [
-              113.94103442563689,
-              22.580927765651026
-            ],
-            [
-              113.94117610149931,
-              22.581056645867445
-            ],
-            [
-              113.94095925169468,
-              22.58111303220476
-            ],
-            [
-              113.94081757610996,
-              22.581070072300122
-            ]
-          ]
-        ]
-      },
-      "properties": {
-        "color": "#FF0000",
-        "width": 50,
-        "clampToGround": true
-      }
-    },
-    "area_hash": "enable_nfz_069b0cdcae471e9849ff2af1c407cb63",
-    "created_time": 1751506590102,
-    "created_by": "1921832882836627456",
-    "created_nickname": "17854119262",
-    "updated_time": 1751506590102,
-    "updated_by": "1921832882836627456",
-    "updated_nickname": "17854119262"
-  },
   {
     "id": "53d34e36-83a1-4f27-9379-59916ac22f94",
     "name": "作业区",
-    "status": "disable",
+    "status": "enable",
     "type": "dfence",
     "content": {
       "type": "Feature",
@@ -240,18 +144,18 @@
         "color": "#00FF00"
       }
     },
-    "area_hash": "disable_dfence_d0dc9ea80f32a4ddf9737ed27059da89",
+    "area_hash": "enable_dfence_d0dc9ea80f32a4ddf9737ed27059da89",
     "created_time": 1747035695040,
     "created_by": "",
     "created_nickname": "",
-    "updated_time": 1751700024743,
+    "updated_time": 1751870133102,
     "updated_by": "1921832882836627456",
     "updated_nickname": "17854119262"
   },
   {
     "id": "189b2247-a5be-49ef-83cb-768056a00ed6",
     "name": "限飞区",
-    "status": "disable",
+    "status": "enable",
     "type": "nfz",
     "content": {
       "type": "Feature",
@@ -291,11 +195,11 @@
         "clampToGround": true
       }
     },
-    "area_hash": "disable_nfz_d362c13ac83407d94d7e8754f25b1f8d",
+    "area_hash": "enable_nfz_d362c13ac83407d94d7e8754f25b1f8d",
     "created_time": 1747035694853,
     "created_by": "",
     "created_nickname": "",
-    "updated_time": 1751700027203,
+    "updated_time": 1751870135023,
     "updated_by": "1921832882836627456",
     "updated_nickname": "17854119262"
   }
diff --git a/src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue b/src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue
index 4587dc2..dc63429 100644
--- a/src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue
@@ -10,9 +10,9 @@
           <div
             v-if="props.nowShowAreaData.type == 'noland'"
             :style="{
-              width: '13px',
-              height: '13px',
-              outline: `2px solid ${props.nowShowAreaData.content.properties.color}`,
+              width: '15px',
+              height: '15px',
+              background: `linear-gradient(to bottom right, transparent 45%, ${props.nowShowAreaData.content.properties.color} 45%, ${props.nowShowAreaData.content.properties.color} 60%, transparent 60%), #ffffff00`,
               'margin-left': '2px',
               'margin-right': '12px',
             }"
@@ -81,21 +81,21 @@
         <div class="markTitle">水平距离</div>
       </a-col>
       <a-col :span="18" v-if="props.nowShowAreaData.type == 'noland'">
-        <div class="markContent"> m</div>
+        <div class="markContent"> {{ distance.toFixed(1) }}m</div>
       </a-col>
       <!-- 水平面积 -->
       <a-col :span="6">
         <div class="markTitle">水平面积</div>
       </a-col>
       <a-col :span="18">
-        <div class="markContent"> ㎡</div>
+        <div class="markContent"> {{ area.toFixed(2) }}㎡</div>
       </a-col>
       <!-- 水平周长 -->
       <a-col :span="6" v-if="props.nowShowAreaData.content.geometry.type == 'Polygon'">
         <div class="markTitle">水平周长</div>
       </a-col>
       <a-col :span="18" v-if="props.nowShowAreaData.content.geometry.type == 'Polygon'">
-        <div class="markContent"> m</div>
+        <div class="markContent"> {{ distance2 }}m</div>
       </a-col>
       <!-- 半径 -->
       <a-col :span="6" v-if="props.nowShowAreaData.content.geometry.type == 'Circle'">
@@ -166,6 +166,8 @@
 </template>
 <script lang="ts" setup>
   import { ref, watch, nextTick } from 'vue';
+  import * as mars3d from 'mars3d';
+  import * as Cesium from 'mars3d-cesium';
   import {
     CloseOutlined,
     DeleteOutlined,
@@ -267,10 +269,50 @@
     emits('deleteArea', props.nowShowAreaData);
   }
 
+  // 水平距离
+  const distance = ref(0);
+  async function getDistance() {
+    distance.value = mars3d.MeasureUtil.getSurfaceDistance(
+      props.nowShowAreaData.content.geometry.coordinates[0],
+    );
+  }
+
+  // 水平面积
+  const area = ref(0);
+  async function getArea() {
+    if (props.nowShowAreaData.content.geometry.type == 'Circle') {
+      let radius = props.nowShowAreaData.content.geometry.radius;
+      area.value = Math.PI * radius * radius;
+    } else {
+      area.value = mars3d.MeasureUtil.getSurfaceArea(
+        props.nowShowAreaData.content.geometry.coordinates[0],
+      );
+    }
+  }
+
+  // 水平周长
+  const distance2 = ref(0);
+  async function getDistance2() {
+    distance.value = mars3d.MeasureUtil.getDistance(
+      props.nowShowAreaData.content.geometry.coordinates[0],
+      true,
+    );
+  }
+
   watch(
     () => props.nowShowAreaData,
     () => {
       nowAreaData.value = props.nowShowAreaData;
+      // 水平面积
+      getArea();
+      if (props.nowShowAreaData.type == 'noland') {
+        // 水平距离
+        getDistance();
+      }
+      if (props.nowShowAreaData.content.geometry.type == 'Polygon') {
+        // 水平距离
+        getDistance2();
+      }
     },
     {
       deep: true,
diff --git a/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue b/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
index d0c5e96..209f35f 100644
--- a/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
@@ -284,9 +284,9 @@
                 <div
                   v-if="show.type == 'noland'"
                   :style="{
-                    width: '13px',
-                    height: '13px',
-                    outline: `2px solid ${show.content.properties.color}`,
+                    width: '15px',
+                    height: '15px',
+                    background: `linear-gradient(to bottom right, transparent 45%, ${show.content.properties.color} 45%, ${show.content.properties.color} 60%, transparent 60%), #ffffff00`,
                     'margin-right': '6px',
                   }"
                 />
diff --git a/src/views/demo/system/mediaLibrary/path/pathMap.vue b/src/views/demo/system/mediaLibrary/path/pathMap.vue
index 5a41c02..9bf3e7f 100644
--- a/src/views/demo/system/mediaLibrary/path/pathMap.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathMap.vue
@@ -1,11 +1,126 @@
 <template>
-  <div ref="vChartRef" id="mars3d-container" class="mars3d-container"></div>
+  <div ref="vChartRef" id="mars3d-container" class="mars3d-container">
+    <div class="markButtons">
+      <div
+        :class="mapDrawType == 'drawPoint' ? 'button_choose' : 'button_nochoose'"
+        @click="drawPoint"
+      >
+        <a-popover placement="left">
+          <template #content>
+            <div style="display: flex; gap: 5px">
+              <div
+                class="popoverClass"
+                v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
+                :key="color"
+                :style="{ background: color }"
+                @click="drawColorPoint = color"
+              >
+                <CheckOutlined v-if="drawColorPoint == color" style="color: white" />
+              </div>
+            </div>
+          </template>
+          <AntDesignOutlined
+            :style="{
+              color: drawColorPoint,
+              fontSize: '20px',
+            }"
+          />
+        </a-popover>
+      </div>
+      <div
+        :class="mapDrawType == 'drawPolyline' ? 'button_choose' : 'button_nochoose'"
+        @click="drawPolyline"
+      >
+        <a-popover placement="left">
+          <template #content>
+            <div style="display: flex; gap: 5px">
+              <div
+                class="popoverClass"
+                v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
+                :key="color"
+                :style="{ background: color }"
+                @click="drawColorPolyline = color"
+              >
+                <CheckOutlined v-if="drawColorPolyline == color" style="color: white" />
+              </div>
+            </div>
+          </template>
+          <ExpandAltOutlined
+            :style="{
+              color: drawColorPolyline,
+              fontSize: '20px',
+            }"
+          />
+        </a-popover>
+      </div>
+      <div
+        :class="mapDrawType == 'drawPolygon' ? 'button_choose' : 'button_nochoose'"
+        @click="drawPolygon"
+      >
+        <a-popover placement="left">
+          <template #content>
+            <div style="display: flex; gap: 5px">
+              <div
+                class="popoverClass"
+                v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
+                :key="color"
+                :style="{ background: color }"
+                @click="drawColorPolygon = color"
+              >
+                <CheckOutlined v-if="drawColorPolygon == color" style="color: white" />
+              </div>
+            </div>
+          </template>
+          <BorderOutlined
+            :style="{
+              color: drawColorPolygon,
+              fontSize: '20px',
+            }"
+          />
+        </a-popover>
+      </div>
+      <div
+        :class="mapDrawType == 'drawCricle' ? 'button_choose' : 'button_nochoose'"
+        @click="drawCricle"
+      >
+        <a-popover placement="left">
+          <template #content>
+            <div style="display: flex; gap: 5px">
+              <div
+                class="popoverClass"
+                v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
+                :key="color"
+                :style="{ background: color }"
+                @click="drawColorCricle = color"
+              >
+                <CheckOutlined v-if="drawColorCricle == color" style="color: white" />
+              </div>
+            </div>
+          </template>
+          <LogoutOutlined
+            :style="{
+              color: drawColorCricle,
+              fontSize: '20px',
+            }"
+          />
+        </a-popover>
+      </div>
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
   import { ref, onMounted, defineEmits } from 'vue';
   import * as mars3d from 'mars3d';
   import * as Cesium from 'mars3d-cesium';
   import { circle, rect, triangle } from './svg';
+  import {
+    CheckOutlined,
+    AntDesignOutlined,
+    ExpandAltOutlined,
+    BorderOutlined,
+    LogoutOutlined,
+  } from '@ant-design/icons-vue';
+
   const props = defineProps([
     'allMarkDataList',
     'nowShowMarkData',
@@ -23,13 +138,15 @@
 
   const vChartRef: any = ref<HTMLElement>();
   let map: mars3d.Map; // 地图对象
-  let graphicLayers = new mars3d.layer.GraphicLayer();
+  let graphicLayers = new mars3d.layer.GraphicLayer({
+    isAutoEditing: true,
+  });
   // 地图标注
   // 地图标注-点
   let mark_PointGraphicData: any = [];
   // 地图标注-线
   let mark_LineStringGraphicData: any = [];
-  // 地图标注-区域
+  // 地图标注-多边形
   let mark_PolygonGraphicData: any = [];
   // 地图标注-圈
   let mark_CircleGraphicData: any = [];
@@ -44,6 +161,18 @@
   // 地图照片-展示图片
   let image_imageGraphicData: any = [];
 
+  // 地图作业区域
+  // 地图作业区域-禁降区-线
+  let area_noland_LineStringGraphicData: any = [];
+  // 地图作业区域-作业区-多边形
+  let area_dfence_PolygonGraphicData: any = [];
+  // 地图作业区域-作业区-圈
+  let area_dfence_CircleGraphicData: any = [];
+  // 地图作业区域-限飞区-多边形
+  let area_nfz_PolygonGraphicData: any = [];
+  // 地图作业区域-限飞区-圈
+  let area_nfz_CircleGraphicData: any = [];
+
   onMounted(() => {
     initMap();
   });
@@ -273,9 +402,27 @@
       ],
       layers: [],
     });
-    showAllImageDataList();
+    // 图层
+    map.addLayer(graphicLayers);
     showAllMarkDataList();
+    showAllImageDataList();
+    showAllAreaDataList();
     handlerLocation([118.2958779, 35.1342553]);
+    // 监听地图点击事件
+    map.on(mars3d.EventType.click, function (event) {
+      if (!event.czmObject) {
+        // 地图标注-恢复默认
+        if (props.nowShowMarkData.id) {
+          markRestoreDefault();
+          emits('setNowShowMarkData', {});
+        }
+        // // 地图作业区域-恢复默认
+        // if (props.nowShowAreaData.id) {
+        //   areaRestoreDefault();
+        //   emits('setNowShowAreaData', {});
+        // }
+      }
+    });
   };
 
   // 地图标注--------------------------------------------------------------------
@@ -294,8 +441,6 @@
     mark_CircleGraphicData?.forEach((graphicLayer) => {
       graphicLayers.removeGraphic(graphicLayer);
     });
-    // 图层
-    map.addLayer(graphicLayers);
     // 图层数据
     mark_PointGraphicData = [];
     mark_LineStringGraphicData = [];
@@ -304,6 +449,64 @@
     // 地图标注-遍历
     props.allMarkDataList.forEach((item, index) => {
       let content = item.resource.content;
+      // 地图标注-点
+      if (content.geometry.type == 'Point') {
+        let pointGraphic = new mars3d.graphic.BillboardEntity({
+          id: item.id,
+          position: content.geometry.coordinates,
+          style: {
+            image: 'https://data.mars3d.cn/img/marker/mark-red.png',
+            clampToGround: false,
+            scale: 1,
+            label: {
+              text: `${item.name}`,
+              font_size: content.properties.font_size,
+              color: '#000000',
+              outline: true,
+              outlineColor: '#ffffff',
+              outlineWidth: 6,
+              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+              horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
+              pixelOffset: [25, 0],
+            },
+          },
+        });
+        // 监听mouseover事件
+        pointGraphic.on(mars3d.EventType.mouseOver, function () {
+          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
+            pointGraphic.setStyle({
+              label: {
+                color: content.properties.color,
+              },
+            });
+          }
+        });
+        // 监听mouseout事件
+        pointGraphic.on(mars3d.EventType.mouseOut, function () {
+          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
+            pointGraphic.setStyle({
+              label: {
+                color: '#000000',
+              },
+            });
+          }
+        });
+        // 监听点击事件
+        pointGraphic.on(mars3d.EventType.click, function () {
+          // 全部恢复默认
+          markRestoreDefault();
+          pointGraphic.setStyle({
+            label: {
+              color: content.properties.color,
+            },
+          });
+          emits('setNowShowMarkData', item);
+        });
+        // 将点对象 添加到图层中
+        graphicLayers.addGraphic(pointGraphic);
+        // 数据
+        mark_PointGraphicData.push(pointGraphic);
+      }
       // 地图标注-线
       if (content.geometry.type == 'LineString') {
         let lineGraphic = new mars3d.graphic.PolylineEntity({
@@ -312,9 +515,6 @@
           style: {
             color: Cesium.Color.fromCssColorString(content.properties.color),
             width: content.properties.line_width,
-            outlineColor: '#ffffff',
-            outlineWidth: 2,
-            outline: false,
             label: {
               text: `${item.name}`,
               font_size: content.properties.font_size,
@@ -327,61 +527,13 @@
               pixelOffset: [25, -5],
             },
           },
-          // 用于恢复默认
-          defaultColor: Cesium.Color.fromCssColorString(content.properties.color),
-          defaultWidth: content.properties.line_width,
+          hasEdit: true,
+          drawShowMeasure: true,
         });
-        if (content.properties.line_start_cap != 0) {
-          // 获取起点和终点
-          const positions = lineGraphic.options.positions;
-          if (positions.length >= 2) {
-            const start = positions[0];
-            const end = positions[positions.length - 1];
-
-            const image = new Image();
-            image.crossOrigin = 'Anonymous';
-            // 将SVG字符串转换为Data URL
-            if (content.properties.line_start_cap == 1) {
-              image.src = svgToDataURL(triangle.replace('#000000', content.properties.color));
-            } else if (content.properties.line_start_cap == 2) {
-              image.src = svgToDataURL(rect.replace('#000000', content.properties.color));
-            } else if (content.properties.line_start_cap == 3) {
-              image.src = svgToDataURL(circle.replace('#000000', content.properties.color));
-            }
-            image.onload = () => {
-              // 创建Canvas元素
-              const canvas = document.createElement('canvas');
-              canvas.width = content.properties.line_width * 5;
-              canvas.height = content.properties.line_width * 5;
-              // 获取Canvas绘图上下文
-              const ctx = canvas.getContext('2d');
-              // 在Canvas上绘制图片
-              ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
-              // 将Canvas内容转换为图片的数据URL
-              const dataURL_svg = canvas.toDataURL('image/png');
-
-              const startIcon = new mars3d.graphic.BillboardEntity({
-                position: start,
-                style: {
-                  image: dataURL_svg,
-                  scale: 0.5,
-                  rotation: 0,
-                },
-              });
-              graphicLayers.addGraphic(startIcon);
-            };
-          }
-        }
-
         // 监听mouseover事件
         lineGraphic.on(mars3d.EventType.mouseOver, function () {
           if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
             lineGraphic.setStyle({
-              color: Cesium.Color.fromCssColorString(content.properties.color + 'cc'),
-              width: content.properties.line_width,
-              outlineColor: '#ffffff',
-              outlineWidth: 2,
-              outline: true,
               label: {
                 color: content.properties.color,
               },
@@ -392,10 +544,6 @@
         lineGraphic.on(mars3d.EventType.mouseOut, function () {
           if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
             lineGraphic.setStyle({
-              color: Cesium.Color.fromCssColorString(content.properties.color),
-              width: content.properties.line_width,
-              outlineWidth: 0,
-              outline: false,
               label: {
                 color: '#000000',
               },
@@ -406,25 +554,11 @@
         lineGraphic.on(mars3d.EventType.click, function () {
           // 全部恢复默认
           markRestoreDefault();
-          lineGraphic.show = false;
-          let distanceMeasure = new mars3d.graphic.DistanceMeasure({
-            id: item.id,
-            positions: content.geometry.coordinates,
-            style: {
-              color: '#ff0000',
-              width: 3,
-              clampToGround: true,
-              // outline: true,
-              // outlineColor: '',
-              label: {
-                font_size: 18,
-                color: '#ffffff',
-                outline: true,
-                outlineColor: '#000000',
-              },
+          lineGraphic.setStyle({
+            label: {
+              color: content.properties.color,
             },
           });
-          graphicLayers.addGraphic(distanceMeasure);
           emits('setNowShowMarkData', item);
         });
         // 将线对象 添加到图层中
@@ -432,20 +566,163 @@
         // 数据
         mark_LineStringGraphicData.push(lineGraphic);
       }
+      // 地图标注-多边形
+      if (content.geometry.type == 'Polygon') {
+        let polygonGraphic = new mars3d.graphic.PolygonEntity({
+          id: item.id,
+          positions: content.geometry.coordinates,
+          style: {
+            color: content.properties.color,
+            fill: false,
+            width: content.properties.line_width,
+            outlineColor: content.properties.color,
+            outlineWidth: 2,
+            outline: true,
+            clampToGround: content.properties.clampToGround,
+            label: {
+              text: `${item.name}`,
+              font_size: content.properties.font_size,
+              color: '#000000',
+              outline: true,
+              outlineColor: '#ffffff',
+              outlineWidth: 6,
+              verticalOrigin: Cesium.VerticalOrigin.CENTER,
+              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            },
+          },
+        });
+        // 监听mouseover事件
+        polygonGraphic.on(mars3d.EventType.mouseOver, function () {
+          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
+            polygonGraphic.setStyle({
+              // color: Cesium.Color.fromCssColorString('#ffffff00'),
+              label: {
+                color: content.properties.color,
+              },
+            });
+          }
+        });
+        // 监听mouseout事件
+        polygonGraphic.on(mars3d.EventType.mouseOut, function () {
+          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
+            polygonGraphic.setStyle({
+              label: {
+                color: '#000000',
+              },
+            });
+          }
+        });
+        // 监听点击事件
+        polygonGraphic.on(mars3d.EventType.click, function () {
+          // 全部恢复默认
+          markRestoreDefault();
+          polygonGraphic.setStyle({
+            label: {
+              color: content.properties.color,
+            },
+          });
+          emits('setNowShowMarkData', item);
+        });
+        // 将形状对象 添加到图层中
+        graphicLayers.addGraphic(polygonGraphic);
+        // 数据
+        mark_PolygonGraphicData.push(polygonGraphic);
+      }
+      // 地图标注-圆
+      if (content.geometry.type == 'Circle') {
+        let circleGraphic = new mars3d.graphic.CircleEntity({
+          id: item.id,
+          position: content.geometry.coordinates,
+          style: {
+            radius: content.geometry.radius,
+            fill: false,
+            outlineColor: content.properties.color,
+            outlineWidth: 4,
+            outline: true,
+            clampToGround: content.properties.clampToGround,
+            label: {
+              text: `${item.name}`,
+              font_size: content.properties.font_size,
+              color: '#000000',
+              outline: true,
+              outlineColor: '#ffffff',
+              outlineWidth: 6,
+              verticalOrigin: Cesium.VerticalOrigin.CENTER,
+              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            },
+          },
+        });
+        // 监听mouseover事件
+        circleGraphic.on(mars3d.EventType.mouseOver, function () {
+          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
+            circleGraphic.setStyle({
+              label: {
+                color: content.properties.color,
+              },
+            });
+          }
+        });
+        // 监听mouseout事件
+        circleGraphic.on(mars3d.EventType.mouseOut, function () {
+          if (!props.nowShowMarkData || props.nowShowMarkData.id !== item.id) {
+            circleGraphic.setStyle({
+              label: {
+                color: '#000000',
+              },
+            });
+          }
+        });
+        // 监听点击事件
+        circleGraphic.on(mars3d.EventType.click, function () {
+          // 全部恢复默认
+          markRestoreDefault();
+          circleGraphic.setStyle({
+            label: {
+              color: content.properties.color,
+            },
+          });
+          emits('setNowShowMarkData', item);
+        });
+        // 将圆对象 添加到图层中
+        graphicLayers.addGraphic(circleGraphic);
+        // 数据
+        mark_CircleGraphicData.push(circleGraphic);
+      }
     });
   };
-
   // 地图标注-恢复默认
   function markRestoreDefault() {
+    // 点-恢复默认
+    for (let i = 0; i < mark_PointGraphicData.length; i++) {
+      let pointGraphic = mark_PointGraphicData[i];
+      pointGraphic.setStyle({
+        label: {
+          color: '#000000',
+        },
+      });
+    }
     // 线-恢复默认
     for (let i = 0; i < mark_LineStringGraphicData.length; i++) {
       let lineGraphic = mark_LineStringGraphicData[i];
-      let defaultColor = lineGraphic.options.defaultColor;
-      let defaultWidth = lineGraphic.options.defaultWidth;
       lineGraphic.setStyle({
-        color: defaultColor,
-        width: defaultWidth,
-        outline: false,
+        label: {
+          color: '#000000',
+        },
+      });
+    }
+    // 矩形-恢复默认
+    for (let i = 0; i < mark_PolygonGraphicData.length; i++) {
+      let polygonGraphic = mark_PolygonGraphicData[i];
+      polygonGraphic.setStyle({
+        label: {
+          color: '#000000',
+        },
+      });
+    }
+    // 圆形-恢复默认
+    for (let i = 0; i < mark_CircleGraphicData.length; i++) {
+      let circleGraphic = mark_CircleGraphicData[i];
+      circleGraphic.setStyle({
         label: {
           color: '#000000',
         },
@@ -457,25 +734,6 @@
     return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgString)));
   }
 
-  // 计算一个简单的三角形（假设面向正北）
-  function createTrianglePoints(center, size = 10) {
-    const heading = 0; // 正北方向（单位：弧度）
-    const h = Math.PI / 2 - heading;
-    return [
-      Cesium.Cartesian3.add(center, new Cesium.Cartesian3(0, size, 0), new Cesium.Cartesian3()),
-      Cesium.Cartesian3.add(
-        center,
-        new Cesium.Cartesian3(-size * 0.4, -size * 0.7, 0),
-        new Cesium.Cartesian3(),
-      ),
-      Cesium.Cartesian3.add(
-        center,
-        new Cesium.Cartesian3(size * 0.4, -size * 0.7, 0),
-        new Cesium.Cartesian3(),
-      ),
-    ];
-  }
-
   // 地图照片--------------------------------------------------------------------
   // 地图照片-初始化-遍历展示
   const showAllImageDataList = async () => {
@@ -492,8 +750,6 @@
     image_imageGraphicData?.forEach((graphicLayer) => {
       graphicLayers.removeGraphic(graphicLayer);
     });
-    // 图层
-    map.addLayer(graphicLayers);
     // 图层数据
     image_bottomPointGraphicData = [];
     image_flightointGraphicData = [];
@@ -559,6 +815,7 @@
                 scale: 1,
                 verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
               },
+              hasEdit: false,
             });
             if (index + 1 < props.allImageDataList.length) {
               const afterItem = props.allImageDataList[index + 1];
@@ -579,6 +836,7 @@
                 verticalOrigin: Cesium.VerticalOrigin.CENTER,
                 rotation: rotation,
               },
+              hasEdit: false,
               show: false,
             });
             // 地面点到展示图片的线
@@ -593,6 +851,7 @@
                 width: 1, // 线宽
                 clampToGround: false,
               },
+              hasEdit: false,
               // 用于恢复默认
               defaultPosition: position,
               // 地形高度
@@ -619,6 +878,7 @@
                   show: false,
                 },
               },
+              hasEdit: false,
               // 用于恢复默认
               defaultImage: dataURL1,
               // 用于外侧修改图片
@@ -702,7 +962,6 @@
       }
     });
   };
-
   // 地图照片-恢复默认
   function imageRestoreDefault() {
     // 飞行点
@@ -736,7 +995,6 @@
       });
     }
   }
-
   // 地图照片-右侧图片模块修改当前显示图片
   function setNowShowImageByRight() {
     setTimeout(() => {
@@ -786,7 +1044,530 @@
     }, 500);
   }
 
-  //
+  // 地图作业区域--------------------------------------------------------------------
+  // 地图作业区域-初始化-遍历展示
+  function showAllAreaDataList() {
+    // 删除旧数据
+    area_noland_LineStringGraphicData?.forEach((graphicLayer) => {
+      graphicLayers.removeGraphic(graphicLayer);
+    });
+    area_dfence_PolygonGraphicData?.forEach((graphicLayer) => {
+      graphicLayers.removeGraphic(graphicLayer);
+    });
+    area_dfence_CircleGraphicData?.forEach((graphicLayer) => {
+      graphicLayers.removeGraphic(graphicLayer);
+    });
+    area_nfz_PolygonGraphicData?.forEach((graphicLayer) => {
+      graphicLayers.removeGraphic(graphicLayer);
+    });
+    area_nfz_CircleGraphicData?.forEach((graphicLayer) => {
+      graphicLayers.removeGraphic(graphicLayer);
+    });
+    // 图层数据
+    area_noland_LineStringGraphicData = [];
+    // 地图作业区域-作业区-多边形
+    area_dfence_PolygonGraphicData = [];
+    // 地图作业区域-作业区-圈
+    area_dfence_CircleGraphicData = [];
+    // 地图作业区域-限飞区-多边形
+    area_nfz_PolygonGraphicData = [];
+    // 地图作业区域-限飞区-圈
+    area_nfz_CircleGraphicData = [];
+
+    props.allAreaDataList.forEach((item, index) => {
+      let content = item.content;
+      // 地图作业区域-禁降区-线
+      if (item.type == 'noland' && content.geometry.type == 'Polyline') {
+        let nolandLineGraphic = new mars3d.graphic.PolylineEntity({
+          positions: content.geometry.coordinates[0],
+          style: {
+            clampToGround: content.properties.clampToGround,
+            width: 10,
+            materialType: mars3d.MaterialType.LineCross,
+            materialOptions: {
+              color: content.properties.color, // 中心线颜色
+              dashLength: 36, // 十字长度
+              maskLength: 10, // 空隙间隔长度
+              centerPower: 0.1, // 中心宽百分比
+              dashPower: 0.2, // 虚线百分比
+            },
+            label: {
+              text: `${item.name}`,
+              font_size: 16,
+              color: '#000000',
+              outline: true,
+              outlineColor: '#ffffff',
+              outlineWidth: 6,
+              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+              horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
+              pixelOffset: [25, -5],
+            },
+          },
+        });
+        // 监听mouseover事件
+        nolandLineGraphic.on(mars3d.EventType.mouseOver, function () {
+          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
+            nolandLineGraphic.setStyle({
+              label: {
+                color: content.properties.color,
+              },
+            });
+          }
+        });
+        // 监听mouseout事件
+        nolandLineGraphic.on(mars3d.EventType.mouseOut, function () {
+          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
+            nolandLineGraphic.setStyle({
+              label: {
+                color: '#000000',
+              },
+            });
+          }
+        });
+        // 监听点击事件
+        nolandLineGraphic.on(mars3d.EventType.click, function () {
+          // 全部恢复默认
+          areaRestoreDefault();
+          nolandLineGraphic.setStyle({
+            label: {
+              color: content.properties.color,
+            },
+          });
+          emits('setNowShowAreaData', item);
+        });
+        // 将 禁降区-线 添加到图层中
+        graphicLayers.addGraphic(nolandLineGraphic);
+        // 数据
+        area_noland_LineStringGraphicData.push(nolandLineGraphic);
+      }
+      // 地图作业区域-作业区-多边形
+      if (item.type == 'dfence' && content.geometry.type == 'Polygon') {
+        let dfence_PolygonGraphic = new mars3d.graphic.PolygonEntity({
+          id: item.id,
+          positions: content.geometry.coordinates,
+          style: {
+            clampToGround: content.properties.clampToGround,
+            fill: false,
+            outline: true,
+            outlineStyle: {
+              width: 12,
+              materialType: mars3d.MaterialType.LineCross,
+              materialOptions: {
+                background: true,
+                backgroundColor: '#ffffff',
+                color: Cesium.Color.fromCssColorString(content.properties.color),
+                dashLength: 36,
+                maskLength: 10,
+                centerPower: 0.1,
+                dashPower: 0.2,
+              },
+            },
+            label: {
+              text: `${item.name}`,
+              font_size: 16,
+              color: '#000000',
+              outline: true,
+              outlineColor: '#ffffff',
+              outlineWidth: 6,
+              verticalOrigin: Cesium.VerticalOrigin.CENTER,
+              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            },
+          },
+        });
+        // 监听mouseover事件
+        dfence_PolygonGraphic.on(mars3d.EventType.mouseOver, function () {
+          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
+            dfence_PolygonGraphic.setStyle({
+              label: {
+                color: content.properties.color,
+              },
+            });
+          }
+        });
+        // 监听mouseout事件
+        dfence_PolygonGraphic.on(mars3d.EventType.mouseOut, function () {
+          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
+            dfence_PolygonGraphic.setStyle({
+              label: {
+                color: '#000000',
+              },
+            });
+          }
+        });
+        // 监听点击事件
+        dfence_PolygonGraphic.on(mars3d.EventType.click, function () {
+          // 全部恢复默认
+          areaRestoreDefault();
+          dfence_PolygonGraphic.setStyle({
+            label: {
+              color: content.properties.color,
+            },
+          });
+          emits('setNowShowAreaData', item);
+        });
+        // 将 作业区-圈 添加到图层中
+        graphicLayers.addGraphic(dfence_PolygonGraphic);
+        // 数据
+        area_dfence_PolygonGraphicData.push(dfence_PolygonGraphic);
+      }
+      // 地图作业区域-作业区-圈
+      if (item.type == 'dfence' && content.geometry.type == 'Circle') {
+        let dfence_CircleGraphic = new mars3d.graphic.CircleEntity({
+          id: item.id,
+          position: content.geometry.coordinates,
+          style: {
+            clampToGround: content.properties.clampToGround,
+            radius: content.geometry.radius,
+            fill: false,
+            outline: true,
+            outlineStyle: {
+              width: 12,
+              materialType: mars3d.MaterialType.LineCross,
+              materialOptions: {
+                background: true,
+                backgroundColor: '#ffffff',
+                color: Cesium.Color.fromCssColorString(content.properties.color),
+                dashLength: 36,
+                maskLength: 10,
+                centerPower: 0.1,
+                dashPower: 0.2,
+              },
+            },
+            label: {
+              text: `${item.name}`,
+              font_size: 16,
+              color: '#000000',
+              outline: true,
+              outlineColor: '#ffffff',
+              outlineWidth: 6,
+              verticalOrigin: Cesium.VerticalOrigin.CENTER,
+              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            },
+          },
+        });
+        // 监听mouseover事件
+        dfence_CircleGraphic.on(mars3d.EventType.mouseOver, function () {
+          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
+            dfence_CircleGraphic.setStyle({
+              label: {
+                color: content.properties.color,
+              },
+            });
+          }
+        });
+        // 监听mouseout事件
+        dfence_CircleGraphic.on(mars3d.EventType.mouseOut, function () {
+          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
+            dfence_CircleGraphic.setStyle({
+              label: {
+                color: '#000000',
+              },
+            });
+          }
+        });
+        // 监听点击事件
+        dfence_CircleGraphic.on(mars3d.EventType.click, function () {
+          // 全部恢复默认
+          areaRestoreDefault();
+          dfence_CircleGraphic.setStyle({
+            label: {
+              color: content.properties.color,
+            },
+          });
+          emits('setNowShowAreaData', item);
+        });
+        // 将 作业区-圈 添加到图层中
+        graphicLayers.addGraphic(dfence_CircleGraphic);
+        // 数据
+        area_dfence_CircleGraphicData.push(dfence_CircleGraphic);
+      }
+      // 地图作业区域-限飞区-多边形
+      if (item.type == 'nfz' && content.geometry.type == 'Polygon') {
+        let nfz_PolygonGraphic = new mars3d.graphic.PolygonEntity({
+          id: item.id,
+          positions: content.geometry.coordinates,
+          style: {
+            clampToGround: content.properties.clampToGround,
+            color: Cesium.Color.fromCssColorString(content.properties.color + '33'),
+            outline: true,
+            outlineStyle: {
+              width: 12,
+              materialType: mars3d.MaterialType.LineCross,
+              materialOptions: {
+                background: true,
+                backgroundColor: '#ffffff',
+                color: Cesium.Color.fromCssColorString(content.properties.color),
+                dashLength: 36,
+                maskLength: 10,
+                centerPower: 0.1,
+                dashPower: 0.2,
+              },
+            },
+            label: {
+              text: `${item.name}`,
+              font_size: 16,
+              color: '#000000',
+              outline: true,
+              outlineColor: '#ffffff',
+              outlineWidth: 6,
+              verticalOrigin: Cesium.VerticalOrigin.CENTER,
+              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            },
+          },
+        });
+        // 监听mouseover事件
+        nfz_PolygonGraphic.on(mars3d.EventType.mouseOver, function () {
+          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
+            nfz_PolygonGraphic.setStyle({
+              label: {
+                color: content.properties.color,
+              },
+            });
+          }
+        });
+        // 监听mouseout事件
+        nfz_PolygonGraphic.on(mars3d.EventType.mouseOut, function () {
+          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
+            nfz_PolygonGraphic.setStyle({
+              label: {
+                color: '#000000',
+              },
+            });
+          }
+        });
+        // 监听点击事件
+        nfz_PolygonGraphic.on(mars3d.EventType.click, function () {
+          // 全部恢复默认
+          areaRestoreDefault();
+          nfz_PolygonGraphic.setStyle({
+            label: {
+              color: content.properties.color,
+            },
+          });
+          emits('setNowShowAreaData', item);
+        });
+        // 将 作业区-圈 添加到图层中
+        graphicLayers.addGraphic(nfz_PolygonGraphic);
+        // 数据
+        area_nfz_PolygonGraphicData.push(nfz_PolygonGraphic);
+      }
+      // 地图作业区域-限飞区-圈
+      if (item.type == 'nfz' && content.geometry.type == 'Circle') {
+        let nfz_CircleGraphic = new mars3d.graphic.CircleEntity({
+          id: item.id,
+          position: content.geometry.coordinates,
+          style: {
+            clampToGround: content.properties.clampToGround,
+            radius: content.geometry.radius,
+            color: Cesium.Color.fromCssColorString(content.properties.color + '33'),
+            outline: true,
+            outlineStyle: {
+              width: 12,
+              materialType: mars3d.MaterialType.LineCross,
+              materialOptions: {
+                background: true,
+                backgroundColor: '#ffffff',
+                color: Cesium.Color.fromCssColorString(content.properties.color),
+                dashLength: 36,
+                maskLength: 10,
+                centerPower: 0.1,
+                dashPower: 0.2,
+              },
+            },
+            label: {
+              text: `${item.name}`,
+              font_size: 16,
+              color: '#000000',
+              outline: true,
+              outlineColor: '#ffffff',
+              outlineWidth: 6,
+              verticalOrigin: Cesium.VerticalOrigin.CENTER,
+              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            },
+          },
+        });
+        // 监听mouseover事件
+        nfz_CircleGraphic.on(mars3d.EventType.mouseOver, function () {
+          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
+            nfz_CircleGraphic.setStyle({
+              label: {
+                color: content.properties.color,
+              },
+            });
+          }
+        });
+        // 监听mouseout事件
+        nfz_CircleGraphic.on(mars3d.EventType.mouseOut, function () {
+          if (!props.nowShowAreaData || props.nowShowAreaData.id !== item.id) {
+            nfz_CircleGraphic.setStyle({
+              label: {
+                color: '#000000',
+              },
+            });
+          }
+        });
+        // 监听点击事件
+        nfz_CircleGraphic.on(mars3d.EventType.click, function () {
+          // 全部恢复默认
+          areaRestoreDefault();
+          nfz_CircleGraphic.setStyle({
+            label: {
+              color: content.properties.color,
+            },
+          });
+          emits('setNowShowAreaData', item);
+        });
+        // 将 限飞区-圈 添加到图层中
+        graphicLayers.addGraphic(nfz_CircleGraphic);
+        // 数据
+        area_nfz_CircleGraphicData.push(nfz_CircleGraphic);
+      }
+    });
+  }
+  // 地图作业区域-恢复默认
+  function areaRestoreDefault() {
+    // 作业区-多边形-恢复默认
+    for (let i = 0; i < area_noland_LineStringGraphicData.length; i++) {
+      let nolandLineGraphic = area_noland_LineStringGraphicData[i];
+      nolandLineGraphic.setStyle({
+        label: {
+          color: '#000000',
+        },
+      });
+    }
+    // 作业区-多边形-恢复默认
+    for (let i = 0; i < area_dfence_PolygonGraphicData.length; i++) {
+      let dfence_PolygonGraphic = area_dfence_PolygonGraphicData[i];
+      dfence_PolygonGraphic.setStyle({
+        label: {
+          color: '#000000',
+        },
+      });
+    }
+    // 作业区-圈-恢复默认
+    for (let i = 0; i < area_dfence_CircleGraphicData.length; i++) {
+      let dfence_CircleGraphic = area_dfence_CircleGraphicData[i];
+      dfence_CircleGraphic.setStyle({
+        label: {
+          color: '#000000',
+        },
+      });
+    }
+    // 限飞区-多边形-恢复默认
+    for (let i = 0; i < area_nfz_PolygonGraphicData.length; i++) {
+      let nfz_PolygonGraphic = area_nfz_CircleGraphicData[i];
+      nfz_PolygonGraphic.setStyle({
+        label: {
+          color: '#000000',
+        },
+      });
+    }
+    // 限飞区-圈-恢复默认
+    for (let i = 0; i < area_nfz_CircleGraphicData.length; i++) {
+      let nfz_CircleGraphic = area_nfz_CircleGraphicData[i];
+      nfz_CircleGraphic.setStyle({
+        label: {
+          color: '#000000',
+        },
+      });
+    }
+  }
+
+  // 地图绘制--------------------------------------------------------------------
+  const mapDrawFlag = ref(false);
+  const mapDrawType: any = ref('');
+  const drawColorPoint = ref('#2D8CF0');
+  const drawColorPolyline = ref('#2D8CF0');
+  const drawColorPolygon = ref('#2D8CF0');
+  const drawColorCricle = ref('#2D8CF0');
+
+  // 地图绘制-点
+  async function drawPoint() {
+    if (mapDrawType.value == 'drawPoint') {
+      mapDrawType.value = '';
+      return;
+    }
+    mapDrawType.value = 'drawPoint';
+    const graphic = await graphicLayers.startDraw({
+      type: 'billboardP',
+      style: {
+        image: 'https://data.mars3d.cn/img/marker/mark-red.png',
+        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+        label: {
+          text: '可以同时支持文字',
+          font_size: 26,
+          color: drawColorPoint.value,
+          outline: true,
+          outlineColor: '#000000',
+          pixelOffsetY: -60,
+        },
+      },
+    });
+    console.log('标绘完成', graphic.toJSON());
+  }
+  // 地图绘制-线
+  async function drawPolyline() {
+    if (mapDrawType.value == 'drawPolyline') {
+      mapDrawType.value = '';
+      return;
+    }
+    mapDrawType.value = 'drawPolyline';
+    const graphic = await graphicLayers.startDraw({
+      type: 'polylineP',
+      style: {
+        pixelSize: 12,
+        color: '#3388ff',
+        label: {
+          text: '可以同时支持文字',
+          font_size: 20,
+          color: '#ffffff',
+          outline: true,
+          outlineColor: '#000000',
+          pixelOffsetY: -20,
+        },
+      },
+    });
+    console.log('标绘完成', graphic.toJSON());
+  }
+  // 地图绘制-形状
+  async function drawPolygon() {
+    if (mapDrawType.value == 'drawPolygon') {
+      mapDrawType.value = '';
+      return;
+    }
+    mapDrawType.value = 'drawPolygon';
+    const graphic = await graphicLayers.startDraw({
+      type: 'polygonP',
+      style: {
+        color: '#ffff00',
+        opacity: 0.5,
+        outline: true,
+        outlineColor: '#ffffff',
+        outlineWidth: 2.0,
+      },
+    });
+    console.log('标绘完成', graphic.toJSON());
+  }
+  // 地图绘制-形状
+  async function drawCricle() {
+    if (mapDrawType.value == 'drawCricle') {
+      mapDrawType.value = '';
+      return;
+    }
+    mapDrawType.value = 'drawCricle';
+    const graphic = await graphicLayers.startDraw({
+      type: 'circleP',
+      style: {
+        color: '#ffff00',
+        opacity: 0.6,
+        outline: true,
+        outlineColor: '#ffffff',
+        outlineWidth: 2.0,
+      },
+    });
+    console.log('标绘完成', graphic.toJSON());
+  }
 
   // 图斑定位
   const handlerLocation = (lngLat) => {
@@ -799,10 +1580,60 @@
     handlerLocation,
   });
 </script>
-<style scoped>
+<style lang="less" scoped>
   .mars3d-container {
+    position: relative;
     width: 100%;
     height: 100%;
-    background: red;
+  }
+
+  .markButtons {
+    position: absolute;
+    display: flex;
+    flex-wrap: wrap;
+    top: 10%;
+    right: 1%;
+    width: 30px;
+    height: 123px;
+    gap: 1px;
+  }
+
+  .button_nochoose {
+    background: #ffffff;
+    z-index: 200;
+    width: 30px;
+    height: 30px;
+    // border-radius: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      border: 2px solid #2b85e4;
+      outline: 1px solid #2b85e4;
+    }
+  }
+  .button_choose {
+    background: linear-gradient(to bottom left, #2b85e4 10px, transparent 1px), #ffffff;
+    background-size:
+      100% 100%,
+      auto;
+    z-index: 200;
+    width: 30px;
+    height: 30px;
+    // border-radius: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: 2px solid #2b85e4;
+  }
+
+  .popoverClass {
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 3px;
   }
 </style>
diff --git a/src/views/demo/workmanagement/device/Airport/DeviceControl/index.vue b/src/views/demo/workmanagement/device/Airport/DeviceControl/index.vue
index 9c343e9..6a329ed 100644
--- a/src/views/demo/workmanagement/device/Airport/DeviceControl/index.vue
+++ b/src/views/demo/workmanagement/device/Airport/DeviceControl/index.vue
@@ -1,4 +1,78 @@
 <template>
+  <div class="setting-control-title">机场</div>
+  <div class="setting-control-list" style="gap: 0px;">
+    <div class="show-info-item">
+      <div class="info-value">{{ (props.deviceInfoList[props.controlSN].acc_time / 60 / 60 / 24).toFixed(1) }}天</div>
+      <div class="info-label">累计运行时长</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ props.deviceInfoList[props.controlSN].job_number }}次</div>
+      <div class="info-label">作业架次</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ (props.deviceInfoList[props.controlSN].position_state.gps_number + props.deviceInfoList[props.controlSN].position_state.rtk_number) }}个</div>
+      <div class="info-label">机场搜星</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ sourceTypeOptions[props.deviceInfoList[props.controlSN]?.rtcm_info?.source_type] || '--'}}</div>
+      <div class="info-label">标定状态</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ `${(props.deviceInfoList[props.controlSN].working_voltage / 1000).toFixed(1)}V` || '--'}}</div>
+      <div class="info-label">供电电压</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ qualityOptions[props.deviceInfoList[props.controlSN]?.network_state?.quality] || '--'}}</div>
+      <div class="info-label">网络</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ isConfiguredOptions[props.deviceInfoList[props.controlSN]?.alternate_land_point?.is_configured] || '--'}}</div>
+      <div class="info-label">备降点</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">--</div>
+      <div class="info-label">进离场航线</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ airConditionerStateOptions[props.deviceInfoList[props.controlSN]?.air_conditioner?.air_conditioner_state] || '--'}}</div>
+      <div class="info-label">空调状态</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ `${(props.deviceInfoList[props.controlSN]?.drone_battery_maintenance_info?.batteries[0].voltage / 1000).toFixed(1)}V` || '--' }}</div>
+      <div class="info-label">蓄电池电压</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ `${props.deviceInfoList[props.controlSN]?.drone_battery_maintenance_info?.batteries[0].temperature}℃` || '--' }}</div>
+      <div class="info-label">蓄电池温度</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ props.deviceInfoList[props.controlSN].temperature }}℃</div>
+      <div class="info-label">舱内温度</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ props.deviceInfoList[props.controlSN].humidity }}%RH</div>
+      <div class="info-label">舱内湿度</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ props.deviceInfoList[props.controlSN].environment_temperature }}℃</div>
+      <div class="info-label">舱外温度</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ rainfallOptions[props.deviceInfoList[props.controlSN].rainfall] }}</div>
+      <div class="info-label">雨量</div>
+    </div>
+    <div class="show-info-item">
+      <div class="info-value">{{ props.deviceInfoList[props.controlSN].wind_speed }}m/s</div>
+      <div class="info-label">风速</div>
+    </div>
+  </div>
+  <!-- <div class="setting-control-title">飞行器</div>
+  <div class="setting-control-list" style="gap: 0px;">
+    <div class="show-info-item">
+      <div class="info-value">{{ (props.deviceInfoList[props.controlSN].acc_time / 60 / 60 / 24).toFixed(1) }}天</div>
+      <div class="info-label">累计运行时长</div>
+    </div>
+  </div> -->
   <div class="open-control-div">
     <div class="control-content">
       <span class="open-title">远程调试</span>
@@ -233,9 +307,9 @@
       <div class="button-div">
         <a-button
           class="control-button"
-          @click="changeDeviceState(props.deviceInfoList[props.controlSN].drone_charge_state.state == 0? 'charge_open': 'charge_close')"
+          @click="changeDeviceState(props.deviceInfoList[props.controlSN]?.drone_charge_state?.state == 0? 'charge_open': 'charge_close')"
           :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
-          {{props.deviceInfoList[props.controlSN].drone_charge_state.state == 0? '充电': '停止'}}
+          {{props.deviceInfoList[props.controlSN]?.drone_charge_state?.state == 0? '充电': '停止'}}
         </a-button>
       </div>
     </div>
@@ -247,7 +321,7 @@
         <div>
           <div class="show-span">
             {{
-              fourgLinkStateOptions[props.deviceInfoList[props.controlSN].wireless_link["4g_link_state"]]
+              fourgLinkStateOptions[props.deviceInfoList[props.controlSN]?.wireless_link['4g_link_state']]
             }}
           </div>
           <div class="show-span">增强图传</div>
@@ -256,9 +330,9 @@
       <div class="button-div">
         <a-button
           class="control-button"
-          @click="changeDeviceState('sdr_workmode_switch',props.deviceInfoList[props.controlSN].wireless_link['4g_link_state'] == 0? 1: 0, 'link_workmode')"
+          @click="changeDeviceState('sdr_workmode_switch',props.deviceInfoList[props.controlSN]?.wireless_link['4g_link_state'] == 0? 1: 0, 'link_workmode')"
           :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
-          {{props.deviceInfoList[props.controlSN].wireless_link["4g_link_state"] == 0? '开启': '关闭'}}
+          {{props.deviceInfoList[props.controlSN]?.wireless_link['4g_link_state'] == 0? '开启': '关闭'}}
         </a-button>
       </div>
     </div>
@@ -315,7 +389,8 @@ import { clientPublish } from '@/utils/mqtt'
 import { buildGUID } from '@/utils/uuid';
 import Icon from '@/components/Icon/Icon.vue';
 import { modeCodeOptions, deviceOnlineStatusOptions, coverStateOptions, airConditionerStateOptions, silentModeOptions,
-   alarmStateOptions, droneChargeStateOptions, fourgLinkStateOptions, linkWorkmodeOptions } from './util'
+   alarmStateOptions, droneChargeStateOptions, fourgLinkStateOptions, linkWorkmodeOptions, sourceTypeOptions, qualityOptions,
+   isConfiguredOptions, rainfallOptions } from './util'
 const props = defineProps(['deviceInfoList', 'controlSN'])
 
 const openDebug = () => {
@@ -407,5 +482,23 @@ const changeDeviceState = (method, action?, type?) => {
       height: 30px;
     }
   }
+  .show-info-item{
+    width: 190px;
+    height: 79px;
+    .info-value{
+      display: flex;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 20px;
+    }
+    .info-label{
+      display: flex;
+      justify-content: center;
+      font-size: 14px;
+      line-height: 20px;
+      color: rgba(0,0,0,0.8);
+    }
+  }
 }
 </style>
diff --git a/src/views/demo/workmanagement/device/Airport/DeviceControl/util.ts b/src/views/demo/workmanagement/device/Airport/DeviceControl/util.ts
index 0253b72..f66c9c1 100644
--- a/src/views/demo/workmanagement/device/Airport/DeviceControl/util.ts
+++ b/src/views/demo/workmanagement/device/Airport/DeviceControl/util.ts
@@ -17,7 +17,7 @@ export const coverStateOptions = {
   3: '舱盖状态异常',
 }
 export const airConditionerStateOptions = {
-  0: '空闲模式(无制冷、制热、除湿等)',
+  0: '空闲模式',
   1: '制冷模式',
   2: '制热模式',
   3: '除湿模式',
@@ -53,4 +53,28 @@ export const fourgLinkStateOptions = {
 export const linkWorkmodeOptions = {
   0: 'SDR 模式',
   1: '4G 融合模式',
+}
+export const sourceTypeOptions = {
+  0: '未标定',
+  1: '自收敛标定',
+  2: '手动标定',
+  3: '网络RTK标定',
+}
+export const qualityOptions = {
+  0: '无信号',
+  1: '差',
+  2: '较差',
+  3: '一般',
+  4: '较好',
+  5: '好',
+}
+export const isConfiguredOptions = {
+  0: '未设置',
+  1: '已设置',
+}
+export const rainfallOptions = {
+  0: '无雨',
+  1: '小雨',
+  2: '中雨',
+  3: '大雨',
 }
\ No newline at end of file