Merge branch 'main' into hc_zhufu

2024-05-20 08:30:06 +08:00 · 2024-05-20 08:30:06 +08:00 · a5d96f31c7
parent bfb33e8b00 24a6b44f4f
commit a5d96f31c7
37 changed files with 1551 additions and 385 deletions
--- 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",
--- a/public/combine.png
+++ b/public/combine.png
--- a/public/del.png
+++ b/public/del.png
--- a/public/iocn/combine.png
+++ b/public/iocn/combine.png
--- a/public/iocn/del.png
+++ b/public/iocn/del.png
--- a/public/iocn/line.png
+++ b/public/iocn/line.png
--- a/public/iocn/point.png
+++ b/public/iocn/point.png
--- a/public/iocn/polygon.png
+++ b/public/iocn/polygon.png
--- a/public/iocn/uncombine.png
+++ b/public/iocn/uncombine.png
--- a/public/line.png
+++ b/public/line.png
--- a/public/point.png
+++ b/public/point.png
--- a/public/polygon.png
+++ b/public/polygon.png
--- a/public/uncombine.png
+++ b/public/uncombine.png
--- a/src/api/demo/formScheme.ts
+++ b/src/api/demo/formScheme.ts
@ -190,37 +190,6 @@ export function functionGetSchemePageList(params: schemePageListModel) {
  });
 }

