From b19855820519282c1812664c1c3ae2d48a4965de Mon Sep 17 00:00:00 2001
From: helloxujingliang <3225043@qq.com>
Date: Fri, 17 May 2024 16:27:54 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=9B=BE=E5=B1=82=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E3=80=81=E5=9B=BE=E5=B1=82=E6=8E=A7=E5=88=B6=E3=80=81=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BE=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MapboxMaps/DataListComponent/index.vue    |  21 +-
 .../MapboxMaps/LayerComponent/index.vue       |  73 ++----
 src/components/MapboxMaps/MapboxMap.vue       | 190 +++++++++++++-
 .../MapboxMaps/Modal/ServeResource/index.vue  |  48 +++-
 src/components/MapboxMaps/Modal/index.vue     |  10 +-
 .../MapboxMaps/RightShowInfo/index.vue        |  20 +-
 src/components/MapboxMaps/Styles/Styles.ts    | 231 ++++++++++++++++++
 src/components/MapboxMaps/index.vue           |  10 +-
 8 files changed, 529 insertions(+), 74 deletions(-)
 create mode 100644 src/components/MapboxMaps/Styles/Styles.ts

diff --git a/src/components/MapboxMaps/DataListComponent/index.vue b/src/components/MapboxMaps/DataListComponent/index.vue
index 4afdf7be..45ab0d9e 100644
--- a/src/components/MapboxMaps/DataListComponent/index.vue
+++ b/src/components/MapboxMaps/DataListComponent/index.vue
@@ -3,8 +3,12 @@
     <a-table :columns="columns" :data-source="dataSource" :pagination="false" :bordered="true">
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'operation'">
-          <a-button class="operation-button" shape="round">
-            操作
+          <a-button class="operation-button" shape="round" @click="handlerLocation(record)">
+            定位
+          </a-button>
+
+          <a-button class="operation-button" shape="round" @click="handlerEdit(record)">
+            编辑
           </a-button>
         </template>
       </template>
@@ -14,8 +18,10 @@
 
 <script setup lang="ts">
 import { DeleteOutlined } from '@ant-design/icons-vue'
-import { h } from "vue"
+import { h,defineEmits } from "vue"
 import './index.scss'
+
+const emits = defineEmits(["handlerLocation","handlerEdit"])
 const columns = [
   {
     title: '位置',
@@ -57,6 +63,15 @@ const dataSource = [
     is_del: '上海市普陀区金沙江路 1516 弄',
   },
 ]
+
+const handlerLocation = () => {
+  emits("handlerLocation",[118.630881,35.800163])
+}
+
+const handlerEdit = () => {
+  emits("handlerEdit")
+}
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/MapboxMaps/LayerComponent/index.vue b/src/components/MapboxMaps/LayerComponent/index.vue
index b05a6c77..d7763fa1 100644
--- a/src/components/MapboxMaps/LayerComponent/index.vue
+++ b/src/components/MapboxMaps/LayerComponent/index.vue
@@ -13,8 +13,8 @@
     </div>
     <div class="show-layers">
       <div :class="`show-layer-item ${isSelected === item.id ? 'select-list-item': ''}`" 
-        v-for="item in dataList" :key='item.id' @click="selectLayer(item.id)">
-        <a-checkbox v-model:checked="item.checked"/>
+        v-for="item in layerList" :key='item.id' @click="selectLayer(item.id)">
+        <a-checkbox v-model:checked="item.checked" @change="handlerCheckboxChange(item)" />
         <a-image
           :width="119"
           :height="87"
@@ -25,7 +25,7 @@
         <div class="layer-item-text">
           <div class="item-title">名称： {{ item.name }}</div>
           <div class="item-control">
-            <a-button type="primary" size="small" style="background-color:#09B66D;margin-right: 7px;">查看数据</a-button>
+            <a-button type="primary" size="small" style="background-color:#09B66D;margin-right: 7px;" @click="handlerPreviewLayer(item)">查看数据</a-button>
             <a-button type="primary" size="small" style="background-color: #0081FF;">操作</a-button>
           </div>
         </div>
@@ -36,52 +36,19 @@
 
 <script setup lang="ts">
 import { PlusOutlined } from '@ant-design/icons-vue'
-import { h, defineEmits, ref } from "vue"
+import { h, defineEmits, ref,defineProps } from "vue"
 import { errorImage } from "../util.ts"
-const dataList = ref([
-  {
-    id:1,
-    name:"111",
-    checked:true,
-  },
-  {
-    id:2,
-    name:"222",
-    checked:false,
-  },
-  {
-    id:3,
-    name:"333",
-    checked:false,
-  },
-  {
-    id:4,
-    name:"444",
-    checked:false,
-  },
-  {
-    id:5,
-    name:"555",
-    checked:false,
-  },
-  {
-    id:6,
-    name:"666",
-    checked:false,
-  },
-  {
-    id:7,
-    name:"777",
-    checked:false,
-  },
-  {
-    id:8,
-    name:"888",
-    checked:false,
-  },
-])
+const dataList = ref([])
 const isSelected = ref()
-const emits = defineEmits(["changeOpenModal","changeOpenInsertShpModal"])
+const props = defineProps({
+  layerList:{
+    type: Array,
+    required: true,
+    default: []
+  }
+})
+
+const emits = defineEmits(["changeOpenModal","changeOpenInsertShpModal","handlerPreviewLayer"])
 const changeClick = () => {
   emits("changeOpenModal",true)
 }
@@ -91,6 +58,18 @@ const openInsertShpModal = () => {
 const selectLayer = (id:number) => {
   isSelected.value = id
 }
+
+// 叠加与定位图层
+const handlerCheckboxChange = (item) => {
+  handlerPreviewLayer(item)
+}
+
+const handlerPreviewLayer = (item)=>{
+  emits("handlerPreviewLayer",item);
+}
+
+
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/MapboxMaps/MapboxMap.vue b/src/components/MapboxMaps/MapboxMap.vue
index bb6f41ff..ca956257 100644
--- a/src/components/MapboxMaps/MapboxMap.vue
+++ b/src/components/MapboxMaps/MapboxMap.vue
@@ -11,12 +11,12 @@
       />
       <img v-show="nextMapControl.length > 0" @click="handlerUnDraw" src="/del.png" title="清除" />
     </div> -->
-    <LayerComponent @changeOpenModal="changeOpenModal" @changeOpenInsertShpModal="changeOpenInsertShpModal"/>
+    <LayerComponent @changeOpenModal="changeOpenModal" @changeOpenInsertShpModal="changeOpenInsertShpModal" :layerList="layerList" @handlerPreviewLayer="handlerPreviewLayer"/>
     <LayerControl />
-    <UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal"/>
+    <UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal" @handlerAddToLayerList="handlerAddToLayerList"/>
     <InsertShp v-model:openModal="insertShpModal" />
-    <DataListComponent />
-    <RightShowInfo />
+    <DataListComponent @handlerLocation="handlerLocation" @handlerEdit="handlerEdit"/>
+    <RightShowInfo :isOpen="isOpen" @handlerClose="handlerClose" />
   </div>
 </template>
   
@@ -42,6 +42,9 @@
         SnapModeDrawStyles,
         SnapDirectSelect,
     } from "mapbox-gl-draw-snap-mode";
+    
+    import {customDrawStyles} from './Styles/Styles'
+
     import LayerComponent from './LayerComponent/index.vue'
     import LayerControl from './LayerControl/index.vue'
     import UseModal from './Modal/index.vue'
@@ -49,6 +52,44 @@
     import DataListComponent from './DataListComponent/index.vue'
     import RightShowInfo from './RightShowInfo/index.vue'
 
+    const isOpen = ref(false)
+    const layerList = reactive([
+        {
+                id:1,
+                name:"沂水县道路中心线",
+                checked:false,
+                layer:{
+                    'id': 'roadnetLine1',
+                    'type': 'line',
+                    'source': {
+                        type: 'vector',
+                        tiles: [ 'http://192.168.10.102:9020/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=yishuixian&X-Token=1ded3fe7'],
+                        minzoom: 1,
+                        maxzoom: 20
+                    },
+                    "source-layer": "yishuixian",
+                    'layout': {
+                        'line-join': 'round',
+                        'line-cap': 'round'
+                    },
+                    'paint': {
+                        'line-color': [
+                        "case",
+                        ["==", ["get", "handle_status_id"], 0],
+                        "#E6A23C",
+                        ["==", ["get", "handle_status_id"], 1],
+                        "#409EFF",
+                        ["==", ["get", "handle_status_id"], 2],
+                        "#67C23A",
+                        // 默认
+                        "#67C23A",
+                        ],
+                        'line-width': 1
+                    }
+                }
+            }
+    ])
+
     const openModal = ref(false);
     const insertShpModal = ref(false)
     const changeOpenModal = (value) => {
@@ -98,9 +139,10 @@
         // emit('mapOnLoad', map);
 
         // 初始化绘图空间
-        handlerInitDrawTool();
+        // handlerInitDrawTool();
 
         map.on("click",(e)=>{
+            handlerPreviewFeatureInfo(e);
             clickPoisition = e.lngLat
         })
 
@@ -110,7 +152,6 @@
 
         window.handlerCopyFeature = handlerCopyFeature;
 
-
       });
     });
     // 销毁地图
@@ -166,7 +207,6 @@
     
     // 初始化绘图空间
     const handlerInitDrawTool = () => {
-
         let drawTool = new MapboxDraw({
             modes: {
                 ...MapboxDraw.modes,
@@ -176,7 +216,7 @@
                 direct_select: SnapDirectSelect,
             },
           // Styling guides
-            styles: SnapModeDrawStyles,
+            styles: customDrawStyles,
             userProperties: true,
             // Config snapping features
             snap: true,
@@ -185,7 +225,7 @@
                 snapToMidPoints: true, // defaults to false
                 snapVertexPriorityDistance: 0.0025, // defaults to 1.25
             },
-            guides: true,
+            guides: false,
         });
 
         map.addControl(drawTool, "top-right");
@@ -215,16 +255,144 @@
             ).addTo(map);
             
         }else{
-        
             popup.remove();
         }
     }
 
     const handlerCopyFeature = () => {
-        console.log(selectFeature)
+        console.log("selectFeature",selectFeature);
         popup.remove();
         createMessage.success("复制成功！")
     }