-// 获取表单分页数据 【先不写】
-export function functionGetFormDataPage(params: AccountParams) {
-  return defHttp.post<FromSchemandAndInfoModel>({
-    url: Api.GetFormDataPage,
-    params,
-  });
-}
-// 获取表单分页数据【先不写】
-export function functionGetFormDataList(params: AccountParams) {
-  return defHttp.post<FromSchemandAndInfoModel>({
-    url: Api.GetFormDataList,
-    params,
-  });
-}
-
-// 获取表单数据【先不写】
-export function functionGetFormDataFormScheme(params: AccountParams) {
-  return defHttp.get<FromSchemandAndInfoModel>({
-    url: Api.GetFormDataFormScheme,
-    params,
-  });
-}
-
-// 保存自定表单数据【先不写】
-export function functionsaveForm(params: AccountParams) {
-  return defHttp.post<FromSchemandAndInfoModel>({
-    url: Api.saveForm,
-    params,
-  });
-}
-
 // CodeTable 数据对象模型管理
 // 获取CodeTable的分页数据
 export function function_Get_LoadCodeTablePage(
@ -280,10 +249,10 @@ export function LoadFormScheme(params) {
 export function AddTable(params) {
  params.dbColumnInfoList.push({
    tableName: params.tableName,
-    dbColumnName: 'gemo',
+    dbColumnName: 'geom',
    dataType: 'geometry',
    length: 0,
-    columnDescription: 'gemo',
+    columnDescription: 'geom',
    isNullable: 0,
    isIdentity: 0,
    isPrimarykey: 0,
@ -296,9 +265,41 @@ export function AddTable(params) {
 }

 // 创建字段
+
 export function AddColumn(params) {
  return defHttp.post({
    url: Api.AddColumn,
    params,
  });
 }
+
+// 获取表单分页数据 【先不写】
+export function functionGetFormDataPage(params: AccountParams) {
+  return defHttp.post<FromSchemandAndInfoModel>({
+    url: Api.GetFormDataPage,
+    params,
+  });
+}
+// 获取表单分页数据【先不写】
+export function functionGetFormDataList(params: AccountParams) {
+  return defHttp.post<FromSchemandAndInfoModel>({
+    url: Api.GetFormDataList,
+    params,
+  });
+}
+
+// 获取表单数据【先不写】
+export function functionGetFormDataFormScheme(params: AccountParams) {
+  return defHttp.get<FromSchemandAndInfoModel>({
+    url: Api.GetFormDataFormScheme,
+    params,
+  });
+}
+
+// 保存自定表单数据【先不写】
+export function functionsaveForm(params: AccountParams) {
+  return defHttp.post<FromSchemandAndInfoModel>({
+    url: Api.saveForm,
+    params,
+  });
+}
--- 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>
--- a/src/components/MapboxMaps/MapComponent.vue
+++ 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>
+    
--- a/src/components/MapboxMaps/MapboxMap.vue
+++ b/src/components/MapboxMaps/MapboxMap.vue
@ -1,293 +1,294 @@
 <template>
-  <div class="map-container">
-    <div id="mapContainer" class="map-box"></div>
-    <!-- <div class="map-control">
-      <img
-        v-for="(item, index) in nextMapControl"
-        :key="index"
-        :src="item.icon"
-        :title="item.title"
-        @click="handlerMapControlClick(item.handler)"
+    <div class="map-container">
+      <div id="mapContainer" class="map-box"></div>
+      <!-- <div class="map-control">
+        <img
+          v-for="(item, index) in nextMapControl"
+          :key="index"
+          :src="item.icon"
+          :title="item.title"
+          @click="handlerMapControlClick(item.handler)"
+        />
+        <img v-show="nextMapControl.length > 0" @click="handlerUnDraw" src="/del.png" title="清除" />
+      </div> -->
+      <LayerComponent
+        @changeOpenModal="changeOpenModal"
+        @changeOpenInsertShpModal="changeOpenInsertShpModal"
      />
-      <img v-show="nextMapControl.length > 0" @click="handlerUnDraw" src="/del.png" title="清除" />
-    </div> -->
-    <LayerComponent
-      @changeOpenModal="changeOpenModal"
-      @changeOpenInsertShpModal="changeOpenInsertShpModal"
-    />
-    <LayerControl @draw="handlerDrawPolygon" />
-    <UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal" />
-    <InsertShp v-model:openModal="insertShpModal" />
-    <DataListComponent />
-    <RightShowInfo v-model:openModal="openRightInfo" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { onMounted, onUnmounted, defineProps, reactive, ref } 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 LayerComponent from './LayerComponent/index.vue';
-  import LayerControl from './LayerControl/index.vue';
-  import UseModal from './Modal/index.vue';
-  import InsertShp from './InsertShp/index.vue';
-  import DataListComponent from './DataListComponent/index.vue';
-  import RightShowInfo from './RightShowInfo/index.vue';
-
-  const openModal = ref(false);
-  const insertShpModal = ref(false);
-  const openRightInfo = 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<MapboxOptionsInterface>();
-
-  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 popup: Popup;
-  let clickPoisition: Array<number> = [];
-  let selectFeature: Object = {};
-  let mp: any = null;
-
-  const { createConfirm, createMessage } = useMessage();
-
-  // 定义地图回调emit
-  // 地图加载完成回调
-  const emit = defineEmits(['mapOnLoad', 'mapDraw']);
-
-  onMounted(() => {
-    mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
-    map = initMap();
-    map.on('load', () => {
-      //挂载mapbox-gl-utils
-      // U.init(map);
-      mp = new MP(map);
-      emit('mapOnLoad', map);
-
-      // 初始化绘图空间
-      handlerInitDrawTool();
-
-      map.on('click', (e) => {
-        clickPoisition = e.lngLat;
-      });
-
-      map.on('draw.selectionchange', (e) => {
-        handlerCopyToTargetLayer(e);
-      });
-
-      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,
-      ...props.mapOptions,
-    });
-  };
-
-  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 = () => {
-    let drawTool = new MapboxDraw({
-      modes: {
-        ...MapboxDraw.modes,
-        draw_point: SnapPointMode,
-        draw_polygon: SnapPolygonMode,
-        draw_line_string: SnapLineMode,
-        direct_select: SnapDirectSelect,
-      },
-      // Styling guides
-      styles: SnapModeDrawStyles,
-      userProperties: true,
-      // Config snapping features
-      snap: true,
-      snapOptions: {
-        snapPx: 15, // defaults to 15
-        snapToMidPoints: true, // defaults to false
-        snapVertexPriorityDistance: 0.0025, // defaults to 1.25
-      },
-      guides: true,
-    });
-
-    map.addControl(drawTool, 'top-right');
-  };
-
-  // 将图斑复制到指定图层
-  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();
+      <LayerControl @draw="handlerDrawPolygon" />
+      <UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal" />
+      <InsertShp v-model:openModal="insertShpModal" />
+      <DataListComponent />
+      <RightShowInfo v-model:openModal="openRightInfo" />
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+    import { onMounted, onUnmounted, defineProps, reactive, ref } 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 LayerComponent from './LayerComponent/index.vue';
+    import LayerControl from './LayerControl/index.vue';
+    import UseModal from './Modal/index.vue';
+    import InsertShp from './InsertShp/index.vue';
+    import DataListComponent from './DataListComponent/index.vue';
+    import RightShowInfo from './RightShowInfo/index.vue';
+  
+    const openModal = ref(false);
+    const insertShpModal = ref(false);
+    const openRightInfo = ref(false);
+    const changeOpenModal = (value) => {
+      openModal.value = value;
+    };
+    const changeOpenInsertShpModal = (value) => {
+      insertShpModal.value = value;
+    };
+  
+    // map参数类型
+    interface MapboxOptionsInterface {
+      mapOptions: mapboxgl.MapboxOptions;
+      control: DrawingType[];
    }
-  };
-
-  const handlerCopyFeature = () => {
-    console.log(selectFeature);
-    popup.remove();
-    createMessage.success('复制成功！');
-  };
-</script>
-
-<style>
-  .mapboxgl-ctrl-group:not(:empty) {
-    box-shadow: none;
-  }
-  .mapboxgl-ctrl-group {
-    background: none !important;
-  }
-  .mapbox-gl-draw_ctrl-draw-btn {
-    width: 40px !important;
-    height: 40px !important;
-    float: left;
-    border-radius: 50%;
-  }
-  .mapboxgl-ctrl-top-right {
-  }
-
-  .mapboxgl-ctrl-group button + button {
-    border: 0px;
-    margin: 0px 3px;
-  }
-
-  .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;
-  }
-
-  .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>
+    const props = defineProps<MapboxOptionsInterface>();
+  
+    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 popup: Popup;
+    let clickPoisition: Array<number> = [];
+    let selectFeature: Object = {};
+    let mp: any = null;
+  
+    const { createConfirm, createMessage } = useMessage();
+  
+    // 定义地图回调emit
+    // 地图加载完成回调
+    const emit = defineEmits(['mapOnLoad', 'mapDraw']);
+  
+    onMounted(() => {
+      mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
+      map = initMap();
+      map.on('load', () => {
+        //挂载mapbox-gl-utils
+        // U.init(map);
+        mp = new MP(map);
+        emit('mapOnLoad', map);
+  
+        // 初始化绘图空间
+        handlerInitDrawTool();
+  
+        map.on('click', (e) => {
+          clickPoisition = e.lngLat;
+        });
+  
+        map.on('draw.selectionchange', (e) => {
+          handlerCopyToTargetLayer(e);
+        });
+  
+        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,
+        ...props.mapOptions,
+      });
+    };
+  
+    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 = () => {
+      let drawTool = new MapboxDraw({
+        modes: {
+          ...MapboxDraw.modes,
+          draw_point: SnapPointMode,
+          draw_polygon: SnapPolygonMode,
+          draw_line_string: SnapLineMode,
+          direct_select: SnapDirectSelect,
+        },
+        // Styling guides
+        styles: SnapModeDrawStyles,
+        userProperties: true,
+        // Config snapping features
+        snap: true,
+        snapOptions: {
+          snapPx: 15, // defaults to 15
+          snapToMidPoints: true, // defaults to false
+          snapVertexPriorityDistance: 0.0025, // defaults to 1.25
+        },
+        guides: true,
+      });
+  
+      map.addControl(drawTool, 'top-right');
+    };
+  
+    // 将图斑复制到指定图层
+    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);
+      popup.remove();
+      createMessage.success('复制成功！');
+    };
+  </script>
+  
+  <style>
+    .mapboxgl-ctrl-group:not(:empty) {
+      box-shadow: none;
+    }
+    .mapboxgl-ctrl-group {
+      background: none !important;
+    }
+    .mapbox-gl-draw_ctrl-draw-btn {
+      width: 40px !important;
+      height: 40px !important;
+      float: left;
+      border-radius: 50%;
+    }
+    .mapboxgl-ctrl-top-right {
+    }
+  
+    .mapboxgl-ctrl-group button + button {
+      border: 0px;
+      margin: 0px 3px;
+    }
+  
+    .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;
+    }
+  
+    .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>
+  
--- a/src/components/MapboxMaps/Modal/ServeResource/index.vue
+++ b/src/components/MapboxMaps/Modal/ServeResource/index.vue
@ -38,8 +38,13 @@
          <div class="button">
            <!-- <a-button type="primary" style="background-color:#09B66D;margin-right: 10px">
              编辑 
+<<<<<<< HEAD
+            </a-button>
+            <a-button type="primary" @click="handlerAddToLayerList">
+=======
            </a-button> -->
            <a-button type="primary">
+>>>>>>> 2aed0750b8d9679d2f0bc47b0c629ecf78313c2c
              <template #icon>
                <PlusOutlined />
              </template>
@ -84,10 +89,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('')
@ -184,6 +192,47 @@ const showInfo = (item) => {
  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>
--- 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>
--- a/src/components/MapboxMaps/RightShowInfo/index.vue
+++ b/src/components/MapboxMaps/RightShowInfo/index.vue
@ -1,5 +1,9 @@
 <template>
+<<<<<<< HEAD
+  <a-drawer class="right-show-info" placement="right"  :open="isOpen" @close="handlerClose">
+=======
  <a-drawer class="right-show-info" placement="right" :open="open" @close="() => (open = false)">
+>>>>>>> 2aed0750b8d9679d2f0bc47b0c629ecf78313c2c
    <div class="title">
      <div class="tag"></div>
      <div class="title-text">操作</div>
@ -16,6 +20,25 @@
 </template>

 <script setup lang="ts">
+<<<<<<< HEAD
+import { ref,defineProps,defineEmits } from "vue"
+import './index.scss'
+
+const props = defineProps({
+  isOpen:{
+    type:Boolean,
+    default:false
+  }
+})
+
+const emits = defineEmits(['handlerClose'])
+
+const handlerClose = () => {
+  emits("handlerClose",false)
+}
+
+
+=======
  import { ref, defineProps, watch } from 'vue';
  import './index.scss';
  const open = ref(true);
@ -26,6 +49,7 @@
      open.value = newValue;
    },
  );
+>>>>>>> 2aed0750b8d9679d2f0bc47b0c629ecf78313c2c
 </script>

 <style lang="scss" scoped>
--- a/src/components/MapboxMaps/Styles/Styles.ts
+++ 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}
--- 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,
--- a/src/components/MapboxMaps/src/WktGeojsonTransform.ts
+++ 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}
--- 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封装对象
--- a/src/views/demo/form-design/components/VFormDesign/components/FormItemProps.vue
+++ b/src/views/demo/form-design/components/VFormDesign/components/FormItemProps.vue
@ -5,6 +5,35 @@
  <div class="properties-content">
    <div class="properties-body" v-if="formConfig.currentItem?.itemProps">
      <Empty class="hint-box" v-if="!formConfig.currentItem.key" description="未选择控件" />