+
+    // 添加到图层
+    const handlerAddToLayerList = (layer) => {
+        handlerCheckLayerExist(layer);
+    }
+
+    // 判断图层列表中是否一定添加
+    const handlerCheckLayerExist = (layer) =>{
+
+        for(let i=0;i<layerList.length;i++){
+            if(layerList[i] == layer.id){
+                return;
+            }
+        }
+        layerList.push(layer);
+    }
+
+
+    // 控制图层是否显示
+    const handlerPreviewLayer = (layer) => {
+        handlerLayerControler(layer)
+    }
+
+    // 图层控制中心
+    const handlerLayerControler = (layerInfo)=>{
+        console.log("layerinfoinfo",layerInfo)
+        if(map.getSource(layerInfo.layer.id)){
+            if(layerInfo.checked){
+                map.setLayoutProperty(layerInfo.layer.id, "visibility", "visible");     
+            }else{
+                map.setLayoutProperty(layerInfo.layer.id, "visibility", "none");     
+            }
+        }else{
+            map.addLayer(layerInfo.layer)
+            map.on("click",layerInfo.layer.id,function(e){
+                handlerPreviewFeatureInfo(e);
+            })
+        }
+    }
+
+    // 查看列表数据
+    const handlerDataList = () => {
+
+    }
+
+    // 图斑属性查看
+    const handlerPreviewFeatureInfo = (e) => {
+        if(e.features){
+            console.log("EEEEEEE",e.features[0].layer.id,e.features[0].properties);
+            isOpen.value = true;
+        }
+    }
+
+    const handlerClose = (e) => {
+        isOpen.value = e;
+    }
+
+
+    // 图斑定位
+    const handlerLocation = (lngLat) => {
+        map.flyTo({
+          center: lngLat,
+          zoom: 16,
+          speed: 10, // 飞行速度
+          curve: 1, // 飞行曲线
+          easing(t) {
+            // 飞行动画函数
+            return t;
+          },
+        });
+    }
+
+    // 编辑图斑
+    const handlerEdit = (info) => {
+        initDraw(info);
+    }
+
+    const initDraw = (layerInfo)=> {
+        // 实例化绘图工具
+
+        let drawTool = new MapboxDraw({
+          modes: {
+            ...MapboxDraw.modes,
+            draw_point: SnapPointMode,
+            draw_polygon: SnapPolygonMode,
+            draw_line_string: SnapLineMode,
+            direct_select: SnapDirectSelect,
+          },
+          styles: customDrawStyles,
+          userProperties: true,
+          snap: true,
+          snapOptions: {
+            snapPx: 15, // defaults to 15
+            snapToMidPoints: true, // defaults to false
+            snapVertexPriorityDistance: 0.0025, // defaults to 1.25
+          },
+          guides: false,
+        });
+
+        map.addControl(drawTool, "top-right");
+       
+        // let geojson:Object = {};
+        // if (layerInfo.dataType == "面") {
+        //     geojson.type = "Polygon";
+        //     geojson.coordinates = geojson.coordinates[0];
+        // } else if (layerInfo.dataType == "点") {
+        //     geojson.type = "Point";
+        //     geojson.coordinates = geojson.coordinates;
+        // } else if (layerInfo.dataType == "线") {
+        //   geojson.type = "LineString";
+        //   geojson.coordinates = geojson.coordinates[0];
+        // }
+        // if (formData.lat && formData.lng) {
+        //   formData.lat = geojson.coordinates[1];
+        //   formData.lng = geojson.coordinates[0];
+        // }
+        // geojson = {
+        //   type: "FeatureCollection",
+        //   features: [
+        //     {
+        //       type: "Feature",
+        //       geometry: geojson,
+        //     },
+        //   ],
+        // };
+        // map.setLayoutProperty("pbfLayer", "visibility", "none");
+        // drawTool.set(geojson);
+      }
+
   </script>
 
 <style>
diff --git a/src/components/MapboxMaps/Modal/ServeResource/index.vue b/src/components/MapboxMaps/Modal/ServeResource/index.vue
index 505e4591..6347d727 100644
--- a/src/components/MapboxMaps/Modal/ServeResource/index.vue
+++ b/src/components/MapboxMaps/Modal/ServeResource/index.vue
@@ -39,7 +39,7 @@
             <a-button type="primary" style="background-color:#09B66D;margin-right: 10px">
               编辑 
             </a-button>
-            <a-button type="primary">
+            <a-button type="primary" @click="handlerAddToLayerList">
               <template #icon>
                 <PlusOutlined />
               </template>
@@ -84,10 +84,13 @@
 <script setup lang="ts">
 import { PlusOutlined } from '@ant-design/icons-vue'
 import { errorImage } from '../../util.js'
-import { ref } from "vue"
+import { ref,defineEmits } from "vue"
 import MapboxMap from '@/components/MapboxMaps/index.vue'
 import { DrawingType } from '@/enums/mapEnum';
+import { useMessage } from '@/hooks/web/useMessage';
+const { createMessage } = useMessage();
 
+const emits = defineEmits(["handlerAddToLayerList"])
 const data = ref('vector-data')
 const sort = ref('default')
 const key = ref('')
@@ -142,6 +145,47 @@ const showInfo = () => {
   jsonData.value = JSON.stringify(data, null, 4);
   console.log(jsonData.value)
 }
+
+// 添加到图层
+const handlerAddToLayerList = (item) => {
+  let layerInfo = {
+                id:parseInt(10*Math.random()),
+                name:parseInt(10000000*Math.random()).toString(),
+                checked:false,
+                layer:{
+                    'id': 'roadnetLine'+parseInt(10000000*Math.random()).toString(),
+                    'type': 'line',
+                    'source': {
+                        type: 'vector',
+                        tiles: [ 'http://192.168.10.102:9020/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=yishuixian&X-Token=1ded3fe7'],
+                        minzoom: 1,
+                        maxzoom: 20
+                    },
+                    "source-layer": "yishuixian",
+                    'layout': {
+                        'line-join': 'round',
+                        'line-cap': 'round'
+                    },
+                    'paint': {
+                        'line-color': [
+                        "case",
+                        ["==", ["get", "handle_status_id"], 0],
+                        "#E6A23C",
+                        ["==", ["get", "handle_status_id"], 1],
+                        "#409EFF",
+                        ["==", ["get", "handle_status_id"], 2],
+                        "#67C23A",
+                        // 默认
+                        "#67C23A",
+                        ],
+                        'line-width': 1
+                    }
+                }
+            }
+  createMessage.success("图层已添加到工作区！")
+  emits("handlerAddToLayerList",layerInfo);
+
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/MapboxMaps/Modal/index.vue b/src/components/MapboxMaps/Modal/index.vue
index b3abefe6..fe741696 100644
--- a/src/components/MapboxMaps/Modal/index.vue
+++ b/src/components/MapboxMaps/Modal/index.vue
@@ -4,7 +4,9 @@
         <CloseCircleOutlined />
       </template>
       <a-tabs v-model:activeKey="activeKey">
-        <a-tab-pane key="1" tab="服务资源" ><ServeResource /></a-tab-pane>
+        <a-tab-pane key="1" tab="服务资源" >
+          <ServeResource @handlerAddToLayerList="handlerAddToLayerList"  />
+        </a-tab-pane>
         <!-- <a-tab-pane key="2" tab="第三方服务"><ThirdPartyServe /></a-tab-pane>
         <a-tab-pane key="3" tab="离线文件"><OfflineFile /></a-tab-pane> -->
       </a-tabs>
@@ -19,8 +21,12 @@ import ThirdPartyServe from './ThirdPartyServe/index.vue'
 import OfflineFile from './OfflineFile/index.vue'
 import './index.scss'
 const props = defineProps(['openModal'])
-const emits = defineEmits(['changeOpenModal','update:openModal'])
+const emits = defineEmits(['changeOpenModal','update:openModal','handlerAddToLayerList'])
 const activeKey = ref('1')
+
+const handlerAddToLayerList = (item) => {
+  emits("handlerAddToLayerList",item)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/MapboxMaps/RightShowInfo/index.vue b/src/components/MapboxMaps/RightShowInfo/index.vue
index 4cb08304..57343ab0 100644
--- a/src/components/MapboxMaps/RightShowInfo/index.vue
+++ b/src/components/MapboxMaps/RightShowInfo/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-drawer class="right-show-info" placement="right" :open="open" @close="()=>open=false">
+  <a-drawer class="right-show-info" placement="right"  :open="isOpen" @close="handlerClose">
     <div class="title">
       <div class="tag"></div>
       <div class="title-text">操作</div>
@@ -16,9 +16,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref,defineProps,defineEmits } from "vue"
 import './index.scss'
-const open = ref(true)
+
+const props = defineProps({
+  isOpen:{
+    type:Boolean,
+    default:false
+  }
+})
+
+const emits = defineEmits(['handlerClose'])
+
+const handlerClose = () => {
+  emits("handlerClose",false)
+}
+
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/MapboxMaps/Styles/Styles.ts b/src/components/MapboxMaps/Styles/Styles.ts
new file mode 100644
index 00000000..790eea59
--- /dev/null
+++ b/src/components/MapboxMaps/Styles/Styles.ts
@@ -0,0 +1,231 @@
+let customDrawStyles = [{
+	"id": "gl-draw-polygon-fill-inactive",
+	"type": "fill",
+	"filter": ["all", ["==", "active", "false"],
+		["==", "$type", "Polygon"],
+		["!=", "mode", "static"]
+	],
+	"paint": {
+		"fill-color": "#3bb2d0",
+		"fill-outline-color": "#6495ed",
+		"fill-opacity": 0.5
+	}
+}, {
+	"id": "gl-draw-polygon-fill-active",
+	"type": "fill",
+	"filter": ["all", ["==", "active", "true"],
+		["==", "$type", "Polygon"]
+	],
+	"paint": {
+		"fill-color": "#fbb03b",
+		"fill-outline-color": "#fbb03b",
+		"fill-opacity": 0.5
+	}
+}, {
+	"id": "gl-draw-polygon-midpoint",
+	"type": "circle",
+	"filter": ["all", ["==", "$type", "Point"],
+		["==", "meta", "midpoint"]
+	],
+	"paint": {
+		"circle-radius": 3,
+		"circle-color": "#fbb03b"
+	}
+}, {
+	"id": "gl-draw-polygon-stroke-inactive",
+	"type": "line",
+	"filter": ["all", ["==", "active", "false"],
+		["==", "$type", "Polygon"],
+		["!=", "mode", "static"]
+	],
+	"layout": {
+		"line-cap": "round",
+		"line-join": "round"
+	},
+	"paint": {
+		"line-color": "#3bb2d0",
+		"line-width": 2
+	}
+}, {
+	"id": "gl-draw-polygon-stroke-active",
+	"type": "line",
+	"filter": ["all", ["==", "active", "true"],
+		["==", "$type", "Polygon"]
+	],
+	"layout": {
+		"line-cap": "round",
+		"line-join": "round"
+	},
+	"paint": {
+		"line-color": "#fbb03b",
+		"line-dasharray": [0.2, 2],
+		"line-width": 2
+	}
+}, {
+	"id": "gl-draw-line-inactive",
+	"type": "line",
+	"filter": ["all", ["==", "active", "false"],
+		["==", "$type", "LineString"],
+		["!=", "mode", "static"],
+		["!=", "user_isSnapGuide", "true"]
+	],
+	"layout": {
+		"line-cap": "round",
+		"line-join": "round"
+	},
+	"paint": {
+		"line-color": "#3bb2d0",
+		"line-width": 2
+	}
+}, {
+	"id": "gl-draw-line-active",
+	"type": "line",
+	"filter": ["all", ["==", "$type", "LineString"],
+		["==", "active", "true"]
+	],
+	"layout": {
+		"line-cap": "round",
+		"line-join": "round"
+	},
+	"paint": {
+		"line-color": "#fbb03b",
+		"line-dasharray": [0.2, 2],
+		"line-width": 2
+	}
+}, {
+	"id": "gl-draw-polygon-and-line-vertex-stroke-inactive",
+	"type": "circle",
+	"filter": ["all", ["==", "meta", "vertex"],
+		["==", "$type", "Point"],
+		["!=", "mode", "static"]
+	],
+	"paint": {
+		"circle-radius": 5,
+		"circle-color": "#fff"
+	}
+}, {
+	"id": "gl-draw-polygon-and-line-vertex-inactive",
+	"type": "circle",
+	"filter": ["all", ["==", "meta", "vertex"],
+		["==", "$type", "Point"],
+		["!=", "mode", "static"]
+	],
+	"paint": {
+		"circle-radius": 3,
+		"circle-color": "#fbb03b"
+	}
+}, {
+	"id": "gl-draw-point-point-stroke-inactive",
+	"type": "circle",
+	"filter": ["all", ["==", "active", "false"],
+		["==", "$type", "Point"],
+		["==", "meta", "feature"],
+		["!=", "mode", "static"]
+	],
+	"paint": {
+		"circle-radius": 5,
+		"circle-opacity": 1,
+		"circle-color": "#fff"
+	}
+}, {
+	"id": "gl-draw-point-inactive",
+	"type": "circle",
+	"filter": ["all", ["==", "active", "false"],
+		["==", "$type", "Point"],
+		["==", "meta", "feature"],
+		["!=", "mode", "static"]
+	],
+	"paint": {
+		"circle-radius": 3,
+		"circle-color": "#3bb2d0"
+	}
+}, {
+	"id": "gl-draw-point-stroke-active",
+	"type": "circle",
+	"filter": ["all", ["==", "$type", "Point"],
+		["==", "active", "true"],
+		["!=", "meta", "midpoint"]
+	],
+	"paint": {
+		"circle-radius": 7,
+		"circle-color": "#fff"
+	}
+}, {
+	"id": "gl-draw-point-active",
+	"type": "circle",
+	"filter": ["all", ["==", "$type", "Point"],
+		["!=", "meta", "midpoint"],
+		["==", "active", "true"]
+	],
+	"paint": {
+		"circle-radius": 5,
+		"circle-color": "#fbb03b"
+	}
+}, {
+	"id": "gl-draw-polygon-fill-static",
+	"type": "fill",
+	"filter": ["all", ["==", "mode", "static"],
+		["==", "$type", "Polygon"]
+	],
+	"paint": {
+		"fill-color": "#404040",
+		"fill-outline-color": "#404040",
+		"fill-opacity": 0.1
+	}
+}, {
+	"id": "gl-draw-polygon-stroke-static",
+	"type": "line",
+	"filter": ["all", ["==", "mode", "static"],
+		["==", "$type", "Polygon"]
+	],
+	"layout": {
+		"line-cap": "round",
+		"line-join": "round"
+	},
+	"paint": {
+		"line-color": "#404040",
+		"line-width": 2
+	}
+}, {
+	"id": "gl-draw-line-static",
+	"type": "line",
+	"filter": ["all", ["==", "mode", "static"],
+		["==", "$type", "LineString"]
+	],
+	"layout": {
+		"line-cap": "round",
+		"line-join": "round"
+	},
+	"paint": {
+		"line-color": "#404040",
+		"line-width": 2
+	}
+}, {
+	"id": "gl-draw-point-static",
+	"type": "circle",
+	"filter": ["all", ["==", "mode", "static"],
+		["==", "$type", "Point"]
+	],
+	"paint": {
+		"circle-radius": 5,
+		"circle-color": "#404040"
+	}
+}, {
+	"id": "guide",
+	"type": "line",
+	"filter": ["all", ["==", "$type", "LineString"],
+		["==", "user_isSnapGuide", "true"]
+	],
+	"layout": {
+		"line-cap": "round",
+		"line-join": "round"
+	},
+	"paint": {
+		"line-color": "#c00c00",
+		"line-width": 1,
+		"line-dasharray": [5, 5]
+	}
+}]
+
+
+export {customDrawStyles}
\ No newline at end of file
diff --git a/src/components/MapboxMaps/index.vue b/src/components/MapboxMaps/index.vue
index 75f6ac47..d968aed8 100644
--- a/src/components/MapboxMaps/index.vue
+++ b/src/components/MapboxMaps/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="map-container">
-    <div :id="`mapContainer-${id}`" class="map-box"></div>
+    <div id="mapContainerComponent" class="map-box"></div>
     <div class="map-control">
       <img
         v-for="(item, index) in nextMapControl"
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, onUnmounted, defineProps, reactive, ref, h } from 'vue';
+  import { onMounted, onUnmounted, defineProps, reactive } from 'vue';
   import mapboxgl, { Map } from 'mapbox-gl';
   import U from 'mapbox-gl-utils';
   import 'mapbox-gl/dist/mapbox-gl.css';