+      <Form
+        v-else-if="formConfig.currentItem.field == 'MapGeom'"
+        label-align="left"
+        layout="vertical"
+        description="地图控件"
+      >
+        <FormItem label="地图宽度">
+          <a-input-number
+            v-model:value="formConfig.mapSetData.width"
+            placeholder="请输入地图宽度"
+            :min="1"
+            :max="100"
+            defaultValue="100"
+          >
+            <template #addonAfter><PercentageOutlined /></template>
+          </a-input-number>
+        </FormItem>
+        <!-- <FormItem label="选择图层">
+        </FormItem> -->
+        <FormItem label="是否允许添加图斑">
+          <Switch v-model:checked="formConfig.mapSetData.isAllowAddPolygon" />
+        </FormItem>
+        <FormItem label="是否允许编辑图斑">
+          <Switch v-model:checked="formConfig.mapSetData.isAllowEditPolygon" />
+        </FormItem>
+        <FormItem label="是否开启位置跳转">
+          <Switch v-model:checked="formConfig.mapSetData.isEnablePostionJump" />
+        </FormItem>
+      </Form>
      <Form v-else label-align="left" layout="vertical">
        <div v-for="item of baseFormItemProps" :key="item.name">
          <FormItem :label="item.label" v-if="showProps(item.exclude)">
@ -14,10 +43,7 @@
              v-bind="item.componentProps"
              :is="item.component"
              v-model:value="formConfig.currentItem[item.name]"
-              :disabled="
-                formConfig.currentItem.field == 'MapGemo' &&
-                (item.name == 'field' || item.name == 'component' || item.name == 'label')
-              "
+              :key="formConfig.currentItem.component + '===' + formConfig.currentItem.label"
            />
          </FormItem>
        </div>
@ -78,7 +104,7 @@
  } from '../../VFormDesign/config/formItemPropsConfig';

  import { Empty, Input, Form, FormItem, Switch, Checkbox, Col, SelectProps } from 'ant-design-vue';
-
+  import { PercentageOutlined } from '@ant-design/icons-vue';
  import RuleProps from './RuleProps.vue';
  import { useFormDesignState } from '../../../hooks/useFormDesignState';
  import { isArray } from 'lodash-es';
@ -94,6 +120,7 @@
          formConfig.value.currentItem.itemProps.labelCol || {};
        formConfig.value.currentItem.itemProps.wrapperCol =
          formConfig.value.currentItem.itemProps.wrapperCol || {};
+        formConfig.value.mapSetData = formConfig.value.mapSetData || {};
      }
    },
    { deep: true, immediate: true },
--- a/src/views/demo/form-design/components/VFormDesign/config/formItemPropsConfig.ts
+++ b/src/views/demo/form-design/components/VFormDesign/config/formItemPropsConfig.ts
@ -185,9 +185,11 @@ export const baseFormItemProps: IBaseFormAttrs[] = [
    label: '控件-FormItem',
    component: Select,
    componentProps: {
-      options: baseComponents
-        .concat(customComponents)
-        .map((item) => ({ value: item.component, label: item.label })),
+      options: baseComponents.concat(customComponents[0]).map((item) => ({
+        value: item.component,
+        label: item.label,
+        key: item.component + '===' + item.label,
+      })),
    },
  },
  {
--- a/src/views/demo/form-design/components/VFormItem/index.vue
+++ b/src/views/demo/form-design/components/VFormItem/index.vue
@ -28,7 +28,7 @@
      <div>
        <img
          src="/mars/img/onlineform/map.png"
-          v-if="schema.field == 'MapGemo'"
+          v-if="schema.field == 'MapGeom'"
          class="v-form-item-wrapper"
          :defaultValue="schema.defaultValue"
          v-bind="{ ...cmpProps, ...asyncProps }"
--- a/src/views/demo/form-design/core/formItemConfig.ts
+++ b/src/views/demo/form-design/core/formItemConfig.ts
@ -135,10 +135,10 @@ export const customComponents: IVFormComponent[] = [
    },
  },
  {
-    component: 'InputGuid',
+    component: 'MapGeom',
    label: '地图',
    icon: 'ant-design:heat-map-outlined',
-    field: 'MapGemo',
+    field: 'MapGeom',
    colProps: { span: 24 },
    componentProps: {},
  },