@@ -23,8 +23,7 @@
   import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';
   import { MP } from './src/MP';
   import { DrawingType } from '@/enums/mapEnum';
-  import { v4 as uuidv4 } from 'uuid';
-  const id = uuidv4()
+
   // map参数类型
   interface MapboxOptionsInterface {
     mapOptions: mapboxgl.MapboxOptions;
@@ -39,7 +38,6 @@
         return MapControlConfig[item];
       })
     : [];
-  console.log('nextMapControl::: ', nextMapControl);
 
   // 定义地图容器
   let map: Map;
@@ -66,7 +64,7 @@
   // 返回地图实例
   const initMap = () => {
     return new mapboxgl.Map({
-      container: `mapContainer-${id}`,
+      container: 'mapContainerComponent',
       language: 'zh-cmn',
       projection: 'equirectangular', // wgs84参考系
       style: MapboxDefaultStyle,

From 8308554ab0c69af47e0857d22b91a3d22f089bbc Mon Sep 17 00:00:00 2001
From: helloxujingliang <3225043@qq.com>
Date: Sat, 18 May 2024 16:35:24 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E7=BB=98=E5=9B=BE?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 public/combine.png                            | Bin 4468 -> 612 bytes
 public/del.png                                | Bin 4400 -> 409 bytes
 public/iocn/combine.png                       | Bin 0 -> 4468 bytes
 public/iocn/del.png                           | Bin 0 -> 4400 bytes
 public/iocn/line.png                          | Bin 0 -> 4258 bytes
 public/iocn/point.png                         | Bin 0 -> 4234 bytes
 public/iocn/polygon.png                       | Bin 0 -> 4501 bytes
 public/iocn/uncombine.png                     | Bin 0 -> 4474 bytes
 public/line.png                               | Bin 4258 -> 452 bytes
 public/point.png                              | Bin 4234 -> 638 bytes
 public/polygon.png                            | Bin 4501 -> 422 bytes
 public/uncombine.png                          | Bin 4474 -> 401 bytes
 src/components/MapboxMaps/MapComponent.vue    | 543 ++++++++++++++++++
 .../MapboxMaps/src/WktGeojsonTransform.ts     |  11 +
 src/views/dashboard/analysis/index.vue        |  97 +++-
 16 files changed, 643 insertions(+), 9 deletions(-)
 create mode 100644 public/iocn/combine.png
 create mode 100644 public/iocn/del.png
 create mode 100644 public/iocn/line.png
 create mode 100644 public/iocn/point.png
 create mode 100644 public/iocn/polygon.png
 create mode 100644 public/iocn/uncombine.png
 create mode 100644 src/components/MapboxMaps/MapComponent.vue
 create mode 100644 src/components/MapboxMaps/src/WktGeojsonTransform.ts

diff --git a/package.json b/package.json
index 33bf4a6f..7892f019 100644
--- a/package.json
+++ b/package.json
@@ -102,6 +102,7 @@
     "mapbox-gl-utils": "^0.44.0",
     "@mapbox/mapbox-gl-draw": "^1.4.1",
     "mapbox-gl-draw-snap-mode": "^0.2.0",
+    "terraformer-wkt-parser": "^1.2.1",
     "mars3d": "^3.7.0",
     "mars3d-cesium": "^1.113.0",
     "min-dash": "^4.2.1",
diff --git a/public/combine.png b/public/combine.png
index 388a91d4d3184150e869e501bcdd40f90d5382a8..da08822ae7cfa2942b58b970176d358dab6d2bf6 100644
GIT binary patch
literal 612
zcmV-q0-ODbP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px%9!W$&R9HvtSFvu}Knx{y8asB(kbFkB82Ny9$j~kEM~Jb9qVeRKm!bK9AO<>g
z$v-4O^8wjA)MGv%K#RgBHZ*j`S&&Yrpg@YoUJT3k$Vc*#JRv;u2cOwL{96R9wfiD+
z6w8W;yvnldwR7&nXf(R@XJ@n7cL2CU#D^H(IX4-P#|wXEBLmEQ4FLOzWhsd0OwU?t
zKZ(dmB5qDZ!$t!7keQD=4847f^c?^UiD({RE)nroL@r`@k7*^)6@|6-qlla~5deUV
z=(=p_|Gh=HCGfH`Fr7|!!=9~Lu9pbahT`gWI=g_G1ppS#xj_i-Qv!8vjQOE<h-j~=
zD_XmNnH8w)H%O!s2%M|m*7l6HVH1fI0yXD1L^Nod2`d83d>I+RI{=W2$ZrujFvc9j
z29eJCD(xU5zYy`h#kmq2dICP((c$Hs+spI(s7|0-V!B7>Wm#TiS@tbq3a)gqE`e8T
z2sFkV>aJOhOvFJ^6gN#J2nlFZ)$cC=u!D%7m&@gOosbuHOoY0Wv@~nyZEaX5P@U7&
zuJ~O<JS~c1@}w^Ck$Z4T27<F|5=7J(Y%~LixX`qR%=-}Vnb7aLoz6kjCZfIsy2SWb
z)^U>tx*Tsa@PB4NM6SxREMoPqujLI91`1EnP<SnWFCt%4K=q;2M4;<hp6haQ&b<kv
yVdkFzpf4rS7n8@qItj1lz1uJ)%06ed1pWYcFb+Q&T^tMm0000<MNUMnLSTZ0ViHUM

literal 4468
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
GLSTZu@|`;X

diff --git a/public/del.png b/public/del.png
index 5e658a5a019c8abf1ad7317b7e63128544412e56..1ec7e9ad2886adb2649a1491c572d7a1be60b545 100644
GIT binary patch
literal 409
zcmV;K0cQS*P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px$Q%OWYR9Hvtm)&i{AP~pzWDnwQl1!3%2u|`-k|#^Y5J@L#I!V0=?L|;g2W)Ul
zEmh{x=HthG{y|uI;L7JiHbCF^O;uI95I7NCb1#$)z|0o_cn%$eh$p4gIR_#ez*^uK
z0eDeL-HHO_Y@Rar!2-<u3IIVLr))SgXCR^{e@+M>>f>JkxDnBQ62SfRf~{Q=-KntA
zApAD~%=``j=a?0XT7a3QUPw$`iKq>xZp>FP7f2nb>$(}|yL|7uZt(Xj0^q<9aql49
zLE}nT6aWCevLklT2C!LRv%sHOKx@4-#z-6gR`H4e*h+ZtrI-5#0B?SUECP_)W@X+6
z@FNRot&hf-)2BXskWr~_@ETWCu1EENmER&JWJsIMlG|3;HnQ07oMZUOcY#eW5ft~0
z7K{NA+o`w0?8C$f5MxXh1R@S8kCa(}1-H&xvO2&Afv;6C?<Lh=00000NkvXXu0mjf
DG^?#M

literal 4400
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

diff --git a/public/iocn/combine.png b/public/iocn/combine.png
new file mode 100644
index 0000000000000000000000000000000000000000..388a91d4d3184150e869e501bcdd40f90d5382a8
GIT binary patch
literal 4468
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
GLSTZu@|`;X

literal 0
HcmV?d00001

diff --git a/public/iocn/del.png b/public/iocn/del.png
new file mode 100644
index 0000000000000000000000000000000000000000..5e658a5a019c8abf1ad7317b7e63128544412e56
GIT binary patch
literal 4400
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

literal 0
HcmV?d00001

diff --git a/public/iocn/line.png b/public/iocn/line.png
new file mode 100644
index 0000000000000000000000000000000000000000..6324eb7b23703061762335ab9e7f04b3b5a5af2e
GIT binary patch
literal 4258
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
Ef<he{_5c6?

literal 0
HcmV?d00001

diff --git a/public/iocn/point.png b/public/iocn/point.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ab5f87d30af31691851725d50fb7a733c9c226b
GIT binary patch
literal 4234
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

literal 0
HcmV?d00001

diff --git a/public/iocn/polygon.png b/public/iocn/polygon.png
new file mode 100644
index 0000000000000000000000000000000000000000..5649de6d8c2bfb4101fe444d2b5029f2770ed3a2
GIT binary patch
literal 4501
zcmV;G5o+#<P)<h;3K|Lk000e1NJLTq002Dz002D*1^@s69%5nX00001b5ch_0Itp)
z=>Px`Pf0{URA@uxTX}R`)qVbEeX}ppj5H%zvMqT*U`&X?8wO%95`+^24JM(`G!3;O
z>A|!i1qYm-oYN%bBtVH%f-#V$IW%Ab1hd%KfDITdY;5p`C0nv2Ynjn9((E&De?9lU
znek|}jl9ys{b!Esci+3;{r&E5{jLUI!J+vIV#ZkoUEOfSMW*u72F7KdCd8AAq0!9H
z0A^@3dIgGB<^@^e1X1Gow9E^w8l7$zA5L^|L(#26M_Ru)TLL-bplko8VX1Ap@4EoL
zqqmrxiYP&rB;@}pk_4IlyG;K*`*-eFlprS4QIQuma)aR)BS%l{IFlQ2W<aliZf?aL
zck6BDHAb7YDho!IL@1(60p<f!BpI?Gfc|EHkGC;GGSwxr>?7fWtxp4xPIm)N8}!9L
z`Tk0?+x|<v+2kd_PD)gUm}U`g??JpX2sRV}I~0YON<-#FD6$NVRtv2`2OYz}V7I_v
zvw(3sV076juKaf?k_aiy4e)91;b?RFGp7UmltEv3*S9Zq%&b~(a9HQl#bu-^rZ@~8
zI);JIn-FggP;jFS0(h+dgGK{Wi4zu|2TZ9GP?U_O$n;l8vwQeR{GL=`;PX=fe@dX|
z{cP20i@)qKtxl`Yg5_gL1m6D?!H+*D5}|7$z?c#{OkO994l4{cGxTO7G<qF08VwWz
zhMeCt4<V5Tc?UZX1veDWZ3ubRT2TgzuavwocT8kK6opjk{zOM`-DH7J3iO35E;QQb
zHN0f?mEM#EEAaw)cI-jtTRS0fJpI18+zne*87%%1X!Sa>R_IJd=u8G^7(Lw#jaCCi
zRwy`y6CtqzB$fvhP_0P?hmh#%N4hVpZlF#JYh^i19v8I*SsNjy*iDJf;B5fZj~6kD
z23@manX~e$%eNTajzw8@PImX=$g{5^+1*D!MSwbIO@Yy2p=Z^6fdl3XZD4B5(7Cjb
zh7@pLh!A^afT+Dz3%ySZ<{~|GB^pQ(8C+W$=_3iGnqyD|34APt=&^3P0c7aS3~beY
zXbt+@k&-yBF%j>(0bxXoz+9Z4CV;E1Te8z=w_KdHvVjlx;n?$ULgoc9ZaYdZsRiS<
zLGL!faaAd-U$;YM6|l$BNVg@x_M~8_(80aT3n?jqZBN29-3pymhw!@t5CRfRl@^$5
zY%t9-Lu=9?`B@yX4+kNJS#aS51`iwu7mfp34Xl1I40h{Db?1dc$yEQ9#Q>jB(nO`b
z%Wiw0aoZMA7bA)|{_;EM*tCPHt-Ee2m9EZegu9^(mdotm+XO@#2a!4vfy4>JH(vu-
zX4}E|OyGK1q>jd^O6Lz9V}NC<3(iHQFxD85+8alBYd@qUPo*AiIzi_URVUV-9yL*d
z#0!n-zQJ!yr0NrbzVg2wdd*tly-D?_BAWj28oJ+Ur0P|+unuOA6V^E{xW8Qvv0p-X
zTOX2LVR~LqcaU>$ttx@Lz6|;@9m22lA$d50bSR4cPnsYLB8*NOwe(pH6ggoNHyF8j
zyl;;Sdhu_5vf4ST`nOpLw{CnJZLhowo!JQA;yEz7tSDJtK~*`rErRgAAYI6r9%O^v
z^ZanuyQs<!y&eD`NuqbxVMuA7`gNn-ssfite8Al&#1dm#^)W$TvgWQ!ee>t+(du=2
zqB`C0?Z)9JUj$J-|5bBgbX(!QvkC?egMq&UknC2i?AaXFDQ<XIR6q!E7<j%5d^m~V
zhX?5qVoIFQn~XHVBkqi2Q}dA$M)l)kg1+|oU+rexP8xW`I|68Y;4%6_|CJZR<Z+<v
zuBp&6di1@}NsY|88pK$Z-(C%w6Vd<N39z9Uf;$gU37frcYG>&A7Q{V5EV*E`b&U#o
z@e>cOEUBBmfhGmKfRF#>*A%$-vRSZIm%)2yH4LRD1pm}dUCOy0#3lN_Hyy$ti-G4m
zk?8Elz}{of>h)ks9BNEYfOEnsiDgHGtRq3MSfOjUZDG*huzJbF_P@S|re|MO!Ooin
z=QZW9FLWXJ2eQlYbB#CmJ(I@{{|}}j{z(MU?R^;7cZ`B3@w<*Os#%;U4v5LLzc5J|
z0eZ=kYkuUOUHc?a5iSzLj(_+!kZftnb@O1E;X>J}DuiC>N9?E?ketuqm|YIf?PciS
z(1lcM1l{lKgDgm3Ty{0ulZcuN|0Hw5@AKC=0(AYxM?0BPXBC-n^pBg+^1>FBer*OE
zwSH9GR|B?HK;PSKGzmEGL!&|Y^))cfFd*<m8)9ui4DN5GQJdCiR6&bUm&|h2V}icq
zp;b$#UAJ&MG5umPjd%a{K^hxRslN=4#U41W_Mm6OaR~ABxOg>IEnw2-o>5{FAQZnz
zlbLU@n^C!{7O@XPi0ulYd)r=!EKd_08lOutBtg0cqL?d043l*IOOHNnE-P6@&O_I>
zUD*HY|3>ND8aQTFqVlIR5r031!QEXG3fOq73)-m+kd&eE=^?xoh16DbJ^;fF4rt2_
zx%vDHLy(TDncHZibU_vD-*BMkKUxrL>A~Q^Ht5YJnxv2jQjw$$vLM}^ojVM4!>j)p
zF_k!-1a#vAk7ICuGpfJ20QSqha9v-9o~MpONRBUM@?rv7I+Ugh&EJ3tcPsONrd$vH
zMHOiNyT+Ptu$oc%!&*e%?nC_35IQ&SR+AYMqXsO37?nlIH3Ib9)qgjqX2r5YG)a%A
zu;u2}G({|5P>1rB(;x(8^u2w&sCAQt$|ra#UE>W7h@U3Ml@!qiq+}>Dwcs$>`D9M{
z^|dhgwdi}M1AV)jkO~ZfYz7UViJA-I#Q+YIXLFKX`rOZd?3^|IG4ep~uKn2k&^mbM
z&4lBEN=#Wh1HDi8AlWli6lnbt8w}Ulp(JFgqWqf?$lU_{n(<~Apx1!^iyFac>r61+
zQ37^D2y!P6ja>^vgA-bh9z^2g9sI^2b^bWRT3HI;-4*EmMJr;>Js8;60-cGWGt{#!
z-VYg%4+DMU*7fTQ7W2L2fg>AUM$4Z!qpIODI2ZWfYA8qd`WA@n*ypNnJtNdo2QYV*
zQc&!(A%In&zuW@jau@xZXokkChv|o22=BxoHYSTw?d*4nDo?p*Cc<0$5Zm30uC04%
zQl!!8vIgyUkmc3GK-a(Y=w6H8JCA_gv-WrB-}?osZ<r7Fw|p=-Ea=&Iv?wWO9~uVQ
zq=D%!50s<~?)f1=RA5+UhkmgQ?D_#H{UWs0MldTq5Z;VJ+?~v+dDb=*^YO~>%!Uw4
zA^b)!I=AehKAQl~R9W^xQ7#(>`ue{<5ixn(v`)SK`)eVjlJGCN80Gg&2YZY|=))7m
zd^h(@7PK4?V7kW(shtD=N<;;7iwn9L4A}J{5O<bUaqiDUkdCm_;*&FOsCVQHVlf~0
zTs0M@Sq%Etw<Gw`A+Uon=raCV5v8c2DAbtc&h(92p5hEPi;;ldeAB%!mDu6AbOxrZ
zorR%IAw-)d7lCC#>*kuFL?j6B#DOAIJpYXA=UXNP+F4f)_i_(<et8U`&s!1i=!MSA
zsHJ34;-M(?kmo=zfA3jIYcyzyD!j35CG0hRlw33oRlm3Z{m%uE=o&0$vqwle=U<CZ
z@xn7+jJwKTl&#8xvb+4~THB1FFFI(Ig%l(+35X0u(G3HA%SZo1Dzdcm@cK3X2zOmI
zTy@o`e&hlK*YzOPSDfV@?MxHnHIa%Jp7E^fn#`HDl$XH2x)Pmhnh|O0M7XIlU(zIW
zra~S=(yQQ{S#d@{%R>^i$YNt+bQR~65odf<V_1ZqQPB5JLFZ4KPJ%Wu8S72*%>qf^
zxcMp0V7C~FdT(BSFDyQHo_Yt7=n56_*^`e@)$HKG+~fkEwaA4kt|-IZ7}<b4KYrTk
z-O^24Mj7ip@=WKfw<KZv->(HU5<HjAMCHS?5Pp3S(Wc(XgFeE7NLuL?sDB=&;!J@X
zE8GB9nUtR<i*wfb;9g#uF=Q=>pXjH#bp~`4h1R>!Plub^XldwlT^2E9*`On<;uCIw
zsAgo7mGm%|wet`yV~y*lZ``_Jox#G~OU(O`XI@6ztM8tf;3Ocx@_;X=;uCH_UIsc@
z(1pPXvD)KCWLIza`H$Uo(;p+Cdm9g6_d~y>VW?xF5AOPMbU)ofN~=YwILU_%x40lR
zvuZreXd!p;fL%Lm1E@4txK8@<%-gg1G)XbZJEQ~Y3G;DMIGA$xOj>u3eWHe;#9fgN
zDD~5Vct21Od#hR2wTH;=WV5W&uhqgiyAo4=MiPzyl0C)w>cV_Fmk*O(p4ULn_;_Q?
z`QuE=B^>|WifD5WLZ7u{vMjY0E(_uu0F=@(Za$sr?LXzzGC!ZrrkO>l2|$YoQYIZO
zR>ccb%XEKa;(VGcsIYQ!;L$&xauFdvpVnlmAjN_vDW$Mkt+o`CkDn|e^dtW104*XA
zt4+?c+ENzBuAI;sS^dK8<Uui+!n=2@q2Z{Ll#ABPK>UMvQRO0%PwVHHa~N~^bdjhh
zJD-+|uC}A+kyb=odN6dTJyRpg)W5}XYGhQ}1=Y~D*S4doejXf)yl^b_An<e>`1rXm
z@Q<}$M!N+Sch?}cBZOGv0J^sAqmQcDl?X|c$FGKxhnGD0@Q>WHrwyxn6JzG6seu2V
zYruU8OTf$w1A?>!9Khg#w#nDMF-nKy=$~Hye^cxy5}tI2gGhVvx(8R5%+Bv+{RWCG
zsBN94<*+XzZJkcqJUd^5G!gwjs7Aaog6Iylt&<82o$O_iLO(C8l2XO=vN9-!buCW>
z(D<*9qh!vslMOr%Y2bBGM$ow)q>%6b-ZTiIyawK9EiilBl$t@v1C#Dr5)h;Hr@vVL
z68u-rg~_Y7YITerz2~7->$|-gQnpn)Kw7m2VRYJ0zdudYJjX;(+as+nZb8SJAE2VJ
zDgSa1$*##28BRqz2o=M7tAAKiKJei|+RdPCoD2_D<oNr9$SE)pvWv=bPBM%@!Z``<
z+y~zk8T!SyDqx*=4(S*B;uv}(L%;a=Fg03~bCLlpoi68u09V;Xx4zG~or_e0t3=sF
zott-}Y{3OEdtE1qHUko60jWfr(dm(skuV|IS*zTXwWRmv5p4z{=-=H8qr*lG*BNIQ
zkwsD-*|IA>GCHht@_A$}|N9o~H9ojzS3zgVP^vDsgKrlQ-9;!>(Hx5~2R2Ko@|(Z~
z$D&jjVVUZLb8#t*(+x;{nxRysctnnN(Sjf0jh;0gS$45G#-Pid;gd;7boWx0f{;wY
zL&<Y?=v^i_t}cP~>kdku<66>49Z!JkNkLzs&yeRtq}!4(*AViYo|5OpfC#420!yt8
z%*;IU+y{dYBZNE`M`-_XN~*DsU<~q&iFogsWejG4tK87~m#jX|O<9TOxS^YO!sKzn
zHJi{Rt<V^Bu#8HRlpyv>0O6TwHPHKXU@p>~q)8r6Bi)ohswqZ~5^;%<quogL4pCxk
zAvaV?ahu|ufwRL6%|DBT1#I<|J*Lr*&H^^t%_<?bqBM^XYk<~dgw{y<OL>G?lI!v!
zWR|C-*c>4?Fi82Jgb{2ZEa37|wIGna6>zRt!1=((<9iPtA{~Y%Bu)fjblIo|7@dT~
zPN>feP5E*xV8VJxb1L;YngSb&QdMSL4oY`sN?jxP-cp*~!=7utcRu(+W`C9vO|CHz
zW`C@`2Z_;`{fa_4--H@XTB;K>`z1(e_WUyYhq<2I9S-Xnqs?4J&butC&G4}<u1JJV
zDJwa5Q+S6X|8FVDcJXZb%X5dL(C^aQI<>y<LMFF$7$?2Bk_Df=z>@h}-4ON0P9bP=
zTSpe9jp>2GFX?TaF(Qtt`o(k1K2JTpmz7K{hJtbKWr?jCopu)=OLVaPk!|6o<CH3K
nHpYb1=d<zA^Zm}RB<TMG8+lFguy4FD00000NkvXXu0mjf#x|RA

literal 0
HcmV?d00001

diff --git a/public/iocn/uncombine.png b/public/iocn/uncombine.png
new file mode 100644
index 0000000000000000000000000000000000000000..67e493678527da9afd45e07af96fb67b518df400
GIT binary patch
literal 4474
zcmV-=5ryuFP)<h;3K|Lk000e1NJLTq002Dz002D*1^@s69%5nX00001b5ch_0Itp)
z=>Px`G)Y83RA@uxTYGd=^_~CRxik09`;kmCGYJWh01-v3qVn)nECyYV=(a^`+jZT#
zqT4-USGyIJ?&;apt)~^MSgYb=yB@a+YprMnK?D^gf}kR52nk8ZYx17=%zfWIzu%pi
zJRp!4;2wYf<RrOs=lA)2-{0@&$KV^dm~S9voK(=|OD{Uh8Yo=KdtKAyL~0QjW(EV;
zz%XVVx=E8{O%-KDm86U&$qfw4?vf(OX0boErT?pjFHe?0CLMI;cb6`9P7nS7zzt@*
z)uSsaG*!jmpSr3-qkq@v-*dm`e<~`JR3@fK@_Ml^@^ZB9$d1W8fXM;99PHeZAKhkl
z+E#H+M_CSxrYg`CjRG7DOjk8%vJCn&3;cKoBd5}>iXc1``Mlw20O~{!V8Wo!{`t+f
z+I+4D%{FTh0X85}4N68pqNyE;mN10gD1`nPlynA~q(Ij+FeVdB78Wee!{V~T;<SVJ
zxxsl|6xZN)>8b)XBlbuc@&4Gsre`JseB7YVyybi6x@VR>WpO($q?^l1Q%Q^HKX3>=
zpVlJL)Iq@=YZ1UB{SOQSYk>#$pdWmp2hjDbrfBr1oDud&(ZucPj-F4)1Abhf=lycU
zN_(hyjfpjxb6}--3LWo$jPQq_5{b~g5MX?P3)UhJIJW~9rwwKs2gb~TVHoHH46)yg
z1UZ=jd56#wgV>+Q9|(EYQBn+hu#mhlZzh_oC~`V|cd|LWcC5h11p3V7XL7E2OE)-z
zh1cf5s*;TM9edF7=1!=hM8Dq_@WEMD411^mCNoR+3f9VjwOYXNW_lQmiGi-^6r3(9
zPz4#PAOSk4)}+JzNVaw((-koekTt<k8i3XBrM@8NBb2nTG1(Hn9)R)XqgbN`U9o(L
zr}WYbHgi7r!kjv%+B)&ov#%o6)<wUH0QJn80?uuxwrV@W4cnPc@D(<&UK7-Q9paY?
zluivGYHu>Z95jJH%M7-Ffg05yHfE6dDv9*LICNQs6i*{|sEr-~S!Np#XL$%Fi#cyn
zswmbZ6J1v!g4if9k1kFVz-3olypwa;&(3+-j`#QB(2IYCCduG^E)<?q3Et;~*=L3O
z(n2`Sb3qey2!}GrG$tXmr(r2!;agG!HKjsmO2Ina0oK7HvaJVlhYD+{9kvQ5tg~z|
zSsA20Ng)1yAC!myF_J{z{=*O>3Bbg_5h{Yk<rq+RNj{KDcV99Z;3t$cQR$*3*T2jA
zoC|4)Q4}10<!v-?+(FgWH+w3TF6-dnTUreJ`7TI}GGaA-NFRwp73HCa&j9u+7x<tR
zVyA#~U4p9g;KlM5*r$5oSy%|J!h-bP1R`6yp{67%^+@dz`Wd3?#M@I-Q&gyuT$AbQ
z`}T=c{e++|`Tc#bIZBGIHR7p)+UH+G+uJo%y^0sihRyGRV~!WT?**WAtB7pvLaH@F
z?RBDy*uA5y0KV#Cn2T9N{@jJs7g1z-W9a^<7MiSp^Ej!e&uO3{${WSL=yk{Y?&E@9
z^xL1W^vo)MEGOZH^>3l^&)dM-I0P5X0q1p~U|9)O<=ECJBKyL0Ba^+z0sH2K;Hmaf
zmG6JO15z}F&Rt(X%}6w^b1sJgTqXH|c&8jsj_B1#1bxn`Th0w$IA@Q^%$kYnw7s(%
zUp(<Li0XwdoeR$AK+%uOVDa<l`QHwt+6*syGM8hD4@JvMAoq&sd9f8zB!%$%pHma!
z3p_AeIhx^-a3%`r3z3$O8OKKi{hb&8b2snv(8MFr+<}^3tf4OqU2-<8em9D5nF<qc
zM%PO%)XAKxMVw{e#&T$)g6`*zK<JGlyz>B+u&u~P{S38lS=l4UQ}d6tuVaE<^yode
z7R;W$jur)yj1T|iHxzi$`Lp0GFGkUi%V8<BBK$%V4JoI3k&qa=X*%RS0X;9aAlcH5
zp1p@)GMm8{xQ(2i02k#IsvsPdvK|e3`EqvY^$Wrlx1)%Bu<0-Fp!V5U4Y2cO!E<>4
zt_5C%pC_lBIMsOb-)Hr^5c<hfBtD8Fw!I5I`wmg?B!6dl&Zy!PrAJ9+Lc@!cqd;H$
z#HyeAsw$r#Dk4VX*zphl22w3exndsdGrTBXQHI`^x)HB45|Y!o+*JYiZ!AXlx>lqc
zqG)@2A2eA7?{yj3o=VhQ{%1{;|1fx;M}e+h|8NUm=qV!~sQcqa)W5VDh2NS1cV!4A
zcUC}XkkR#4BP{|>`(hXbuB?D{h6NpuHX_~_M&D-*G;1?)oB>)<TQxx}9})C9_pMkw
z?TQ84iR)KV8EpIEJv29-Qhh$$i~Mk3=12Rw!;ll1(~dW{0gKCq(iN46zt@ZSu3ofl
z-3vvKXn{lXb5(;XtCvGj@{NcglCIwH@YA;9f)&IbTDR`PXTSL`6wa-HduAz0@12Rn
zyK(gGZvEN-&TXV{ei>ZfcBB2*^@!KEqwn)Zm~B>Cq>v0!SJicztlpM;ehBELul_D-
zE%0~<=$c<Vg1*lVqWo{>!*xLsyjK>Z{mH|SQxlW2X&MK%l83xA2}qM;A{K`YrT<ik
z=v!S#eB6tcO}mX^#>yKBi>$;nMfDy9dhW`<n^UoT$pKoVC(_t_-AY;_2IkL3;MQr7
z!y3BYIy@mMGj0=X_lLk(O^`N5A#a~N?;p6b5|)q&UC%V5Yj-Wu9ep5&LDOfV=CX1&
zfG-GuyrdUD_p7@+v!<^h4|MMO47=}Ji=ufm;Xb1jQ&!JF=hN*-wf9d5G=HNH<^@jr
zj?C}7q17ABhRIlt(n17pD?!@>4Tv9XN6)@`uvVVF+OTcqZfJO92<WS~Jhj$hx7|S=
z_-frNsQ=R@lr23Up7}v|mj=-GR6P`7{F^kDbFkeNpvSBnNJD(KZ!)mv-$7J)%Iz}|
z+0uph?oPCB*-MKehGlaO?Qv+@$|0buH$1%89x9qgK<`=oIJ)<KiSny1gzuUlEN(m6
z*Vj#Glh!+n!B+6l6&;yhcS7%-{KBO4hAPPMG$L<wqGj_Q8nX%TY?oypbp8Axps)PP
zqfx8hNBh*<Z(a>KokHm1vk|y`I)p<adfz`XZqV#JJFGX69v2{Oi$i|HXmD7r_JFP8
zA-@@iS|^PA{kaeNFP#eOEFN7?H6i@L0SJ9@u-SO6D{4&Fb?VIWHhuNxCq;|X&Joa?
zuDt`+0vG(}&cKw_v(Ue>7qQxLW?&YEIxmxtg%($lc_0jkIv5WN`@fga{i@9(gx?wM
zpouKc>;Qbr{Ahph5PCmtK%%)5tc_?F?bb@rb!y~!(97O=RyA=J6H$dXmfQ+gMF<6F
zO+(oOXQ2DJ4kTO0XM>ij+~BVCP%Pq~`l0Mj8MsV<_3i-JQV!DQ800PSiQuK5b(Z;2
zd`k$es}G|8%VyeTAq~lF0ir?I*&(3+_JjW>9a%bgc>VH!gl~2^ytB(u{?Hi+uWd)V
zYwVtz@v*So7XrgEP+KGjk95&CkEzNEw!{LtCQ1LN$B*3`AL}XD0|f}JEJe$zgNW9)
zAX3{hSkfeQra~S;(ktMZSu$bJ{LKY0pX;DNGmmvaYcjgD*1L+qPUWG+6l&kf$AijK
zjsdsK3uS+L%pr|}zGDhn?yVgFZRNAxo79`bBz^U!Cq;|P&Jp$AwCoPpgT6uP9Y(UX
zcT5M*R&cPcEC!iYDEm?nUl`C7rqlxddLP(nMjRzJExj6rc0_`yf`jeOfT0;{#^y(k
zQt$dUIx@<7@1t!x@4ZzO+y8zwz^L$_I}@e%&qCz&KE!G}M-Q6G+G`mHUDA+wuoHSz
z1yg7S_gydaK80pv=JV{ZT;qYsW2RM`yf+Q`tvGD=2C2=b?{5dvqfb>mvxD$0E6h5w
zdL)i?)7m-<I)>ridw86V9Bibmq49()Q_u|Cy`**rq)h`(io3xF%OWEq6aLT*wN3;$
z29_(_uq<|gu`tj@!@e2b1mXE!sQX8s>kkQ8I}gw{)^X$X)mzrBwb=PPh<pF)nOD&G
z>bCJGCk(({?*n6IAg+%9iXkoYg?8{iEP$TTk$I>SdTe0o$`r8RuJgh?*Piz@@`p)C
z8%E!79G;vIuYKH%?6P&gy303v`Wgbdvt~bb-}e|zL){C4@Kp!U_H;dIt&U#BM|hHe
zBcPEP<gppRa<LPpGp%5&NJ(h;SG7Te@c8KBH)$M9xosxxyT?B=(ohnvh)<z$T2}4`
zhUMNymGzwi<aBaXR^hiQ;i)RclwXp9qXVh-@x|&Bos?-h2iwmA^f3}P^{@n`PJ~jE
zgx)o}bTwaa{6_;~2iwv6Nqx4;GJ4^ftjqyGDILeHr_-I?lUiDi2;Kx(E_2b0O+6$4
ziLuA+;iYA!J9^@Jnrvuz=VbrGf1LCt!il6lp8pRt5xSB1xQ8|oh}S0eY>bqZkvk`}
zM^?RHJ9$t^rLpZtt7tmvA?>17Gmv;M@%3#NUFJgjLk)=4x1;|+Q?^Hz?SCuB>5)-s
z59@|DzP24@)$`z9SOoWCKRTXngp@e-4gQfdfOFYVa$5!BJ9-hX=|St(ee_YIx>BGj
z+VQ)g<l&2-xc{fVs%b;|-o%-?D@qXhSp~$eVGEd_VL_O-fIHB)zj5q+ZyaO7QTM{@
z|8JW8M8ad9a1d!PT6@o}1yzG*S-*v@$;Mb`aR9D`WUSLdhi9j2ks)H}C*?@gL=oFz
zjCIl-{R6Ws(&(4u6>54kv#czNAydmE9jN)&M^G?l+Q0zMPX>6+lo52Q7ir{&Zkh(U
zchCUulX}?vK1$6X<bg3yEeVKY&8NS7Y6C)-%!Rec7}c`88J(wLR2#gp9BOV<+e1dR
zpM&$bCO)60YMy5z7~_$Kmp7yNukWE`_)z|pFjB2!Z!(NkLkJb4==-4|L-~&PKc~|S
zI>yQJP!&<SQ;v><iICe+o^z6A1QO0kc;`L@FUry{t|@_I-YKMC>`S2kjV%4*!!M}Q
zqMVZ~V0EIL69U{|7k&R--sf3p5L{KtE^67d6UFn-fUU?oK(y&mDGSIT+KfGw94>i6
zvU8OAC~L`FG>B-^6Giv#gW%jw>bNGIT|_oQd1Om2`hasg<_zYM)&I|%a8(51ttta+
z&r+%`a6xL45!*#5Rk1vaFb^n4sR~&khDV}Qaj;MIz_X|j+;j`lA7?35X$jG~R@(3*
zywQ`!Bg<_z&lvQ&vV1ZX$+k|)Qjk+A_$hhL1+&)*_hkieoad(GIk7&2^x-7L_B6~T
z<}7(mL8dVUTLmG{nJIZr=}^Fz+F`GBf}c5vJojE7lqez3CD8lXVM?lT9mN=wYLbc0
z$z=@YfE(P<>J5&d|Jt0y^W4x)J7M*E;H@GwNe37U3;Qu?k}8x=6(Bq_69aRQ1%DPh
zK$AS2L8dl|bZwlP5($aXx;CUc`zbMYI5$*HiyIRy9VdqyI@sO_3)m4XUc;D=%>w3J
zHiHmbQaFeZYk|qi!NigI(jY=CsdXg<njle9Y@QI?(MS29gb{2fEZ{()(GbYp3OH3P
z;K9I;$M^0#Kqd^eNFE7;^E#;pa2`TpC)8)2mV9{@FkwApM1%SqOGD_5QB~%>Zc2CN
z3%y72z157cM>y4d@4?`QGy8LtXmX8#F#F?8?MNPr*{|!A^G&GHWTbjxX1@wGBb;7l
z|B&#Kzr*2J#W`(d#NIW<7>18@aYZF`N=?s)o8fmj2LG<6gjPw&e0}b443Dk!woYa6
z2hhlE9o|DPuH?YyF0f>OHx9(Ou`?Vrxvirq>iSGi-`DiE&ItKrS@ohhwxGY7-pfj*
z7eU8y?qw+r3~SmY#golKcXVr{_AsSNoQ!os>hsC?($oFUZzSmd1EGKn<MR#tJ^%m!
M07*qoM6N<$g1=|Cj{pDw

literal 0
HcmV?d00001

diff --git a/public/line.png b/public/line.png
index 6324eb7b23703061762335ab9e7f04b3b5a5af2e..ebbba4d0c6f096f147349a11b96170aa6d6cfbd8 100644
GIT binary patch
literal 452
zcmV;#0XzPQP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px$en~_@R9Hvtm+NuDFc5@~PC_T4lhDC-0O{a52via}37rtHN5`BV7+aQxABp~$
zu`&B;?<F?!;<b6PzWfaU0PiAlRn=?icvlAie2WOhZ5>th(?fIv0Pr>J`Xh*497qJw
z1pvUCi2MZGw}b$27_P?w<f5uObD=lDU91E}h%NwO$G5Oc?v}|%2N;r*s_uI`kS3qc
zyREN=<_;v8&*bA`PVn<tRqfvRpcz1jF*D!FF0%Sj$87>o5YOtp8-UAh)7Y!(Y3__!
z<v?h$OgLM+G{(<BssUPvS0`aB@hX5soDGICk4o#A?bX8w06Q5=jcc{|A_v?sF>xkb
zHs6=*el|clTKzOzDwuvhtAbG1930~*CcI$XEgGe3#WM#AO~q?87cT+Wp@E%@M<)&u
zYc$amYq9$h08cR#y^8_J?zIx10vP+b56N(ttnQjqz|oH;b?y(6UE*IX!%**RI1B~X
uthrtrmWQ@Z{h6p0E4|kxu1f&_0e%4xtDzy{;KH>40000<MNUMnLSTZ2hQk~H

literal 4258
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
Ef<he{_5c6?

diff --git a/public/point.png b/public/point.png
index 3ab5f87d30af31691851725d50fb7a733c9c226b..c19cf2c4c967f45b7f970ec0858fd6a3fbde680f 100644
GIT binary patch
literal 638
zcmV-^0)hRBP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px%I7vi7R9HvFR&8#=FbuUt57M1va1!Vt8i`+nUr6a81}9l}l5r5CY(|M>61zz|
zBq~)%C9$91^B2O4AAGTYm<8Z;I<-yHY`ynu0BFN|4MEWF#W^?b_xt#*7+)0t=J-&w
z2yjKjbKm#JinC<~$oXou`eDXKL>vL&yYKrkfFm~E12e=9Jy+-4ro_f11H&+^z4u?y
zAR>0;bSkm{nC=iLlHzELIcs-R07>L$V@y{=DV<3qn`A--V6CMnh|bX%v#E8?&oLWU
zW6YamLj+*0-2uQSU2x95r8)*_wgKQh<DGL|dM;tHlcdl9P|~%CxJfnV;L?Z?@sMUe
zJ1?@J0q|tp81wKyPfBujyWK8L)5HoO)-uqX1u38m07IN<A2pRC9fsk<dry5ry$1l9
z3>g4s=ppl2Bx*ugYwyyfd1I}meA-FCB?j(?Q?!);H0dHcSvji=C<!G-7;8Ut%#5MP
zK&=F^`(;{kozt?L$`4H%0-iBYqB<H2ZI*ffy>U8<`C+XUr4a$pM;1-i2LeFKlQ?u@
zI~b*Aw6qVzPN-%)^#t<ly{D{KcL2s%eJA8B{FT+LL8QzAb)HmBL#ZN4!-;oIX`aOU
zlluVIZ_bvJwCpU8IQZg9#!9bh)k>C_qI^XFgtivMT<2;TO8S;SEO9;yz!VcpozDg!
zfuQY}Ev`k)vn8ffP9-_Q_DjcRJ72^=1jKS;vGaccU~;r`R`#bzutYZPPE{Xxro+_M
YFTG&mFf+@&f&c&j07*qoM6N<$f&>>BGXMYp

literal 4234
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

diff --git a/public/polygon.png b/public/polygon.png
index 5649de6d8c2bfb4101fe444d2b5029f2770ed3a2..e103aca9b7fd628077bb22ee8bf47a7127471e70 100644
GIT binary patch
literal 422
zcmV;X0a^ZuP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px$U`a$lR9HvtSFusVFc949fq)P?fDZT!GD_e(I9I?^fj1+>T|kBd3ZMXH_#ApL
zf1cBi0byHj5C4Ib*rSnm_trYyNwDW3KlxSl0>BA?HOYDoeSMf)0jg@G&rTkA*8mnI
z?U_8rV0Hx<xkYco2u)D?PVzLF9e}D1VzvTQ^#;I$lUT&HtAF>o%0;E<I0JCqgW2)~
z0k@lltBnIS$wgpM)eitiDXfvTuO!bqm==_|yCQiP1eo<^myIRK$~R7!djas4B1A-v
zo2I$!!EAYg08?bYAnbw9PUJi70sn=Am}9cQl<t&{Jz22D{B{o52O@HB)``edS(aBR
zw#U{EVa5(3v(2)iBDtI@z_aX6%q$=~kR8YlWCsq<fublL=PX863;Hm}l;gcLrIQ;H
zuY%pCG>Vy<(t~YECtpk=O=%Q!OcwlaQ|gz7*)FH<gyBUof1QMLG@&UNUuqY0Fma*{
QWB>pF07*qoM6N<$f*A6&761SM

literal 4501
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

diff --git a/public/uncombine.png b/public/uncombine.png
index 67e493678527da9afd45e07af96fb67b518df400..666698a95263f095deec38d6b7670bb986467acb 100644
GIT binary patch
literal 401
zcmV;C0dD?@P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px$OG!jQR9Hvtm)(uSAPmRtP1;S;O?pFMDNk))%@EB^(rnTW5{ZfkBFfP-9}m%;
z!drxmfBcOdK-hTT#_?eV&{}uKm<s@OnNSlV4oa!X+SmH80L=UVfJ0_*Z#EIp$$r%O
zhXBSdL_}F>Vdgjc_*>eDx8DK&t^!hyrTOMFAO(=-ivgJV3;?%+DtRE{sFWH~Fhu}b
z>x(hwT2rQocuhfM12FRq0POCUQJ}!mC+tW;WC1YqJ#Ni403KqV=kLDnpRRK*fFH{+
z6+Ds4k%+$Bf<Itm`%no{fmr$vr@HiC5ZeE)fZNqu{%g;GgI|MZrNHkvtbhi9HC29H
zF$JOIo0eguMCbqi8J*7FF9sqSn;Vf7tY*F_1vLRApJsslM)WTgsJWIuiRkD$Ta|zO
vFtM#S_id1Rm=ybGy#b_>YMI{wHdo*UJG*X5r?5f*00000NkvXXu0mjf1U0ZM

literal 4474
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
M07*qoM6N<$g1=|Cj{pDw

diff --git a/src/components/MapboxMaps/MapComponent.vue b/src/components/MapboxMaps/MapComponent.vue
new file mode 100644
index 00000000..dd17a62a
--- /dev/null
+++ b/src/components/MapboxMaps/MapComponent.vue
@@ -0,0 +1,543 @@
+<template>
+    <div class="map-container">
+        <div id="mapContainer" class="map-box"></div>
+       
+        <!-- 图层控制 -->
+        <div class="layer-control-center">
+            <p  v-for="(item,index) in props.layers" >
+                <a-checkbox  v-model:checked="item.checked"  @change="handlerCheckboxChange(item)" >{{item.name}}</a-checkbox>
+            </p>
+        </div>
+
+        <!-- 绘图控制 -->
+        <div class="draw-control-center" v-show="drawing">
+            <div class="draw-btn" @click="handlerCancleDraw">
+                取消
+            </div>
+            <div class="draw-btn"  @click="handlerDrawComplete">
+                保存
+            </div>
+            
+        </div>
+    </div>
+</template>
+
+
+    
+<script lang="ts" setup>
+
+
+    import { onMounted, onUnmounted, defineProps,defineEmits, reactive, ref,defineExpose } from 'vue';
+    import { useMessage } from '@/hooks/web/useMessage';
+    import mapboxgl, { Map,Popup } from 'mapbox-gl';
+
+    // 图形绘制工具类
+    import MapboxDraw from "@mapbox/mapbox-gl-draw";
+
+    import U from 'mapbox-gl-utils';
+    import 'mapbox-gl/dist/mapbox-gl.css';
+    import './src/index.less';
+    import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';
+    import { MP } from './src/MP';
+    import { DrawingType } from '@/enums/mapEnum';
+
+    import {
+        SnapPolygonMode,
+        SnapPointMode,
+        SnapLineMode,
+        SnapModeDrawStyles,
+        SnapDirectSelect,
+    } from "mapbox-gl-draw-snap-mode";
+    
+    import {customDrawStyles} from './Styles/Styles'
+    import Drawtool from '@/views/datamaintenance/components/drawtool.vue';
+    import {WktToGeojson,GeojsonToWkt} from './src/WktGeojsonTransform'
+
+
+    const openModal = ref(false);
+    const insertShpModal = ref(false)
+    const changeOpenModal = (value) => {
+    openModal.value = value
+    }
+    const changeOpenInsertShpModal = (value) => {
+    insertShpModal.value = value
+    }
+
+    // map参数类型
+    interface MapboxOptionsInterface {
+    mapOptions: mapboxgl.MapboxOptions;
+    control: DrawingType[];
+    }
+
+    const props = defineProps(
+        {
+            layers:{
+                type:Array,
+                default:[], 
+            },
+            location:{
+                type:Array,
+                default:[], 
+            },
+            type:{
+                type:String,
+                default:"", 
+            },
+            feature:{
+                type:String,
+                default:"", 
+            }
+        }
+    );
+
+    let nextMapControl: Array<any> = reactive([]);
+    nextMapControl = props.control
+    ? props.control.map((item) => {
+        console.log('item::: ', item);
+        return MapControlConfig[item];
+        })
+    : [];
+
+    console.log('nextMapControl::: ', nextMapControl);
+
+    // 定义地图容器
+    let map: Map;
+    let drawTool:any;
+    let popup:Popup;
+    let clickPoisition:Array<number> = [];
+    let selectFeature:Object = {};
+    let mp: any = null;
+    let geojson = reactive({
+        geojson:{}
+    });
+    let drawing = ref(false)
+
+    let drawGeojson = reactive({
+        geojson:{}
+    })
+    const { createConfirm, createMessage } = useMessage();
+
+    // 定义地图回调emit
+    // 地图加载完成回调
+    const emit = defineEmits(['mapOnLoad', 'mapDraw','handlerDrawComplete']);
+
+    onMounted(() => {
+    mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
+    map = initMap();
+    map.on('load', () => {
+
+        // 初始化绘图空间
+        // handlerInitDrawTool(null);
+
+        map.on("click",(e)=>{
+            // handlerPreviewFeatureInfo(e);
+            clickPoisition = e.lngLat
+        })
+
+        map.on("draw.selectionchange",(e)=>{
+            // handlerCopyToTargetLayer(e);
+        })
+
+
+        // 设置绘图监听事件
+        map.on("draw.create", function (e) {
+            console.log(e);   
+            drawGeojson.geojson = e.features[0] 
+        });
+
+        map.on("draw.update", function (e) {
+            console.log(e);   
+            drawGeojson.geojson = e.features[0] 
+        });
+
+        window.handlerCopyFeature = handlerCopyFeature;
+
+        });
+    });
+    // 销毁地图
+    // 移除地图实例
+    onUnmounted(() => {
+        map ? map.remove() : null;
+    });
+
+    // 初始化地图 返回地图实例
+    const initMap = () => {
+        return new mapboxgl.Map({
+            container: 'mapContainer',
+            language: 'zh-cmn',
+            projection: 'equirectangular', // wgs84参考系
+            style: MapboxDefaultStyle,
+            maxZoom: 22,
+            minZoom: 6,
+            zoom:14,
+            center:props.location
+        });
+    };
+
+    const handlerMapControlClick = (handler: string) => {
+        handler === 'handlerDrawPoint' && handlerDrawPoint();
+        handler === 'handlerDrawLineString' && handlerDrawLineString();
+        handler === 'handlerDrawPolygon' && handlerDrawPolygon();
+    };
+    //绘制点
+    const handlerDrawPoint = () => {
+    mp.draw('Point');
+    mp.on('Point', function (e) {
+        emit('mapDraw', 'Point', e);
+    });
+    };
+    //绘制线
+    const handlerDrawLineString = () => {
+    mp.draw('LineString');
+    mp.on('LineString', function (e) {
+        emit('mapDraw', 'LineString', e);
+    });
+    };
+    //绘制面
+    const handlerDrawPolygon = () => {
+    mp.draw('Polygon');
+    mp.on('Polygon', function (e) {
+        emit('mapDraw', 'Polygon', e);
+    });
+    };
+    //删除标记
+    const handlerUnDraw = () => {
+    mp.deleteDraw();
+    emit('mapDraw', 'cancel');
+    };
+    
+    // 初始化绘图空间
+    const handlerInitDrawTool = (feature) => {
+        
+
+        geojson.geojson = feature;
+
+        drawTool = new MapboxDraw({
+            modes: {
+                ...MapboxDraw.modes,
+                draw_point: SnapPointMode,
+                draw_polygon: SnapPolygonMode,
+                draw_line_string: SnapLineMode,
+                direct_select: SnapDirectSelect,
+            },
+            styles: customDrawStyles,
+            userProperties: true,
+            snap: true,
+            snapOptions: {
+                snapPx: 12, // defaults to 15
+                snapToMidPoints: true, // defaults to false
+                snapVertexPriorityDistance: 0.0025, // defaults to 1.25
+            },
+            guides: false,
+        });
+
+        map.addControl(drawTool, "top-right");
+        drawTool.set(geojson.geojson);
+        drawing.value = true;
+    }
+
+    // 将图斑复制到指定图层
+    const handlerCopyToTargetLayer = (e) => {
+        
+        if(e.features.length>0){
+            if(popup){
+                popup.remove();
+                popup = null;
+            }
+
+            selectFeature  = e.features[0];
+
+            popup = new mapboxgl.Popup({
+            closeButton: false,
+            closeOnClick: false,
+            });
+
+            // 设置 popup 的位置和内容
+            popup
+            .setLngLat(clickPoisition)
+            .setHTML(`
+                <div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="handlerCopyFeature();">复制当前图斑</div>`
+            ).addTo(map);
+            
+        }else{
+            popup.remove();
+        }
+    }
+
+    const handlerCopyFeature = () => {
+        console.log("selectFeature",selectFeature);
+        popup.remove();
+        createMessage.success("复制成功！")
+    }
+
+    // 添加到图层
+    const handlerAddToLayerList = (layer) => {
+        handlerCheckLayerExist(layer);
+    }
+
+    // 判断图层列表中是否一定添加
+    const handlerCheckLayerExist = (layer) =>{
+
+        for(let i=0;i<layerList.length;i++){
+            if(layerList[i] == layer.id){
+                return;
+            }
+        }
+        layerList.push(layer);
+    }
+
+    const handlerCheckboxChange = (item) => {
+        handlerPreviewLayer(item)
+    }
+
+    // 控制图层是否显示
+    const handlerPreviewLayer = (layer) => {
+        handlerLayerControler(layer)
+    }
+
+    // 图层控制中心
+    const handlerLayerControler = (layerInfo)=>{
+        console.log("layerinfoinfo",layerInfo)
+        if(map.getSource(layerInfo.layer.id)){
+            if(layerInfo.checked){
+                map.setLayoutProperty(layerInfo.layer.id, "visibility", "visible");     
+            }else{
+                map.setLayoutProperty(layerInfo.layer.id, "visibility", "none");     
+            }
+        }else{
+            map.addLayer(layerInfo.layer)
+            map.on("click",layerInfo.layer.id,function(e){
+                handlerPreviewFeatureInfo(e);
+            })
+        }
+    }
+
+    // 查看列表数据
+    const handlerDataList = () => {
+
+    }
+
+    // 图斑属性查看
+    const handlerPreviewFeatureInfo = (e) => {
+        if(e.features){
+            console.log("EEEEEEE",e.features[0].layer.id,e.features[0].properties);
+            isOpen.value = true;
+        }
+    }
+    
+
+    const handlerClose = (e) => {
+        isOpen.value = e;
+    }
+
+
+    // 图斑定位
+    const handlerLocation = (lngLat) => {
+        map.flyTo({
+        center: lngLat,
+        zoom: 16,
+        speed: 10, // 飞行速度
+        curve: 1, // 飞行曲线
+        easing(t) {
+            // 飞行动画函数
+            return t;
+        },
+        });
+    }
+
+    // 编辑图斑
+    const handlerEdit = (info) => {
+        initDraw(info);
+    }
+
+    const initDraw = (layerInfo)=> {
+        // 实例化绘图工具
+
+        drawTool = new MapboxDraw({
+        modes: {
+            ...MapboxDraw.modes,
+            draw_point: SnapPointMode,
+            draw_polygon: SnapPolygonMode,
+            draw_line_string: SnapLineMode,
+            direct_select: SnapDirectSelect,
+        },
+        styles: customDrawStyles,
+        userProperties: true,
+        snap: true,
+        snapOptions: {
+            snapPx: 15, // defaults to 15
+            snapToMidPoints: true, // defaults to false
+            snapVertexPriorityDistance: 0.0025, // defaults to 1.25
+        },
+        guides: false,
+        });
+
+        map.addControl(drawTool, "top-right");
+        
+        // let geojson:Object = {};
+        // if (layerInfo.dataType == "面") {
+        //     geojson.type = "Polygon";
+        //     geojson.coordinates = geojson.coordinates[0];
+        // } else if (layerInfo.dataType == "点") {
+        //     geojson.type = "Point";
+        //     geojson.coordinates = geojson.coordinates;
+        // } else if (layerInfo.dataType == "线") {
+        //   geojson.type = "LineString";
+        //   geojson.coordinates = geojson.coordinates[0];
+        // }
+        // if (formData.lat && formData.lng) {
+        //   formData.lat = geojson.coordinates[1];
+        //   formData.lng = geojson.coordinates[0];
+        // }
+        // geojson = {
+        //   type: "FeatureCollection",
+        //   features: [
+        //     {
+        //       type: "Feature",
+        //       geometry: geojson,
+        //     },
+        //   ],
+        // };
+        // map.setLayoutProperty("pbfLayer", "visibility", "none");
+        // drawTool.set(geojson);
+    }
+
+    const handlerDrawComplete = () => {
+        emit("handlerDrawComplete",GeojsonToWkt(drawGeojson.geojson.geometry))
+    }
+
+    const handlerCancleDraw = () => {
+        map.removeControl(drawTool)
+        drawing.value = false;
+        // drawTool.set(geojson.geojson)
+    }
+
+    const handlerDraw = (feature=null) =>{
+        let featureTemp = WktToGeojson(feature);
+        console.log("传入的WKT：：：",featureTemp);
+
+          
+        let geo = {
+          type: "FeatureCollection",
+          features: [
+            {
+                "id": "cd1d93c0e4a6747ff597f190c311d0e3",
+                "type": "Feature",
+                "properties": {},
+                "geometry": featureTemp
+            }
+          ],
+        }
+
+        console.log("geo",geo);
+        handlerInitDrawTool(geo)
+    }
+
+    defineExpose({
+        handlerDraw,
+        handlerLocation
+    });
+</script>
+  
+  <style>
+
+  .layer-control-center{
+    position:absolute;
+    padding:10px;
+    top:15px;
+    left:15px;
+    background:#ffffff;
+    border-radius: 12px;
+  }
+  .layer-control-center p{
+    margin:0px;
+  }
+  .draw-control-center{
+    position:absolute;
+    padding:7px;
+    top:15px;
+    right:15px;
+    background:#ffffff;
+    border-radius: 12px;
+  }
+  .draw-control-center .draw-btn{
+    float:left;
+    margin:0px 6px;
+    padding:5px;
+    border-radius: 5px;
+    }
+
+.draw-control-center .draw-btn:hover{
+    background-color: rgb(0 0 0/5%);
+    cursor:pointer;
+}
+  .mapboxgl-ctrl-group:not(:empty){
+      box-shadow: none;
+  }
+  .mapboxgl-ctrl-group{
+      padding:10px;
+      border-radius: 12px;
+      position:relative;
+      right:140px;
+      top:5px;
+  }
+  .mapbox-gl-draw_ctrl-draw-btn{
+      width:20px!important;
+      height:20px!important;
+      float:left;
+  }
+  .mapboxgl-ctrl-top-right{
+
+  }
+  
+  .mapboxgl-ctrl-group button+button{
+      border:0px;
+      margin:0px 10px;
+  }
+  
+  .mapbox-gl-draw_ctrl-draw-btn:hover{
+      transform: scale(1.2);
+  }
+  .mapbox-gl-draw_polygon{
+      background-image:url(/polygon.png);
+      background-size:100% 100%;
+      width:100px;
+      height:100px;
+  }
+  .mapbox-gl-draw_point{
+      background-image:url(/point.png);
+      background-size:100% 100%;
+      width:100px;
+      height:100px;
+  }
+  .mapbox-gl-draw_line{
+      background-image:url(/line.png);
+      background-size:100% 100%;
+      width:100px;
+      height:100px;
+      margin:0px 10px;
+  }
+  
+  .mapbox-gl-draw_trash{
+      background-image:url(/del.png);
+      background-size:100% 100%;
+      width:100px;
+      height:100px;
+  }
+  
+  .mapbox-gl-draw_combine{
+      background-image:url(/combine.png);
+      background-size:100% 100%;
+      width:100px;
+      height:100px;
+  }
+  
+  .mapbox-gl-draw_uncombine{
+      background-image:url(/uncombine.png);
+      background-size:100% 100%;
+      width:100px;
+      height:100px;
+  }
+  
+  </style>
+    
\ No newline at end of file
diff --git a/src/components/MapboxMaps/src/WktGeojsonTransform.ts b/src/components/MapboxMaps/src/WktGeojsonTransform.ts
new file mode 100644
index 00000000..2a64fc76
--- /dev/null
+++ b/src/components/MapboxMaps/src/WktGeojsonTransform.ts
@@ -0,0 +1,11 @@
+import WKT from "terraformer-wkt-parser"
+
+const WktToGeojson = (wktData)=> {
+    return WKT.parse(wktData)
+}
+
+const GeojsonToWkt = (geojsonData)=> {
+    return WKT.convert(geojsonData)
+}
+
+export {WktToGeojson,GeojsonToWkt}
\ No newline at end of file
diff --git a/src/views/dashboard/analysis/index.vue b/src/views/dashboard/analysis/index.vue
index b4f60de7..acabad5a 100644
--- a/src/views/dashboard/analysis/index.vue
+++ b/src/views/dashboard/analysis/index.vue
@@ -1,29 +1,108 @@
 <template>
   <div class="w-full" style="height: 100%">
-    
+
     <MapboxMaps
-      :mapOptions="mapOptions"
-      :control="mapDrawControl"
-      @map-on-load="mapOnLoad"
-      @map-draw="handlerMapDraw"
+      :layers="layers"
+      :location="location"
+      @handlerDrawComplete="handlerDrawComplete"
+      ref="MapboxComponent"
     />
 
-    <MapboxMap></MapboxMap>
   </div>
 </template>
 <script lang="ts" setup>
-  import MapboxMaps from '@/components/MapboxMaps/MapboxMap.vue';
 
-  
 
+  import MapboxMaps from '@/components/MapboxMaps/MapComponent.vue';
+  import {ref,reactive} from 'vue';
   import { DrawingType } from '@/enums/mapEnum';
 
+
   const mapOptions = {
-    center: [116.404, 39.905],
+    center: [118.556717,35.80391],
     zoom: 8,
   };
+
+
+  // 展示的图层列表
+  const layers = reactive([
+        {
+            id:1,
+            name:"沂水县道路中心线1",
+            checked:false,
+            layer:{
+                'id': 'roadnetLine1',
+                'type': 'line',
+                'source': {
+                    type: 'vector',
+                    tiles: [ 'http://192.168.10.102:9020/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=yishuixian&X-Token=1ded3fe7'],
+                    minzoom: 1,
+                    maxzoom: 20
+                },
+                "source-layer": "yishuixian",
+                'layout': {
+                    'line-join': 'round',
+                    'line-cap': 'round'
+                },
+                'paint': {
+                    'line-color': [
+                    "case",
+                    ["==", ["get", "handle_status_id"], 0],
+                    "#E6A23C",
+                    ["==", ["get", "handle_status_id"], 1],
+                    "#409EFF",
+                    ["==", ["get", "handle_status_id"], 2],
+                    "#67C23A",
+                    // 默认
+                    "#67C23A",
+                    ],
+                    'line-width': 1
+                }
+            }
+        }
+    ])
+
+  // 图层定位数据
+  const location = reactive([118.556717,35.80391])
+
+  // 图层绘制类型 
+  const type = ref('add')
+
+  // 图斑数据
+  // const feature ="LINESTRING (118.55483239594203 35.81329409678203, 118.54889167836416 35.806406839795216, 118.55647247134772 35.80285975465173, 118.56157492816281 35.803303140294986)"
+     const feature = "POLYGON ((118.54774514802972 35.80786133598188, 118.54515277045988 35.79816597053564, 118.55919536113471 35.80085134034624, 118.56021460056033 35.80462789316549, 118.5595188628206 35.80695604583504, 118.5580066425723 35.80815336506183, 118.54774514802972 35.80786133598188))"
+  // 绘图完成返回geom
+  const handlerDrawComplete = (geom)=>{
+    console.log("绘制完成返回的图斑",geom);
+  }
+
+  // 地图组件
+  const MapboxComponent = ref()
+
+  // 添加 或者 编辑图斑
+  setTimeout(function(){
+    // 添加图斑
+    // MapboxComponent.value.handlerDraw()
+    // 编辑图斑
+    MapboxComponent.value.handlerDraw(feature)
+  },3000)
+
+  // 图斑定位
+  setTimeout(function(){
+    MapboxComponent.value.handlerLocation([118.556717,35.80391]);
+  },6000)
+
+
+
+
+
+
   const mapDrawControl: DrawingType[] = [DrawingType.Polygon, DrawingType.Line];
   const mapOnLoad = (map) => {
+
+    // 
+  
+    
     // map 对象
     console.log('map::: ', map);
     // mapU封装对象