--- a/src/views/demo/form-design/typings/v-form-component.ts
+++ b/src/views/demo/form-design/typings/v-form-component.ts
@ -72,6 +72,37 @@ export interface IVFormComponent {
  columns?: Array<{ span: number; children: any[] }>;
 }

+/**
+ *  图层字段
+ */
+export interface LayerFields {
+  // GID字段
+  gidField?: string;
+  // 标注字段
+  labelField?: string;
+  // geom字段
+  geomField?: string;
+  // 标注字段options
+  labelFieldOptions?: any[];
+}
+/**
+ * 地图属性
+ */
+export interface MapComponent {
+  // 地图宽度
+  width?: string;
+  // 选择图层
+  chooseLayer: string;
+  // 图层字段解析
+  layerFields?: LayerFields;
+  // 是否允许添加图斑
+  isAllowAddPolygon?: boolean;
+  // 是否允许编辑图斑
+  isAllowEditPolygon?: boolean;
+  // 是否开启位置跳转
+  isEnablePostionJump?: boolean;
+}
+
 declare type namesType = string | string[];

 /**
@ -98,6 +129,7 @@ export interface IFormConfig extends PickAntFormConfig {
  activeKey?: PropsTabKey;
  status?: string;
  defaultValue?: string;
+  mapSetData?: MapComponent;
 }

 export interface AForm {
--- a/src/views/demo/onlineform/formCall/CreateFlow.vue
+++ b/src/views/demo/onlineform/formCall/CreateFlow.vue
@ -100,6 +100,7 @@
        return {};
      },
    },
+    isUpdate: Boolean,
  });
  const emit = defineEmits(['closeModel']);
  const keyValue = ref('');
@ -177,7 +178,7 @@
    var processId = buildGUID();
    var querys = {
      schemeId: designerData.formCurrentNode.formVerison,
-      isUpdate: false,
+      isUpdate: props.isUpdate,
      pkey: keyValue.value,
      pkeyValue: processId,
    };
--- a/src/views/demo/onlineform/formCall/index.vue
+++ b/src/views/demo/onlineform/formCall/index.vue
@ -41,14 +41,20 @@
      :destroyOnClose="true"
    >
      <template #footer> </template>
-      <CreateFlow ref="posRef" :code="flowCode" @closeModel="closeMolder" :flowFormData="flowFormData"/>
+      <CreateFlow
+        ref="posRef"
+        :code="flowCode"
+        @closeModel="closeMolder"
+        :flowFormData="flowFormData"
+        :isUpdate="isUpdate"
+      />
    </a-modal>
  </PageWrapper>
 </template>
 <script lang="ts" setup>
  import { onMounted, ref, nextTick, unref, h } from 'vue';
  import { useRoute } from 'vue-router';
-  import { BasicTable, useTable, BasicColumn } from '@/components/Table';
+  import { BasicTable, useTable, BasicColumn, FormSchema } from '@/components/Table';
  import { BasicTree, TreeItem, TreeActionItem, TreeActionType } from '@/components/Tree';
  import { getFormsDesignData, getFormsPageData, delFormsData } from '@/api/formrender/index';
  import { getOutKeyList } from '@/api/formdesign/index';
@ -82,6 +88,7 @@
  const addParamsArr: any = ref([]);
  const paramsCode = route.query.code;
  const callColumns: BasicColumn[] = [];
+  const searchFormSchema: FormSchema[] = ref([]);
  const btnList: any = ref([]);
  const treeData = ref<TreeItem[]>([]);
  const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
@ -89,6 +96,106 @@
  const previewOpen = ref(false); //是否打开流程发起弹窗
  const flowCode = ref(''); //流程code
  const flowFormData = ref({}); //编辑时表单的数据
+  const isUpdate = ref(false); //是否是编辑
+  if (paramsCode == '数据统计') {
+    searchFormSchema.value = [
+      {
+        field: 'typeid',
+        component: 'ApiSelect',
+        label: '企业类型',
+        colProps: { span: 6 },
+        componentProps: () => {
+          return {
+            // api: getLoadCaseType, // 接口
+            // 接口参数
+            resultField: 'result',
+            labelField: 'itemName',
+            valueField: 'itemDetailId',
+          };
+        },
+      },
+      {
+        field: 'deal_username',
+        component: 'Input',
+        label: '面积（m²）',
+        colProps: { span: 6 },
+      },
+      {
+        field: '[report_start_time, report_end_time]',
+        component: 'RangePicker',
+        label: '成立时间',
+        componentProps: {
+          format: 'YYYY-MM-DD',
+          placeholder: ['开始时间', '结束时间'],
+        },
+        colProps: { span: 8 },
+      },
+      {
+        field: 'is_intact',
+        component: 'Select',
+        label: '是否纳税',
+        colProps: { span: 6 },
+        defaultValue: 1,
+        componentProps: {
+          options: [
+            { label: '未判读', value: 0, key: '0' },
+            { label: '已提交', value: 1, key: '1' },
+            { label: '已关闭', value: 99, key: '99' },
+            { label: '全部', value: null, key: '' },
+          ],
+        },
+      },
+    ];
+  } else if (paramsCode == '数据审核') {
+    searchFormSchema.value = [
+      {
+        field: 'typeid',
+        component: 'ApiSelect',
+        label: '企业类型',
+        colProps: { span: 6 },
+        componentProps: () => {
+          return {
+            // api: getLoadCaseType, // 接口
+            // 接口参数
+            resultField: 'result',
+            labelField: 'itemName',
+            valueField: 'itemDetailId',
+          };
+        },
+      },
+      {
+        field: 'deal_username',
+        component: 'Input',
+        label: '面积（m²）',
+        colProps: { span: 6 },
+      },
+      {
+        field: '[report_start_time, report_end_time]',
+        component: 'RangePicker',
+        label: '成立时间',
+        componentProps: {
+          format: 'YYYY-MM-DD',
+          placeholder: ['开始时间', '结束时间'],
+        },
+        colProps: { span: 8 },
+      },
+      {
+        field: 'is_intact',
+        component: 'Select',
+        label: '是否已审核',
+        colProps: { span: 6 },
+        defaultValue: 1,
+        componentProps: {
+          options: [
+            { label: '未判读', value: 0, key: '0' },
+            { label: '已提交', value: 1, key: '1' },
+            { label: '已关闭', value: 99, key: '99' },
+            { label: '全部', value: null, key: '' },
+          ],
+        },
+      },
+    ];
+  }
  const [registerModal, { openModal }] = useModal();
  const [registerTable, { reload, setColumns, getSelectRows, clearSelectedRowKeys }] = useTable({
    title: '表单列表',
@ -97,6 +204,8 @@
    columns: callColumns,
    formConfig: {
      labelWidth: 120,
+      showAdvancedButton: false,
+      schemas: searchFormSchema,
    },
    rowSelection: {
      type: 'radio',
@ -208,6 +317,7 @@
    console.log('btnList',btnList.value)
    switch (status) {
      case 'Add':
+        console.log(btnList.valueField);
        btnList.value.forEach((element) => {
          if (element.prop === 'Add' && element.isWFlow) {
            flowCode.value = element.wFlowCode;
@ -230,6 +340,7 @@
          }
        } else {
          previewOpen.value = true;
+          isUpdate.value = false;
        }

        break;
@ -260,6 +371,7 @@
        } else {
          previewOpen.value = true;
          flowFormData.value = rows[0];
+          isUpdate.value = true;
        }
        break;
      case 'Delete':
--- a/src/views/demo/onlineform/formModule/FormModal.vue
+++ b/src/views/demo/onlineform/formModule/FormModal.vue
@ -41,6 +41,8 @@
          ref="modalFrom_formData"
          :editData="editData"
          :isNextSteps="isNextSteps"
+          :isEdit="isEdit"
+          :formVerison_now="formVerison_now"
          @set-steps-current="setStepsCurrent"
        />
        <ModalDesign
@ -71,12 +73,14 @@
  // 提交按钮
  let isSubmitClick = ref(false);
  // 是否是编辑
-  let formEdit = false;
+  const isEdit = ref(false);
  // 子组件的暴露属性
  const modalFrom_formData = ref();
  const modalDesign_config = ref();
  // 编辑时发送给子组件的数据
  const editData = ref();
+  // 当前formVerison
+  const formVerison_now = ref();

  const defaultFormData = {
    type: 1,
@ -95,8 +99,9 @@
  };

  const [registerModal, { closeModal }] = useModalInner((data: any) => {
-    formEdit = data.formEdit;
-    if (formEdit) {
+    isEdit.value = data.isEdit;
+    formVerison_now.value = data.formVerison;
+    if (isEdit.value) {
      editData.value = data;
    } else {
      data.record = defaultFormData;
@ -136,7 +141,7 @@
  // 提交
  async function submitClick() {
    const postData = getForm();
-    if (formEdit) {
+    if (isEdit.value) {
      await Post_UpdateForm(postData);
    } else {
      await Post_AddForm(postData);
--- a/src/views/demo/onlineform/formModule/index.vue
+++ b/src/views/demo/onlineform/formModule/index.vue
@ -52,6 +52,7 @@
  import { useMessage } from '@/hooks/web/useMessage';
  import { useModal } from '@/components/Modal';
  import { TreeItem } from '@/components/Tree';
+  import { cloneDeep } from 'lodash-es';
  // 子组件
  import MenuTree from './FormTree.vue';
  import FormModal from './FormModal.vue';
@ -108,15 +109,16 @@
  function handleAddForm() {
    formModalVisible.value = true;
    openModal(true, {
-      formEdit: false,
+      isEdit: false,
    });
  }
  // 表单列表-编辑
  function handleEdit(record: Recordable) {
    formModalVisible.value = true;
    openModal(true, {
-      formEdit: true,
-      record: record,
+      isEdit: true,
+      record: cloneDeep(record),
+      formVerison: record.formVerison,
    });
  }
  // 表单列表-删除
--- a/src/views/demo/onlineform/formModule/modalDesign.vue
+++ b/src/views/demo/onlineform/formModule/modalDesign.vue
@ -80,7 +80,7 @@
  const notInColumns = [
    'Divider',
    'InputGuid',
-    'MapGemo',
+    'MapGeom',
    'Upload',
    'slot',
    'Grid',
@ -188,8 +188,6 @@
      }
    });

-    console.log(columns);
-
    const colunmsMap = {};
    columns.forEach((item) => {
      colunmsMap[item.field] = item;
--- a/src/views/demo/onlineform/formModule/modalForm.vue
+++ b/src/views/demo/onlineform/formModule/modalForm.vue
@ -94,6 +94,14 @@
      type: Boolean,
      default: () => false,
    },
+    isEdit: {
+      type: Boolean,
+      default: () => false,
+    },
+    formVerison_now: {
+      type: String,
+      default: () => '',
+    },
  });
  // 表单栅格
  const labelCol = { span: 4 };
@ -139,7 +147,7 @@
  watch(
    () => props.editData,
    () => {
-      if (props.editData.formEdit) {
+      if (props.isEdit) {
        // 编辑
        setFormData(props.editData.record);
      } else {
@ -198,9 +206,9 @@
    formVerisons.value = formVerisons_temp;

    // 编辑-按照旧的版本
-    if (props.editData.formEdit) {
+    if (props.isEdit) {
      formData.value.formVerison = formVerisons_temp.find((t) => {
-        return t.value === props.editData.record.formVerison;
+        return t.value === props.formVerison_now;
      });
    } else {
      // 新增-默认最新的版本
@ -225,7 +233,7 @@
    const result: any = await functionGetForm(query);
    record.isSys = true;
    formData.value = record;
-    formData.value.formVerison = result.info.schemeId;
+    formData.value.formVerison = props.formVerison_now;
    getSchemeRow(result.info);
  }

--- a/src/views/demo/onlineform/formdesign/FormModal.vue
+++ b/src/views/demo/onlineform/formdesign/FormModal.vue
@ -110,12 +110,13 @@
          tableNames: item.componentProps.dataTable,
        };
        getOutKeyList(params).then((res: Recordable) => {
-          console.log(res);
-          res[0].db_codecolumnsList.forEach((val) => {
-            if (item.componentProps.fieldName == val.dbColumnName) {
-              item.csType = val.csType;
-            }
-          });
+          if (res.length > 0) {
+            res[0].db_codecolumnsList.forEach((val) => {
+              if (item.componentProps.fieldName == val.dbColumnName) {
+                item.csType = val.csType;
+              }
+            });
+          }
        });
      }
      tabArr.push(item.componentProps.fieldName);
--- a/src/views/demo/onlineform/formdesign/modal/AutomaticModal.vue
+++ b/src/views/demo/onlineform/formdesign/modal/AutomaticModal.vue
@ -10,14 +10,20 @@
    :showOkBtn="true"
    :useWrapper="false"
    @ok="submit"
+    @visible-change="
+      () => {
+        dbColumnInfo_new.value = [];
+        dbColumnInfo_new_list = [];
+      }
+    "
  >
-    <a-alert message="() 为主表，字段名可进行修改，数据格式默认为 varchar" type="info" />
+    <a-alert message="主表的字段名可进行修改，数据格式默认为 varchar" type="info" />
    <a-alert
      message="* 表名、字段名由数字、字母或下划线组成，且不能以数字，特殊字符串开头。"
      type="error"
    />
    <a-alert message="* 表名、字段名一旦生成不可修改。" type="error" />
-    <a-alert message="自动建表内的地图组件有专用gemo字段负责，无需配置" type="info" />
+    <a-alert message="自动建表内的地图组件有专用geom字段负责，无需配置" type="info" />
    <a-divider />
    <div style="align: center; width: 80%">
      <a-form ref="formRef" :model="tableInfo" :label-col="labelCol" :wrapper-col="wrapperCol">
@ -34,7 +40,13 @@
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'dbColumnName'">
          <div>
-            <a-input v-model:value="record.dbColumnName" :disabled="!props.isAddVisible" />
+            <a-input
+              v-model:value="record.dbColumnName"
+              :disabled="
+                !props.isAddVisible &&
+                !dbColumnInfo_new_list.includes(record.dbColumnName + record.columnDescription)
+              "
+            />
          </div>
        </template>
        <template v-if="column.key === 'length'">
@ -99,6 +111,7 @@
    decimalDigits: 0,
  };
  let dbColumnInfo_new: any = ref([]);
+  let dbColumnInfo_new_list: any = [];
  // 数据格式-下拉框
  let dataTypeOptions = [
    { label: '字符串', value: 'varchar' },
@ -109,10 +122,11 @@
  ];
  // 不需要添加表结构的
  let componentArray = ['Divider'];
-  let fieldArray = ['MapGemo'];
+  let fieldArray = ['MapGeom'];

  // 异步传参
  const [automaticModal, { closeModal }] = useModalInner(async (data) => {
+    // 获取db
    if (!props.isAddVisible) {
      let query: any = { id: data.saveFormDatas.info.id };
      let result = await functionGetForm(query);
@ -121,18 +135,19 @@
      data_json.db = result_json.db;
      data.saveFormDatas.scheme.scheme = JSON.stringify(data_json);
    }
+    // 表名和备注
    let scheme = JSON.parse(data.saveFormDatas.scheme.scheme);
    tableInfo.value.tableName = scheme.db[0].tableName;
    tableInfo.value.description = scheme.db[0].description;
    tableInfo.value.dbCode = data.saveFormDatas.info.DbCode;
-
+    // 制作表格
    let schemas = scheme.formInfo.schemas;
    tableInfo.value.dbColumnInfoList = [];
    schemas.forEach((item: any) => {
      if (!item.component.includes(componentArray)) {
-        if (item.field.includes(fieldArray)) {
+        if (fieldArray.includes(item.field)) {
          item.componentProps.dataTable = tableInfo.value.tableName;
-          item.componentProps.fieldName = 'gemo';
+          item.componentProps.fieldName = 'geom';
        } else if (!item.dbColumnInfo) {
          // 初始默认值
          let temp = cloneDeep(dbColumnInfo);
@ -146,6 +161,7 @@

          // 编辑-添加新的行
          dbColumnInfo_new.value.push(temp);
+          dbColumnInfo_new_list.push(temp.dbColumnName + temp.columnDescription);
          item.componentProps.dataTable = tableInfo.value.tableName;
          item.componentProps.fieldName = temp.dbColumnName;
        } else {
@ -153,6 +169,7 @@
        }
      }
    });
+    // 表格赋值
    setTableData(tableInfo.value.dbColumnInfoList);
    data.saveFormDatas.scheme.scheme = JSON.stringify(scheme);
    saveFormDatas = data.saveFormDatas;
@ -174,6 +191,8 @@
        await AddColumn(item);
      });
    }
+    dbColumnInfo_new.value = [];
+    dbColumnInfo_new_list = [];
    getFromAndTable();
  }