From c643be246e65998be7f2b14f279f00b0ab78eede Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Fri, 3 Jan 2025 13:25:11 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=BB=B4=E6=8A=A4-?=
 =?UTF-8?q?=E5=9B=BE=E5=BD=A2=E5=8C=96=E5=BB=BA=E8=A1=A8shp=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo/system/graphicaltable/index.vue      |  38 +-
 .../system/graphicaltable/modal/index.vue     | 426 +++++++++---------
 .../system/graphicaltable/modal/modal.data.ts |  57 ++-
 3 files changed, 267 insertions(+), 254 deletions(-)

diff --git a/src/views/demo/system/graphicaltable/index.vue b/src/views/demo/system/graphicaltable/index.vue
index 1102f6b..3c897a1 100644
--- a/src/views/demo/system/graphicaltable/index.vue
+++ b/src/views/demo/system/graphicaltable/index.vue
@@ -27,7 +27,13 @@
         </template>
       </template>
     </BasicTable>
-    <Modal @register="registerModal" @submit="submit" />
+    <Modal
+      :isUpdate="isUpdate"
+      :isDetail="isDetail"
+      :openModal="openModal"
+      :record="record"
+      @submit="submit"
+    />
   </div>
 </template>
 <script lang="ts" setup>
@@ -41,13 +47,14 @@
   // api
   import { loadTableRecordInfo } from '@/api/database/index';
 
+  // 窗口是否打开
+  const openModal = ref(false);
+  const record: any = ref({});
   // 是否是修改
   const isUpdate = ref(false);
   // 是否是详情
   const isDetail = ref(false);
 
-  // 窗口
-  const [registerModal, { openModal }] = useModal();
   // 表格
   const searchInfo = reactive<Recordable>({});
   const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
@@ -78,34 +85,27 @@
   function handleAdd() {
     isUpdate.value = false;
     isDetail.value = false;
-    openModal(true, {
-      isUpdate,
-      isDetail,
-    });
+    openModal.value = true;
+    record.value = null;
   }
   // 查看-打开窗口
-  function handleView(record) {
+  function handleView(value) {
     isUpdate.value = false;
     isDetail.value = true;
-    openModal(true, {
-      isUpdate,
-      isDetail,
-      record,
-    });
+    record.value = value;
+    openModal.value = true;
   }
   // 编辑-打开窗口
-  function handleEdit(record) {
+  function handleEdit(value) {
     isUpdate.value = true;
     isDetail.value = false;
-    openModal(true, {
-      isUpdate,
-      isDetail,
-      record,
-    });
+    record.value = value;
+    openModal.value = true;
   }
 
   // 新增、编辑、删除-提交后刷新
   function submit() {
+    openModal.value = false;
     clearSelectedRowKeys();
     reload();
   }
diff --git a/src/views/demo/system/graphicaltable/modal/index.vue b/src/views/demo/system/graphicaltable/modal/index.vue
index f51c1e3..1415425 100644
--- a/src/views/demo/system/graphicaltable/modal/index.vue
+++ b/src/views/demo/system/graphicaltable/modal/index.vue
@@ -1,92 +1,108 @@
 <template>
-  <BasicModal
-    v-bind="$attrs"
-    @register="registerModal"
-    :centered="true"
-    :canFullscreen="false"
-    :defaultFullscreen="false"
-    :showCancelBtn="!isDetail"
-    :showOkBtn="!isDetail"
-    :draggable="false"
+  <a-modal
+    v-model:open="props.openModal"
     :title="getTitle"
-    :useWrapper="true"
-    :width="900"
+    style="top: 50px"
+    :width="1200"
     :maskClosable="false"
     @ok="handleOk"
+    @cancle="handleCancle"
   >
+    <template #closeIcon>
+      <CloseOutlined :style="{ fontSize: '20px' }" @click="handleCancle" />
+    </template>
+    <template #footer>
+      <a-button v-if="!isDetail" @click="handleCancle">取消</a-button>
+      <a-button v-if="!isDetail" type="primary" @click="handleOk">确认</a-button>
+    </template>
     <div class="box-container">
       <div class="flex mb-3">
         <div class="tab-label"><span class="red">*</span>表名：</div>
-        <a-input v-model:value="tableName" placeholder="请输入表名" :disabled="isUpdate" />
+        <a-input
+          v-model:value="tableName"
+          placeholder="请输入表名"
+          :status="!/^(?!^\d+$)[a-z0-9_]+$/.test(tableName) ? 'error' : ''"
+          :disabled="isDetail"
+        />
+      </div>
+      <p style="color: #ff0000; font-size: 12px" v-if="!/^(?!^\d+$)[a-z0-9_]+$/.test(tableName)">
+        使用小写字母、数字、下划线的组合，且不得以数字开头
+      </p>
+      <div class="flex mb-3">
+        <div class="tab-label">注释：</div>
+        <a-input v-model:value="tableNote" placeholder="请输入注释" :disabled="isDetail" />
       </div>
     </div>
     <BasicTable class="w-3/4 xl:w-5/5" @register="registerTable">
       <template #toolbar>
         <a-button type="primary" @click="handleAdd" v-if="!isDetail"> 新增 </a-button>
-        <a-button type="primary" @click="handleAddGeom" v-if="!isUpdate && !isDetail">
-          空间建表
-        </a-button>
       </template>
       <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'name' && !isDetail">
+        <template v-if="column.key === 'shpField' && !isDetail">
           <a-input
-            v-model:value="record.name"
-            placeholder="请输入字段名"
-            :disabled="record.name == 'geom' || isBasic"
-            @change="
-              if (changeNameAndType()) {
-                if (record.name == 'geom' && record.type != 'geometry(GEOMETRY)') {
-                  record.type = 'geometry(GEOMETRY)';
-                }
-              }
-            "
+            v-model:value="record.shpField"
+            placeholder="请输入Shp原始字段"
+            @change="record.enName = record.shpField.toLowerCase()"
           />
         </template>
         <template v-if="column.key === 'type' && !isDetail">
           <a-select
             style="width: 100%"
-            ref="select"
-            placeholder="请选择"
             v-model:value="record.type"
-            :options="codesTypeArr"
-            :disabled="isBasic"
+            :options="typeOptions"
+            placeholder="请选择数据类型"
             @change="
-              if (changeNameAndType()) {
-                if (record.type == 'geometry(GEOMETRY)') {
-                  record.name = 'geom';
-                } else if (record.name && record.name == 'geom') {
-                  record.name = '';
-                }
-              }
+              ['text', 'bool', 'data', 'geometry(GEOMETRY)'].includes(record.type)
+                ? (record.length = 0)
+                : 'varchar' == record.type
+                  ? (record.length = 255)
+                  : (record.length = 10)
             "
           />
         </template>
-        <template v-if="column.key === 'type' && isDetail">
-          {{ getCodesTypeArrByType(record.type) }}
-        </template>
-        <template v-if="column.key === 'explanation' && !isDetail">
-          <a-input v-model:value="record.explanation" placeholder="不能含有英文字符的,和:" />
-        </template>
-        <template v-if="column.key === 'action' && (!record.isOldColumn || !isUpdate)">
-          <TableAction
-            :actions="[
-              {
-                label: '删除',
-                color: 'error',
-                onClick: () => {
-                  handleDelete(record);
-                },
-              },
-            ]"
+        <template v-if="column.key === 'length' && !isDetail">
+          <a-input-number
+            v-model:value="record.length"
+            :min="0"
+            placeholder="请输入数据长度"
+            :disabled="['text', 'bool', 'data', 'geometry(GEOMETRY)'].includes(record.type)"
           />
         </template>
+        <template v-if="column.key === 'enName' && !isDetail">
+          <span class="content-full">
+            <a-input
+              v-model:value="record.enName"
+              placeholder="请输入英文名称"
+              :status="
+                !/^[a-z_][a-z0-9_]*$/.test(record.enName) || checkRepeat(record.enName)
+                  ? 'error'
+                  : ''
+              "
+              @change="record.enName = record.enName.toLowerCase()"
+            />
+            <p
+              :style="{
+                color: '#ff0000',
+                fontSize: checkRepeat(record.enName) == '' ? '0px' : '12px',
+              }"
+            >
+              {{ checkRepeat(record.enName) }}
+            </p>
+          </span>
+        </template>
+        <template v-if="column.key === 'chName' && !isDetail">
+          <a-input v-model:value="record.chName" placeholder="请输入中文名称" />
+        </template>
+        <template v-if="column.key === 'action'">
+          <a-button type="link" style="color: red" @click="handleDelete(record)">删除</a-button>
+        </template>
       </template>
     </BasicTable>
-  </BasicModal>
+  </a-modal>
 </template>
 <script lang="ts" setup>
-  import { ref, onMounted, defineEmits } from 'vue';
-  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { ref, onMounted, defineEmits, watch } from 'vue';
+  import { CloseOutlined } from '@ant-design/icons-vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { columns, columns_isDetail } from './modal.data';
   import { useMessage } from '@/hooks/web/useMessage';
@@ -94,66 +110,68 @@
   import { createPicTable, updateTable, CheckTableExist } from '@/api/database/index';
   import { getLoad } from '@/api/sys/sysDataItemDetail';
 
+  const props = defineProps(['isUpdate', 'isDetail', 'openModal', 'record']);
   const emit = defineEmits(['submit']);
   const { createMessage } = useMessage();
 
-  // 是否是修改
-  const isUpdate = ref(false);
-  // 是否是详情
-  const isDetail = ref(false);
-  // 是否是标准化
-  const isBasic = ref(false);
   const tableName: any = ref('');
+  const tableNote: any = ref('');
   const getTitle: any = ref('');
   const tableColumns: any = ref([]);
-  const codesTypeArr: any = ref([
-    { label: 'varchar', value: 'varchar' },
-    { label: 'int', value: 'int' },
-    { label: 'date', value: 'date' },
+  const typeOptions: any = ref([
+    { label: '字符串 varchar', value: 'varchar' },
+    { label: '时间 date', value: 'date' },
+    { label: '空间类型 geometry(GEOMETRY)', value: 'geometry(GEOMETRY)' },
+    { label: '长文本 text', value: 'text' },
+    { label: '数字 int8', value: 'int8' },
+    { label: '是否 bool', value: 'bool' },
   ]);
 
-  // 窗口
-  const [registerModal, { setModalProps, closeModal }] = useModalInner((data) => {
-    setModalProps({ confirmLoading: false });
-    isUpdate.value = data.isUpdate;
-    isDetail.value = data.isDetail;
-
-    // 新增
-    if (!data.record) {
-      getTitle.value = '新增';
-      tableName.value = null;
-      setTableData([]);
-      handleAdd();
-      reload();
-    } else {
-      // 编辑、详情
-      getTitle.value = '详情';
-      tableName.value = data.record.tableName;
-      const lines = data.record.columnJson.split(':');
-      let arr: any = [];
-      for (const line of lines) {
-        const i = line.split(',');
-        arr.push({
-          name: i[0],
-          yuanName: i[0],
-          type: i[1],
-          explanation: i[2],
-          length: 255,
-          id: new Date().getTime(),
-          isOldColumn: true,
-        });
+  watch(
+    () => props.openModal,
+    () => {
+      if (props.openModal) {
+        // 新增
+        if (!props.record) {
+          getTitle.value = '新增';
+          tableName.value = null;
+          tableNote.value = null;
+          setTimeout(() => {
+            setTableData([]);
+            handleAdd(1);
+            reload();
+          }, 100);
+        } else {
+          // 编辑、详情
+          getTitle.value = '详情';
+          tableName.value = props.record.tableName;
+          tableNote.value = props.record.tableNote;
+          const lines = props.record.columnJson.split(':');
+          let arr: any = [];
+          for (const line of lines) {
+            const i = line.split(',');
+            arr.push({
+              id: new Date().getTime(),
+              shpField: i[0],
+              type: i[1],
+              length: ['text', 'bool', 'data', 'geometry(GEOMETRY)'].includes(i[1]) ? 0 : 255,
+              enName: i[0].toLowerCase(),
+              chName: i[2],
+              isOldColumn: true,
+            });
+          }
+          setTableData(arr);
+          reload();
+        }
+        // 详情隐藏按钮
+        if (props.isDetail) {
+          tableColumns.value = columns_isDetail;
+        } else {
+          tableColumns.value = columns;
+        }
       }
-      isBasic.value = false;
-      setTableData(arr);
-      reload();
-    }
-    // 详情隐藏按钮
-    if (isDetail.value) {
-      tableColumns.value = columns_isDetail;
-    } else {
-      tableColumns.value = columns;
-    }
-  });
+    },
+  );
 
   // 表格
   const [registerTable, { reload, setTableData, getDataSource }] = useTable({
@@ -162,43 +180,28 @@
     formConfig: {
       labelWidth: 120,
     },
-    canResize: false,
     useSearchForm: false,
     showTableSetting: false,
     showIndexColumn: true,
     bordered: true,
+    canResize: true,
+    maxHeight: 500,
+    pagination: false,
     handleSearchInfoFn(info) {
       return info;
     },
   });
   // 新增
-  function handleAdd() {
+  function handleAdd(num = 0) {
     let viesObj: any = getDataSource() || [];
-    viesObj.push({ name: '', type: '', explanation: '', length: 255, id: new Date().getTime() });
-    isBasic.value = false;
-    setTableData(viesObj);
-    reload();
-  }
-  // 新增
-  function handleAddGeom() {
-    let viesObj: any = [];
-    viesObj.push(
-      {
-        name: 'gid',
-        type: 'varchar',
-        explanation: '',
-        length: 255,
-        id: new Date().getTime(),
-      },
-      {
-        name: 'geom',
-        type: 'geometry(GEOMETRY)',
-        explanation: '',
-        length: 255,
-        id: new Date().getTime(),
-      },
-    );
-    isBasic.value = true;
+    viesObj.push({
+      id: new Date().getTime() + num,
+      shpField: null,
+      type: null,
+      length: null,
+      enName: null,
+      chName: null,
+    });
     setTableData(viesObj);
     reload();
   }
@@ -211,20 +214,26 @@
         newArr.push(item);
       }
     });
-    if (
-      newArr.length == 2 &&
-      newArr[0].name == 'gid' &&
-      newArr[0].type == 'varchar' &&
-      newArr[1].name == 'geom' &&
-      newArr[1].type == 'geometry(GEOMETRY)'
-    ) {
-      isBasic.value = true;
-    } else {
-      isBasic.value = false;
-    }
     setTableData(newArr);
     reload();
   }
+  // 使用小写字母、数字、下划线的组合，且不得以数字开头
+  // 筛查重复英文名称
+  function checkRepeat(enName) {
+    let erroeMessage = '';
+    if (enName != '' && enName != null) {
+      let sortArr: any = getDataSource().map((item) => item.enName);
+      if (sortArr.filter((item) => item == enName).length > 1) {
+        erroeMessage = '英文名称不能重复';
+      }
+      if (!/^[a-z_][a-z0-9_]*$/.test(enName)) {
+        erroeMessage = '使用小写字母、数字、下划线的组合，且不得以数字开头';
+      }
+    } else {
+      erroeMessage = '';
+    }
+    return erroeMessage;
+  }
   // 提交
   async function handleOk() {
     // 检测：表名
@@ -253,121 +262,95 @@
       return;
     }
     let flag = true;
+    let sortArr: any = [];
     if (arr) {
       arr.forEach((item) => {
-        // 检测：字段名和字段类型不为空
-        if (item.name == '' || item.type == '') {
-          createMessage.warn('字段名和字段类型都是必填项!');
-          flag = false;
-        }
-        // 检测：字段名中不能含有中文!
-        if (/[\u4e00-\u9fa5]/.test(item.name)) {
-          createMessage.warn('字段名中不能含有中文!');
-          flag = false;
-        }
-        // 检测：数据库字段名的命名规则
-        if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(item.name)) {
-          createMessage.warn('字段名不符合数据库字段名的命名规则!');
-          flag = false;
-        }
-        // 检测：备注不能含有英文字符的,和:
-        if (
-          item.explanation &&
-          (item.explanation.indexOf(':') > -1 || item.explanation.indexOf(',') > -1)
-        ) {
-          createMessage.warn('备注内不能含有英文字符的,和:');
-          flag = false;
+        if (flag) {
+          // 检测：字段名和字段类型不为空
+          if (item.enName == null || item.enName == '' || item.type == null || item.type == '') {
+            createMessage.warn('英文名称和数据类型都是必填项!');
+            flag = false;
+          }
+          // 检测：数据库字段名的命名规则
+          if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(item.enName)) {
+            createMessage.warn('英文名称不符合数据库字段名的命名规则!');
+            flag = false;
+          }
+          // 检测：备注不能含有英文字符的,和:
+          if (item.chName && (item.chName.indexOf(':') > -1 || item.chName.indexOf(',') > -1)) {
+            createMessage.warn('中文名称内不能含有英文字符的【,】和【:】');
+            flag = false;
+          }
         }
+        // 筛查重复英文名称
+        sortArr.push(item.enName);
       });
     }
+    // 筛查重复英文名称
+    if (flag && sortArr.length != [...new Set(sortArr)].length) {
+      createMessage.warn('英文名称有重复项');
+      flag = false;
+    }
     // 无错误才能继续进行
     if (flag) {
       let newArr: any = [];
       arr.forEach((item) => {
+        console.log(item);
         newArr.push({
-          name: item.name,
-          yuanName: item.name,
+          shpField: item.shpField,
           type: item.type,
-          explanation: item.explanation,
+          length: item.length,
+          name: item.enName,
+          explanation: item.chName,
         });
       });
       const param: any = {
         tableName: tableName.value,
+        tableNote: tableNote.value,
         tableInfos: newArr,
       };
       // console.log('param', param);
-      if (isUpdate.value) {
+      if (props.isUpdate) {
         updateTable(param).then((res: Recordable) => {
           console.log('res', res);
           setTableData([]);
           tableName.value = null;
+          tableNote.value = null;
           emit('submit');
-          closeModal();
         });
       } else {
         createPicTable(param).then((res: Recordable) => {
           console.log('res', res);
           setTableData([]);
           tableName.value = null;
+          tableNote.value = null;
           emit('submit');
-          closeModal();
         });
       }
     }
   }
+  // 关闭
+  function handleCancle() {
+    setTableData([]);
+    emit('submit');
+  }
   // 字典类型
-  async function getCodesTypeArr() {
+  async function getDataTypeOptions() {
     getLoad({ code: 'clounm_type' }).then((res) => {
       if (res) {
-        codesTypeArr.value = [];
-        res.forEach((item) => {
-          codesTypeArr.value.push({ label: item.itemName, value: item.itemValue });
+        typeOptions.value = [];
+        res?.forEach((item) => {
+          typeOptions.value.push({
+            label: item.itemName + ' ' + item.itemValue,
+            value: item.itemValue,
+          });
         });
       }
     });
   }
-  // 详情情况下的类型
-  function getCodesTypeArrByType(type) {
-    for (const codesType of codesTypeArr.value) {
-      if (codesType.value === type) {
-        return codesType.label;
-      }
-    }
-    return '';
-  }
-  // 检测：只能有一个geom和geometry(GEOMETRY)
-  function changeNameAndType() {
-    let arr = getDataSource();
-    // geom出现的次数
-    let geomNumber = 0;
-    // geom当前出现的数组
-    let geomShowIndex = 0;
-    arr.forEach((item, index) => {
-      if (item.name == 'geom' || item.type == 'geometry(GEOMETRY)') {
-        geomNumber++;
-        geomShowIndex = index;
-      }
-    });
-    if (geomNumber < 2) {
-      return true;
-    } else {
-      createMessage.warn('一个表同时只能有一个geom和空间类型！');
-      // 赋值
-      arr[geomShowIndex] = {
-        name: '',
-        yuanName: arr[geomShowIndex].yuanName,
-        type: '',
-        explanation: arr[geomShowIndex].explanation,
-        length: arr[geomShowIndex].length,
-        id: arr[geomShowIndex].id,
-      };
-      setTableData(arr);
-      return false;
-    }
-  }
 
   onMounted(() => {
-    getCodesTypeArr();
+    getDataTypeOptions();
   });
 </script>
 <style>
@@ -384,4 +367,11 @@
   .red {
     color: red;
   }
+  .content-full {
+    white-space: pre-wrap;
+    word-break: break-all;
+    overflow-wrap: break-word;
+    max-width: 100%;
+    display: block;
+  }
 </style>
diff --git a/src/views/demo/system/graphicaltable/modal/modal.data.ts b/src/views/demo/system/graphicaltable/modal/modal.data.ts
index 5c24f57..f7e777d 100644
--- a/src/views/demo/system/graphicaltable/modal/modal.data.ts
+++ b/src/views/demo/system/graphicaltable/modal/modal.data.ts
@@ -2,41 +2,64 @@ import { BasicColumn } from '@/components/Table';
 
 export const columns: BasicColumn[] = [
   {
-    title: '字段名',
-    dataIndex: 'name',
-    key: 'name',
+    title: 'Shp原始字段',
+    dataIndex: 'shpField',
+    width: 150,
   },
   {
-    title: '类型',
+    title: '数据类型',
+    helpMessage: ['必选项'],
     dataIndex: 'type',
-    key: 'type',
+    width: 150,
   },
   {
-    title: '备注',
-    dataIndex: 'explanation',
-    key: 'explanation',
+    title: '数据长度',
+    dataIndex: 'length',
+    width: 150,
+  },
+  {
+    title: '英文名称',
+    helpMessage: ['1.使用小写字母、数字、下划线的组合，且不得以数字开头', '2.英文名称不能重复'],
+    dataIndex: 'enName',
+    width: 150,
+  },
+  {
+    title: '中文名称',
+    helpMessage: ['备注'],
+    dataIndex: 'chName',
+    width: 150,
   },
   {
     title: '操作',
     dataIndex: 'action',
-    key: 'action',
+    width: 100,
   },
 ];
 
 export const columns_isDetail: BasicColumn[] = [
   {
-    title: '字段名',
-    dataIndex: 'name',
-    key: 'name',
+    title: 'Shp原始字段',
+    dataIndex: 'shpField',
+    width: 150,
   },
   {
-    title: '类型',
+    title: '数据类型',
     dataIndex: 'type',
-    key: 'type',
+    width: 150,
   },
   {
-    title: '备注',
-    dataIndex: 'explanation',
-    key: 'explanation',
+    title: '数据长度',
+    dataIndex: 'length',
+    width: 100,
+  },
+  {
+    title: '英文名称',
+    dataIndex: 'enName',
+    width: 150,
+  },
+  {
+    title: '中文名称',
+    dataIndex: 'chName',
+    width: 150,
   },
 ];

From aecb8a510f3f90d0c5e0e1bb39f3e674013668f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Sat, 4 Jan 2025 10:26:43 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=9B=BE=E5=B1=82=E7=AE=A1=E7=90=86+?=
 =?UTF-8?q?=E5=9B=BE=E5=B1=82=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/LayerBottom.vue                |  43 ++
 .../components/LayerComponent.vue             | 259 +++++++++
 .../components/LayerControl.vue               |  71 +++
 .../components/LayerDrawer.vue                | 131 +++++
 .../layermanagement/components/LayerTable.vue |  56 ++
 .../layermanagement/components/LayerTree.vue  | 544 ++++++++++++++++++
 .../layermanagement/components/MapboxMap.vue  | 162 ++++++
 .../components/import/index.vue               | 189 ++++++
 .../components/modal/OfflineFile.vue          |  55 ++
 .../components/modal/ServeResource.vue        | 351 +++++++++++
 .../components/modal/ThirdPartyServe.vue      | 117 ++++
 .../components/modal/index.vue                |  46 ++
 .../layermanagement/components/modal/util.ts  |  87 +++
 .../system/layermanagement/components/util.ts |  26 +
 .../demo/system/layermanagement/index.vue     |   9 +
 15 files changed, 2146 insertions(+)
 create mode 100644 src/views/demo/system/layermanagement/components/LayerBottom.vue
 create mode 100644 src/views/demo/system/layermanagement/components/LayerComponent.vue
 create mode 100644 src/views/demo/system/layermanagement/components/LayerControl.vue
 create mode 100644 src/views/demo/system/layermanagement/components/LayerDrawer.vue
 create mode 100644 src/views/demo/system/layermanagement/components/LayerTable.vue
 create mode 100644 src/views/demo/system/layermanagement/components/LayerTree.vue
 create mode 100644 src/views/demo/system/layermanagement/components/MapboxMap.vue
 create mode 100644 src/views/demo/system/layermanagement/components/import/index.vue
 create mode 100644 src/views/demo/system/layermanagement/components/modal/OfflineFile.vue
 create mode 100644 src/views/demo/system/layermanagement/components/modal/ServeResource.vue
 create mode 100644 src/views/demo/system/layermanagement/components/modal/ThirdPartyServe.vue
 create mode 100644 src/views/demo/system/layermanagement/components/modal/index.vue
 create mode 100644 src/views/demo/system/layermanagement/components/modal/util.ts
 create mode 100644 src/views/demo/system/layermanagement/components/util.ts
 create mode 100644 src/views/demo/system/layermanagement/index.vue

diff --git a/src/views/demo/system/layermanagement/components/LayerBottom.vue b/src/views/demo/system/layermanagement/components/LayerBottom.vue
new file mode 100644
index 0000000..0721b0f
--- /dev/null
+++ b/src/views/demo/system/layermanagement/components/LayerBottom.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="LayerBottom">
+    <div class="LayerBottomDiv">
+      <span>经度：</span>
+      <span>纬度：</span>
+      <span>横</span>
+      <span>纵</span>
+      <span>海拔：米</span>
+      <span>层级：</span>
+      <span>方向： °</span>
+      <span>俯仰角： °</span>
+      <span>视高：米</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+  .LayerBottom {
+    background-color: black;
+    color: white;
+    position: absolute;
+    bottom: 0px;
+    height: 30px;
+    width: calc(100% - 356px);
+    // text-align: center;
+    // 页面不能被选中
+    -webkit-user-select: none; /* Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE/Edge */
+    user-select: none;
+  }
+
+  .LayerBottomDiv {
+    position: absolute;
+    right: 100px;
+    span {
+      line-height: 30px;
+      margin-left: 30px;
+    }
+  }
+</style>
diff --git a/src/views/demo/system/layermanagement/components/LayerComponent.vue b/src/views/demo/system/layermanagement/components/LayerComponent.vue
new file mode 100644
index 0000000..57d18b7
--- /dev/null
+++ b/src/views/demo/system/layermanagement/components/LayerComponent.vue
@@ -0,0 +1,259 @@
+<template>
+  <div class="LayerComponent lightOrDark1">
+    <div class="title">图层</div>
+    <div class="insert-layer lightOrDark2">
+      <a-button class="add-layer-button blue" type="primary" @click="changeClick">
+        <PlusOutlined />叠加图层
+      </a-button>
+      <a-button type="text" class="clear-layer-button" @click="handlerClearLayerList">
+        <DeleteOutlined />清空
+      </a-button>
+    </div>
+    <div class="show-current-layer lightOrDark2">
+      <div class="current-layer-div">
+        <div class="current-layer-title">当前图层</div>
+        <div class="create-new-layer-button" @click="openInsertShpModal">创建新图层</div>
+      </div>
+    </div>
+    <div class="show-layers">
+      <a-empty
+        v-if="props.layerList.length == 0"
+        image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
+        :image-style="{
+          height: '60px',
+        }"
+        style="margin-top: 120px"
+      >
+        <template #description>
+          <span> 暂无数据，需要将服务添加到工作区 </span>
+        </template>
+        <a-button type="primary" class="blue" @click="changeClick">叠加服务</a-button>
+      </a-empty>
+
+      <a-card
+        hoverable
+        style="width: 326px; margin-bottom: 15px"
+        v-for="(item, index) in props.layerList"
+        :key="index"
+      >
+        <a-row>
+          <a-col :span="2">
+            <a-checkbox
+              v-model:checked="item.checked"
+              style="margin-top: 25px"
+              @change="handlerLayerShowChange(item)"
+            />
+          </a-col>
+          <a-col :span="10">
+            <a-image src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
+          </a-col>
+          <a-col :span="12">
+            <div style="margin-left: 10px">
+              <div style="height: 50px"><span>名称：</span></div>
+              <div>
+                <a-button
+                  v-if="index != 0"
+                  type="success"
+                  size="small"
+                  style="margin-right: 8px"
+                  @click="setLayerTableShow(item)"
+                >
+                  查看数据
+                </a-button>
+                <a-button
+                  type="primary"
+                  class="blue"
+                  size="small"
+                  @click="setLayerDrawerShow(item)"
+                >
+                  操作
+                </a-button>
+              </div>
+            </div>
+          </a-col>
+        </a-row>
+      </a-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import {
+    PlusOutlined,
+    SettingOutlined,
+    EditOutlined,
+    EllipsisOutlined,
+    DeleteOutlined,
+    TableOutlined,
+  } from '@ant-design/icons-vue';
+  import { h, defineEmits, ref, defineProps } from 'vue';
+
+  const props = defineProps({
+    layerList: {
+      type: Array,
+      default: [],
+    },
+  });
+
+  const isSelected = ref();
+  const emits = defineEmits([
+    // 叠加服务
+    'serveModalCancle',
+    // 创建新图层
+    'changeOpenInsertShpModal',
+    // 清空按钮
+    'clearLayerList',
+    // 单选框改变
+    'handlerLayerShowChange',
+    // 查看数据
+    'setLayerTableShow',
+    // 操作
+    'setLayerDrawerShow',
+  ]);
+  // 叠加服务
+  const changeClick = () => {
+    emits('serveModalCancle', true);
+  };
+  // 创建新图层
+  const openInsertShpModal = () => {
+    emits('changeOpenInsertShpModal', true);
+  };
+  const selectLayer = (id: number) => {
+    isSelected.value = id;
+  };
+  // 清空按钮
+  const handlerClearLayerList = () => {
+    emits('clearLayerList');
+  };
+
+  const removeLayer = (layer) => {
+    layer.checked = false;
+    emits('handlerLayerShowChange', layer);
+    props.layerList?.forEach((item, index) => {
+      if (item.id == layer.id) {
+        props.layerList.splice(index, 1);
+      }
+    });
+  };
+
+  // 单选框改变
+  const handlerLayerShowChange = (layer) => {
+    emits('handlerLayerShowChange', layer);
+  };
+
+  // 查看数据
+  function setLayerTableShow(item) {
+    emits('setLayerTableShow', true, item);
+  }
+  // 操作
+  function setLayerDrawerShow(item) {
+    emits('setLayerDrawerShow', true, item);
+  }
+</script>
+
+<style lang="scss" scoped>
+  html[data-theme='light'] {
+    .lightOrDark1 {
+      background-color: #e0e5ed;
+    }
+    .lightOrDark2 {
+      background-color: #ffffff;
+    }
+  }
+  [data-theme='dark'] {
+    .lightOrDark1 {
+      background-color: #000000;
+    }
+    .lightOrDark2 {
+      background-color: #141414;
+    }
+  }
+  .LayerComponent {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 356px;
+    height: 100%;
+    .title {
+      height: 61px;
+      font-size: 26px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .insert-layer {
+      height: 61px;
+
+      padding-left: 16px;
+      padding-right: 14px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+      .add-layer-button {
+        background-color: #0081ff;
+      }
+      .clear-layer-button {
+        user-select: none;
+        cursor: pointer;
+      }
+    }
+    .show-current-layer {
+      border-radius: 5px;
+      margin-left: 15px;
+      margin-right: 15px;
+      .current-layer-div {
+        height: 37px;
+        display: flex;
+        user-select: none;
+        .current-layer-title {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          border-top-left-radius: 5px;
+          border-bottom-left-radius: 5px;
+        }
+        .current-layer-title::before {
+          content: '';
+          display: block;
+          width: 7px;
+          height: 7px;
+          background-color: #09b66d;
+          border-radius: 50%;
+          margin: 6px;
+        }
+        .create-new-layer-button {
+          width: 106px;
+          background-color: #0081ff;
+          color: #fff;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-top-right-radius: 5px;
+          border-bottom-right-radius: 5px;
+          cursor: pointer;
+        }
+      }
+    }
+    .show-layers {
+      height: calc(100% - 179px);
+      padding-top: 14px;
+      padding-left: 15px;
+      padding-right: 15px;
+      overflow: auto;
+    }
+    .select-list-item {
+      border: 1px solid;
+    }
+  }
+
+  .item-title {
+    line-height: 24px;
+    color: #777;
+  }
+
+  ::v-deep .ant-card .ant-card-body {
+    padding: 12px !important;
+    border-radius: 0px !important;
+  }
+</style>
diff --git a/src/views/demo/system/layermanagement/components/LayerControl.vue b/src/views/demo/system/layermanagement/components/LayerControl.vue
new file mode 100644
index 0000000..04cad08
--- /dev/null
+++ b/src/views/demo/system/layermanagement/components/LayerControl.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="LayerControl lightOrDark">
+    <a-button type="primary" class="blue line-up" @click="drawClick" :icon="h(EditOutlined)">
+      绘制
+    </a-button>
+    <a-button type="primary" class="blue line-up" :icon="h(FormOutlined)">编辑</a-button>
+    <a-button type="primary" class="blue last-line-up" :icon="h(BlockOutlined)">合并</a-button>
+    <a-button type="primary" class="orange line-up" :icon="h(SplitCellsOutlined)">分割</a-button>
+    <a-button type="primary" class="orange last-line-up" :icon="h(DeleteOutlined)">删除</a-button>
+    <a-button type="primary" class="green line-up" :icon="h(DragOutlined)">移动</a-button>
+    <a-button type="primary" class="green line-up" :icon="h(RollbackOutlined)">撤回</a-button>
+    <a-button type="primary" class="green" :icon="h(CloseCircleOutlined)">取消</a-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import {
+    EditOutlined,
+    FormOutlined,
+    BlockOutlined,
+    SplitCellsOutlined,
+    DragOutlined,
+    DeleteOutlined,
+    RollbackOutlined,
+    CloseCircleOutlined,
+  } from '@ant-design/icons-vue';
+  import { h } from 'vue';
+  const emit = defineEmits(['draw']);
+  function drawClick() {
+    emit('draw');
+  }
+</script>
+
+<style lang="scss" scoped>
+  html[data-theme='light'] {
+    .lightOrDark {
+      background-color: #fff;
+    }
+  }
+  [data-theme='dark'] {
+    .lightOrDark {
+      background-color: #000000;
+    }
+  }
+
+  .LayerControl {
+    position: absolute;
+    top: 20px;
+    left: 386px;
+    border-radius: 8px;
+    padding: 13px 13px 8px 13px;
+    button {
+      margin-bottom: 5px;
+    }
+  }
+  .blue {
+    background-color: #0081ff;
+  }
+  .orange {
+    background-color: #ff8a48;
+  }
+  .green {
+    background-color: #09b66d;
+  }
+  .line-up {
+    margin-right: 10px;
+  }
+  .last-line-up {
+    margin-right: 15px;
+  }
+</style>
diff --git a/src/views/demo/system/layermanagement/components/LayerDrawer.vue b/src/views/demo/system/layermanagement/components/LayerDrawer.vue
new file mode 100644
index 0000000..1aa319b
--- /dev/null
+++ b/src/views/demo/system/layermanagement/components/LayerDrawer.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="LayerDrawer lightOrDark">
+    <div class="title">
+      <span
+        :style="{
+          color: '#0081FF',
+          fontSize: '23px',
+          marginLeft: '20px',
+        }"
+      >
+        |
+      </span>
+      <span style="font-size: 23px"> 操作 </span>
+      <CloseOutlined
+        @click="setLayerDrawerShow"
+        :style="{ position: 'absolute', left: '300px', fontSize: '20px' }"
+      />
+    </div>
+    <a-divider />
+    <div>
+      <a-button type="primary" class="blue line-up"> <FormOutlined />编辑样式 </a-button>
+    </div>
+    <a-divider />
+    <div>
+      <div class="item">
+        <div class="item-title"> 123 </div>
+        <div class="item-value"> 456 </div>
+      </div>
+    </div>
+    <a-divider />
+    <div class="item-button">
+      <a-button style="width: 100px"> 取消 </a-button>
+      <a-button style="width: 100px" type="primary" class="blue line-up"> 确认 </a-button>
+    </div>
+    <a-divider />
+    <div class="item-yangshi">
+      <a-radio-group v-model:value="yangshiOrJiaohu" button-style="solid">
+        <a-radio-button value="1">&emsp;&emsp;样式&emsp;&emsp;</a-radio-button>
+        <a-radio-button value="0">&emsp;&emsp;交互&emsp;&emsp;</a-radio-button>
+      </a-radio-group>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, defineEmits, defineProps } from 'vue';
+  import { FormOutlined, CloseOutlined } from '@ant-design/icons-vue';
+
+  const props = defineProps(['layerDrawerShowData']);
+  const emits = defineEmits(['setLayerDrawerShow']);
+  const yangshiOrJiaohu = ref('1');
+
+  // 操作
+  function setLayerDrawerShow(item) {
+    emits('setLayerDrawerShow', false);
+  }
+</script>
+<style lang="less" scoped>
+  html[data-theme='light'] {
+    .lightOrDark {
+      background-color: #fff;
+    }
+  }
+  [data-theme='dark'] {
+    .lightOrDark {
+      background-color: #000000;
+    }
+  }
+
+  .LayerDrawer {
+    position: absolute;
+    width: 350px;
+    bottom: 30px;
+    height: calc(100% - 30px);
+  }
+  .title {
+    margin-top: 15px;
+    height: 25px;
+  }
+  .blue {
+    background-color: #0081ff;
+  }
+  .line-up {
+    margin-left: 10px;
+  }
+
+  .item-header {
+    width: 100%;
+    border-bottom: 1px solid #088eda;
+  }
+  .item {
+    // border: 1px solid #088eda;
+    width: calc(100% - 20px);
+    height: 30px;
+    line-height: 30px;
+    margin-left: 10px;
+    line-height: 30px;
+  }
+
+  .item-title {
+    width: 40%;
+    float: left;
+    font-size: 12px;
+    border: 1px solid #088eda;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .item-value {
+    width: calc(60%);
+    float: left;
+    font-size: 12px;
+    border-top: 1px solid #088eda;
+    border-bottom: 1px solid #088eda;
+    border-right: 1px solid #088eda;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .item-button {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .item-yangshi {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+</style>
diff --git a/src/views/demo/system/layermanagement/components/LayerTable.vue b/src/views/demo/system/layermanagement/components/LayerTable.vue
new file mode 100644
index 0000000..58249d7
--- /dev/null
+++ b/src/views/demo/system/layermanagement/components/LayerTable.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="LayerTable">
+    <BasicTable @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCancle">关闭</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <a-button type="primary" @click="handleDetail(record)">详情</a-button>
+          <a-button type="success" @click="handleDetail(record)">编辑</a-button>
+          <a-button type="error" @click="handleDelete(record)">删除</a-button>
+        </template>
+      </template>
+    </BasicTable>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+
+  const props = defineProps(['layerTableShowData']);
+  const emit = defineEmits(['setLayerTableShow']);
+
+  const [registerTable, { reload }] = useTable({
+    columns: props.layerTableShowData.columns,
+    dataSource: props.layerTableShowData.dataSource,
+    rowKey: 'id',
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+    maxHeight: 350,
+    actionColumn: {
+      width: 100,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+
+  // 下方表格-开启
+  function handleDetail(record) {}
+
+  // 下方表格-关闭
+  function handleCancle() {
+    emit('setLayerTableShow', false);
+  }
+</script>
+<style lang="less">
+  .LayerTable {
+    position: absolute;
+    width: calc(100% - 390px);
+    bottom: 0px;
+    height: 300px;
+  }
+</style>
diff --git a/src/views/demo/system/layermanagement/components/LayerTree.vue b/src/views/demo/system/layermanagement/components/LayerTree.vue
new file mode 100644
index 0000000..9a2e6c3
--- /dev/null
+++ b/src/views/demo/system/layermanagement/components/LayerTree.vue
@@ -0,0 +1,544 @@
+<template>
+  <div class="LayerTree lightOrDark2">
+    <!-- 三个蓝色方块标题 -->
+    <div class="title">
+      <div class="title-button lightOrDark1">
+        <a-popover placement="bottom" trigger="click">
+          <template #content>
+            <span
+              class="content lightOrDark3"
+              :class="{ 'active-style': bottomSpan == 1 }"
+              @click="bottomSpan = 1"
+            >
+              底层
+            </span>
+            <span
+              class="content lightOrDark3"
+              :class="{ 'active-style': bottomSpan == 2 }"
+              @click="bottomSpan = 2"
+            >
+              地形
+            </span>
+            <span
+              class="content lightOrDark3"
+              :class="{ 'active-style': bottomSpan == 3 }"
+              @click="bottomSpan = 3"
+            >
+              图层树
+            </span>
+          </template>
+          <div class="title-button-image"><MenuOutlined /></div>
+          <span class="title-button-span lightOrDark1">图层</span>
+          <div class="title-button-imagedown"><DownOutlined /></div>
+        </a-popover>
+      </div>
+      <div class="title-button lightOrDark1">
+        <div class="title-button-image"><SettingOutlined /></div>
+        <span class="title-button-span lightOrDark1">控件</span>
+      </div>
+      <div class="title-button lightOrDark1">
+        <div class="title-button-image"><StarOutlined /></div>
+        <span class="title-button-span">特效</span>
+      </div>
+    </div>
+
+    <div class="tree lightOrDark1">
+      <!-- 树之上的按钮 -->
+      <div style="height: 15px" />
+      <div class="tree-title">
+        <div class="tree-title-left"> 图层结构 </div>
+        <div class="tree-title-right">
+          <FolderOutlined v-if="expandedKeys.length == 0" @click="expandAll(true)" />
+          <FolderOpenOutlined v-if="expandedKeys.length > 0" @click="expandAll(false)" />
+          <a-divider type="vertical" />
+          <a-popover placement="bottom">
+            <template #content>
+              <span
+                class="content lightOrDark3"
+                :class="{ 'active-style': treeTitleSpan == 1 }"
+                @click="treeTitleSpan = 1"
+              >
+                新建目录
+              </span>
+              <span
+                class="content lightOrDark3"
+                :class="{ 'active-style': treeTitleSpan == 2 }"
+                @click="openImportModal"
+              >
+                导入图层
+              </span>
+              <span
+                class="content lightOrDark3"
+                :class="{ 'active-style': treeTitleSpan == 3 }"
+                @click="treeTitleSpan = 3"
+              >
+                修改目录名称
+              </span>
+              <span
+                class="content lightOrDark3"
+                :class="{ 'active-style': treeTitleSpan == 4 }"
+                @click="treeTitleSpan = 4"
+              >
+                删除
+              </span>
+            </template>
+            <PlusCircleOutlined />
+          </a-popover>
+        </div>
+      </div>
+      <!-- 树 -->
+      <div style="height: 15px" />
+      <div class="tree-content">
+        <a-tree
+          checkable
+          v-model:checkedKeys="checkedKeys"
+          v-model:selectedKeys="selectedKeys"
+          :tree-data="treeData"
+          :selectable="true"
+          :defaultExpandAll="true"
+          :blockNode="true"
+          @select="onSelect"
+        >
+          <!-- v-model:expandedKeys="expandedKeys" -->
+          <template #title="{ title, key }">
+            <span v-if="treeStatus == 'add'" style="width: 100%">
+              {{ title }}
+              <PlusOutlined
+                style="position: absolute; top: 3px; right: 20px"
+                @click="openAddModal(key)"
+              />
+            </span>
+            <span v-if="treeStatus == 'edit'">
+              {{ title }}
+              <EditOutlined
+                style="position: absolute; top: 3px; right: 20px"
+                @click="openEditModal(key, title)"
+              />
+            </span>
+            <span v-if="treeStatus == 'delete'">
+              {{ title }}
+              <DeleteOutlined
+                style="position: absolute; top: 3px; right: 20px"
+                @click="deleteTreeKey(key)"
+              />
+            </span>
+            <span v-if="treeStatus == ''">{{ title }}</span>
+          </template>
+        </a-tree>
+      </div>
+    </div>
+    <!-- 新建目录 -->
+    <a-modal
+      title="新建目录"
+      :open="addModalOpen"
+      :width="400"
+      :maskClosable="false"
+      :centered="true"
+      @cancel="addModalClose"
+      @ok="addModalSubmit"
+    >
+      <div style="margin: 10px">
+        <a-tree-select
+          v-model:value="addModalData.parentkey"
+          style="width: 100%; margin-bottom: 10px"
+          tree-default-expand-all
+          :tree-data="treeData"
+          :field-names="{
+            children: 'children',
+            label: 'title',
+            value: 'key',
+          }"
+          placeholder="请选择上级"
+        >
+        </a-tree-select>
+        <a-input
+          style="width: 100%; margin-bottom: 10px"
+          v-model:value="addModalData.key"
+          placeholder="请输入key"
+        />
+        <a-input v-model:value="addModalData.title" placeholder="请输入标题名称" />
+      </div>
+    </a-modal>
+    <!-- 修改目录名称 -->
+    <a-modal
+      title="修改目录名称"
+      :open="editModalOpen"
+      :width="400"
+      :maskClosable="false"
+      :centered="true"
+      @cancel="editModalClose"
+      @ok="editModalSubmit"
+    >
+      <div style="margin: 10px">
+        <a-input v-model:value="editModalData.title" placeholder="请输入标题名称" />
+      </div>
+    </a-modal>
+    <!-- 导入 -->
+    <LayerImport :importOpen="importOpen" @importModalClose="importModalClose" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, defineEmits, defineProps, watch, onMounted } from 'vue';
+  import {
+    MenuOutlined,
+    SettingOutlined,
+    StarOutlined,
+    DownOutlined,
+    FolderOutlined,
+    FolderOpenOutlined,
+    PlusCircleOutlined,
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    CloseOutlined,
+  } from '@ant-design/icons-vue';
+  import { BasicTree, TreeItem, TreeActionItem, TreeActionType } from '@/components/Tree';
+  import type { TreeProps } from 'ant-design-vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { createVNode } from 'vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import { Modal } from 'ant-design-vue';
+  import LayerImport from './import/index.vue';
+  import { prepareTreeData } from './util.ts';
+
+  const { createMessage } = useMessage();
+
+  const bottomSpan = ref(0);
+
+  const selectedKeys = ref<string[]>([]);
+  const expandedKeys = ref<string[]>([]);
+  const checkedKeys = ref<string[]>([]);
+  const treeData: any = ref(prepareTreeData);
+
+  const treeTitleSpan = ref(0);
+  const treeStatus = ref('');
+  watch(
+    () => treeTitleSpan.value,
+    () => {
+      switch (treeTitleSpan.value) {
+        case 1:
+          treeStatus.value = 'add';
+          break;
+        case 2:
+          treeStatus.value = '';
+          break;
+        case 3:
+          treeStatus.value = 'edit';
+          break;
+        case 4:
+          treeStatus.value = 'delete';
+          break;
+        default:
+          break;
+      }
+    },
+  );
+
+  // 展开--------------------------------------------------------------------
+  const expandAll = (value) => {
+    if (value) {
+      // 展开全部
+      treeData.value.forEach((rootNode) => extractKeys(rootNode));
+    } else {
+      expandedKeys.value = [];
+    }
+  };
+  // 全部树的key
+  let allKeys: any = [];
+  function extractKeys(node) {
+    if (node.key) {
+      allKeys.push(node.key);
+    }
+    if (node.children && node.children.length > 0) {
+      node.children.forEach((child) => extractKeys(child));
+    }
+  }
+
+  // 添加--------------------------------------------------------------------
+  const addModalOpen = ref(false);
+  const addModalData = ref({
+    parentkey: null,
+    key: null,
+    title: null,
+  });
+  // 开启
+  function openAddModal(key) {
+    addModalData.value.parentkey = key;
+    addModalData.value.key = null;
+    addModalData.value.title = null;
+    addModalOpen.value = true;
+  }
+  // 点击遮罩层或右上角叉或取消按钮的回调
+  function addModalClose() {
+    addModalOpen.value = false;
+  }
+  // 点击确定回调
+  function addModalSubmit() {
+    treeData.value.forEach((rootNode) => extractKeys(rootNode));
+    if (allKeys.includes(addModalData.value.key)) {
+      createMessage.error('key值不能与树中的重复！');
+      return;
+    }
+    const newSubNode = { title: addModalData.value.title, key: addModalData.value.key };
+    const result = addSubNode(treeData.value, addModalData.value.parentkey, newSubNode);
+    if (result) {
+      createMessage.success('添加成功！');
+      addModalOpen.value = false;
+    }
+  }
+  // 添加子节点
+  function addSubNode(tree, targetKey, newNode) {
+    for (let node of tree) {
+      if (node.key === targetKey) {
+        if (!node.children) {
+          node.children = [];
+        }
+        node.children.push(newNode);
+        return true;
+      }
+      if (node.children && addSubNode(node.children, targetKey, newNode)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  // 编辑--------------------------------------------------------------------
+  const editModalOpen = ref(false);
+  const editModalData = ref({
+    parentkey: null,
+    key: null,
+    title: null,
+  });
+  // 开启
+  function openEditModal(key, title) {
+    editModalData.value.key = key;
+    editModalData.value.title = title;
+    editModalOpen.value = true;
+  }
+  // 点击遮罩层或右上角叉或取消按钮的回调
+  function editModalClose() {
+    editModalOpen.value = false;
+  }
+  // 点击确定回调
+  function editModalSubmit() {
+    const newSubNode = { title: editModalData.value.title, key: editModalData.value.key };
+    const result = editSubNode(treeData.value, editModalData.value.key, newSubNode);
+    if (result) {
+      createMessage.success('修改成功！');
+      editModalOpen.value = false;
+    }
+  }
+  // 编辑子节点
+  function editSubNode(tree, targetKey, newNode) {
+    for (let i = 0; i < tree.length; i++) {
+      let node = tree[i];
+      if (node.key === targetKey) {
+        Object.assign(node, newNode);
+        return true;
+      }
+      if (node.children && node.children.length > 0) {
+        if (editSubNode(node.children, targetKey, newNode)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  // 删除--------------------------------------------------------------------
+  // 删除
+  function deleteTreeKey(key) {
+    if (key == treeData.value[0].key) {
+      createMessage.warn('根分支不能删除！');
+      return;
+    }
+    Modal.confirm({
+      title: '是否确认删除?',
+      icon: createVNode(ExclamationCircleOutlined),
+      onCancel() {},
+      onOk() {
+        // 删除
+        let res = deleteNode(treeData.value, key);
+        if (res) {
+          createMessage.success('所选分支删除成功！');
+        } else {
+          createMessage.error('所选分支删除失败！');
+        }
+      },
+    });
+  }
+  // 找到目标节点，从数组中删除
+  function deleteNode(tree, targetKey) {
+    for (let i = 0; i < tree.length; i++) {
+      if (tree[i].key === targetKey) {
+        tree.splice(i, 1);
+        return true;
+      }
+      if (tree[i].children && tree[i].children.length > 0) {
+        if (deleteNode(tree[i].children, targetKey)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  // 导入--------------------------------------------------------------------
+  const importOpen = ref(false);
+  function openImportModal() {
+    importOpen.value = true;
+    treeTitleSpan.value = 2;
+  }
+  function importModalClose() {
+    importOpen.value = false;
+    treeTitleSpan.value = 0;
+  }
+
+  onMounted(() => {
+    // 展开全部
+    expandAll(true);
+  });
+</script>
+
+<style lang="less" scoped>
+  html[data-theme='light'] {
+    .lightOrDark1 {
+      background-color: #ffffff;
+    }
+    .lightOrDark2 {
+      background-color: #e0e5ed;
+    }
+    .lightOrDark3 {
+      background-color: #ffffff;
+    }
+  }
+  [data-theme='dark'] {
+    .lightOrDark1 {
+      background-color: #000000;
+    }
+    .lightOrDark2 {
+      background-color: #000000;
+    }
+    .lightOrDark3 {
+      background-color: #1f1f1f;
+    }
+  }
+  .active-style {
+    background-color: #e0e5ed;
+    color: #0081ff;
+  }
+
+  ::v-deep .ant-tree {
+    font-size: 18px !important;
+  }
+  ::v-deep .ant-popover-inner-content {
+    padding: 0px !important;
+  }
+  ::v-deep .ant-tree-checkbox {
+    font-size: 18px;
+    align-self: auto !important;
+  }
+
+  .LayerTree {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 356px;
+    height: 100%;
+
+    .title {
+      height: 90px;
+      margin-top: 5px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .title-button {
+      border-radius: 5px;
+      width: 70px;
+      height: 85px;
+      margin-left: 10px;
+      margin-right: 10px;
+      font-size: 20px;
+    }
+
+    .title-button-image {
+      display: flex;
+      justify-content: center;
+      background-color: #0081ff;
+      border-radius: 5px;
+      margin-top: 10px;
+      margin-left: 15px;
+      width: 40px;
+      height: 40px;
+    }
+
+    .title-button-span {
+      display: flex;
+      justify-content: center;
+      margin-top: 5px;
+      font-size: 16px;
+    }
+
+    .title-button-imagedown {
+      display: flex;
+      justify-content: center;
+      color: gray;
+      font-size: 10px;
+    }
+  }
+
+  .content {
+    display: block;
+    width: 120px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .tree {
+    height: calc(100% - 110px);
+    // background-color: #e0e5ed;
+    background-color: #ffffff;
+    margin-top: 20px;
+    border-radius: 10px;
+
+    .tree-title {
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+      margin-left: 10px;
+      margin-right: 10px;
+      background-color: #e0e5ed;
+      height: 40px;
+      font-size: 20px;
+      display: flex;
+      align-items: center;
+
+      .tree-title-left {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .tree-title-left::before {
+        content: '';
+        width: 8px;
+        height: 8px;
+        background-color: green;
+        border-radius: 50%;
+        margin-left: 10px;
+      }
+
+      .tree-title-right {
+        position: absolute;
+        right: 30px;
+      }
+    }
+
+    .tree-content {
+      margin-left: 10px;
+    }
+  }
+</style>
diff --git a/src/views/demo/system/layermanagement/components/MapboxMap.vue b/src/views/demo/system/layermanagement/components/MapboxMap.vue
new file mode 100644
index 0000000..b588bfc
--- /dev/null
+++ b/src/views/demo/system/layermanagement/components/MapboxMap.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="map-container">
+    <div id="mapContainer" class="map-box"></div>
+    <div class="layer-workspace" :style="{ left: showLayerList ? '0px' : '-356px' }">
+      <LayerComponent
+        :layerList="layerList"
+        @serveModalCancle="serveModalCancle"
+        @changeOpenInsertShpModal="changeOpenInsertShpModal"
+        @clearLayerList="clearLayerList"
+        @handlerLayerShowChange="handlerLayerShowChange"
+        @setLayerTableShow="setLayerTableShow"
+        @setLayerDrawerShow="setLayerDrawerShow"
+      />
+      <!-- <LayerTree /> -->
+      <div class="close-layer-workspace" @click="changeLayerList">
+        <MenuFoldOutlined v-if="showLayerList" />
+        <MenuUnfoldOutlined v-else />
+      </div>
+    </div>
+    <LayerControl @draw="handlerDrawPolygon" :style="{ left: showLayerList ? '386px' : '20px' }" />
+    <!-- 操作抽屉 -->
+    <LayerDrawer
+      v-if="layerDrawerShow"
+      :style="{
+        right: '0px',
+      }"
+      @setLayerDrawerShow="setLayerDrawerShow"
+    />
+    <!-- 查看数据表格-->
+    <LayerTable
+      v-if="layerTableShow"
+      :style="{
+        left: showLayerList ? '390px' : '0px',
+        width: showLayerList ? 'calc(100% - 390px)' : '100%',
+      }"
+      :layerTableShowData="layerTableShowData"
+      @setLayerTableShow="setLayerTableShow"
+    />
+    <!-- 底边黑条 -->
+    <LayerBottom
+      :style="{
+        left: showLayerList ? '356px' : '0px',
+        width: showLayerList ? 'calc(100% - 356px)' : '100%',
+      }"
+    />
+    <!-- 叠加服务 -->
+    <Modal :openModal="openModal" @serveModalCancle="serveModalCancle" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, onUnmounted, defineProps, reactive, ref, defineExpose } from 'vue';
+  import LayerComponent from './LayerComponent.vue';
+  import LayerTree from './LayerTree.vue';
+  import LayerControl from './LayerControl.vue';
+  import LayerTable from './LayerTable.vue';
+  import LayerDrawer from './LayerDrawer.vue';
+  import LayerBottom from './LayerBottom.vue';
+  import Modal from './modal/index.vue';
+  import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
+
+  // 叠加服务
+  const openModal = ref(false);
+  // 叠加服务
+  function serveModalCancle(value) {
+    openModal.value = value;
+  }
+  // 创建新图层
+  const insertShpModal = ref(false);
+  const changeOpenInsertShpModal = (value) => {
+    insertShpModal.value = value;
+  };
+
+  // 右侧目录是否显示
+  const showLayerList = ref<boolean>(true);
+  const changeLayerList = () => {
+    showLayerList.value = !showLayerList.value;
+  };
+  // 右侧目录数据
+  const layerList = ref<[]>([]);
+  const handlerAddToLayerList = (value) => {
+    layerList.value.push(value);
+  };
+
+  // 清空按钮
+  const handlerClearLayerList = () => {
+    layerList.value = [];
+  };
+
+  // 查看数据表格
+  const layerTableShow = ref(false);
+  const layerTableShowData = ref({});
+  function setLayerTableShow(value, item = {}) {
+    layerTableShow.value = value;
+    layerTableShowData.value = item;
+  }
+
+  // 操作抽屉
+  const layerDrawerShow = ref(true);
+  function setLayerDrawerShow(value, item = {}) {
+    layerDrawerShow.value = value;
+  }
+
+  onMounted(() => {
+    handlerAddToLayerList(1);
+    handlerAddToLayerList(2);
+    handlerAddToLayerList(3);
+    handlerAddToLayerList(4);
+  });
+</script>
+
+<style lang="less" scoped>
+  .map-container {
+    background-color: gray;
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .layer-workspace {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    height: 100%;
+  }
+
+  html[data-theme='light'] {
+    .close-layer-workspace {
+      position: absolute;
+      bottom: 35px;
+      left: 355px;
+      width: 30px;
+      height: 30px;
+      background: #e0e5ed;
+      z-index: 9999;
+      line-height: 30px;
+      text-align: center;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+      cursor: pointer;
+    }
+  }
+  [data-theme='dark'] {
+    .close-layer-workspace {
+      position: absolute;
+      bottom: 35px;
+      left: 355px;
+      width: 30px;
+      height: 30px;
+      background: #000000;
+      z-index: 9999;
+      line-height: 30px;
+      text-align: center;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+      cursor: pointer;
+    }
+  }
+
+  .blue {
+    background-color: #0081ff;
+  }
+</style>
diff --git a/src/views/demo/system/layermanagement/components/import/index.vue b/src/views/demo/system/layermanagement/components/import/index.vue
new file mode 100644
index 0000000..2a98385
--- /dev/null
+++ b/src/views/demo/system/layermanagement/components/import/index.vue
@@ -0,0 +1,189 @@
+<template>
+  <div>
+    <a-modal
+      title="导入"
+      :open="props.importOpen"
+      :width="1000"
+      :maskClosable="false"
+      :centered="true"
+    >
+      <template #closeIcon>
+        <CloseOutlined :style="{ fontSize: '20px' }" @click="importModalClose" />
+      </template>
+      <template #footer>
+        <div class="footer">
+          <a-button style="width: 100px" @click="importModalClose"> 取消 </a-button>
+          <a-button
+            style="width: 100px"
+            type="primary"
+            class="blue line-up"
+            @click="importModalSubmit"
+          >
+            确认
+          </a-button>
+        </div>
+      </template>
+      <div style="margin: 10px">
+        <div style="display: inline-block; margin-left: 20px">
+          <a-radio-group v-model:value="radioValue" button-style="solid">
+            <a-radio-button value="1">&emsp;我的&emsp;</a-radio-button>
+            <a-radio-button value="2">&emsp;内置&emsp;</a-radio-button>
+            <a-radio-button value="3">&emsp;发现&emsp;</a-radio-button>
+          </a-radio-group>
+          <span style="position: absolute; right: 20px">
+            <a-input-search
+              style="margin-right: 20px; width: 300px"
+              v-model:value="searchValue"
+              placeholder="请输入服务关键词"
+              enter-button
+              @search="onSearch"
+            />
+            <a-button style="width: 100px" type="primary" class="blue"> 新增图层 </a-button>
+          </span>
+        </div>
+        <div style="margin-top: 30px; margin-left: 20px">
+          <a-row>
+            <a-col :span="2">类型</a-col>
+            <a-col :span="22" class="container">
+              <div
+                :class="{ 'type-checked': type == 0, 'type-check': type != 0 }"
+                @click="type = 0"
+              >
+                全部
+              </div>
+              <div
+                :class="{ 'type-checked': type == 1, 'type-check': type != 1 }"
+                @click="type = 1"
+              >
+                GeoJson
+              </div>
+              <div
+                :class="{ 'type-checked': type == 2, 'type-check': type != 2 }"
+                @click="type = 2"
+              >
+                XYZ
+              </div>
+              <div
+                :class="{ 'type-checked': type == 3, 'type-check': type != 3 }"
+                @click="type = 3"
+              >
+                WMS
+              </div>
+              <div
+                :class="{ 'type-checked': type == 4, 'type-check': type != 4 }"
+                @click="type = 4"
+              >
+                WFS
+              </div>
+              <div
+                :class="{ 'type-checked': type == 5, 'type-check': type != 5 }"
+                @click="type = 5"
+              >
+                WMTS
+              </div>
+            </a-col>
+            <a-col :span="2" style="margin-top: 10px">未使用过</a-col>
+            <a-col :span="22" style="margin-top: 10px">
+              <a-radio-group v-model:value="shiyong" button-style="solid">
+                <a-radio-button value="1">是</a-radio-button>
+                <a-radio-button value="0">否</a-radio-button>
+              </a-radio-group>
+            </a-col>
+          </a-row>
+          <span></span>
+          <span></span>
+        </div>
+        <div class="imagelist">
+          <a-image
+            style="width: 150px"
+            v-for="d in list"
+            :key="d"
+            src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
+          />
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, defineEmits, defineProps, watch, onMounted } from 'vue';
+  import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
+  const props = defineProps(['importOpen']);
+  const emits = defineEmits(['importModalClose']);
+
+  const radioValue = ref('1');
+  const searchValue = ref();
+  const type = ref();
+  const shiyong = ref('0');
+  const list = ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0'];
+
+  // 取消
+  function importModalClose() {
+    emits('importModalClose');
+  }
+  // 提交
+  function importModalSubmit() {
+    emits('importModalClose');
+  }
+</script>
+<style lang="less" scoped>
+  ::v-deep .ant-btn-primary {
+    background-color: #0081ff !important;
+  }
+  ::v-deep .ant-radio-button-wrapper-checked {
+    background-color: #0081ff !important;
+    border-color: #0081ff !important;
+  }
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+  }
+  .blue {
+    background-color: #0081ff;
+  }
+  .line-up {
+    margin-left: 10px;
+  }
+
+  .container {
+    display: flex;
+    // 页面不能被选中
+    -webkit-user-select: none; /* Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE/Edge */
+    user-select: none;
+
+    .type-check {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid #e0e5ed;
+      border-radius: 0px;
+      width: 90px;
+      height: 30px;
+      margin-right: 10px;
+    }
+
+    .type-checked {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid #e0e5ed;
+      color: #2a7dc9;
+      border-radius: 0px;
+      width: 90px;
+      height: 30px;
+      margin-right: 10px;
+    }
+  }
+
+  .imagelist {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 30px;
+    margin-left: 20px;
+  }
+</style>
diff --git a/src/views/demo/system/layermanagement/components/modal/OfflineFile.vue b/src/views/demo/system/layermanagement/components/modal/OfflineFile.vue
new file mode 100644
index 0000000..a5d491f
--- /dev/null
+++ b/src/views/demo/system/layermanagement/components/modal/OfflineFile.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="offlineFile">
+    <div class="offlineFile-div">
+      <a-upload-dragger
+        v-model:fileList="fileList"
+        name="file"
+        :multiple="true"
+        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+        @change="handleChange"
+        @drop="handleDrop"
+      >
+        <div class="uploadDiv">
+          <p class="ant-upload-drag-icon">
+            <PlusOutlined />
+          </p>
+          <p class="ant-upload-text">上传文件</p>
+          <p class="ant-upload-hint"> 点击或拖拽文件到此处 </p>
+        </div>
+      </a-upload-dragger>
+      <div class="uploadButton">
+        <a-button type="primary" size="large">
+          <CloudUploadOutlined />
+          上传数据
+        </a-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, watch, onMounted } from 'vue';
+  import { PlusOutlined, DeleteOutlined, CloudUploadOutlined } from '@ant-design/icons-vue';
+
+  const fileList = ref([]);
+</script>
+<style lang="less">
+  .offlineFile {
+    display: flex;
+    justify-content: center;
+    height: 700px;
+  }
+  .offlineFile-div {
+    margin-top: 30px;
+    width: calc(50%);
+    height: 300px;
+  }
+  .uploadDiv {
+    margin-top: 70px;
+  }
+  .uploadButton {
+    position: relative;
+    margin-top: 80px;
+    display: flex;
+    justify-content: center;
+  }
+</style>
diff --git a/src/views/demo/system/layermanagement/components/modal/ServeResource.vue b/src/views/demo/system/layermanagement/components/modal/ServeResource.vue
new file mode 100644
index 0000000..b1f8d4c
--- /dev/null
+++ b/src/views/demo/system/layermanagement/components/modal/ServeResource.vue
@@ -0,0 +1,351 @@
+<template>
+  <div class="serve-resource lightOrDark1">
+    <div class="list">
+      <div class="header">
+        <a-select v-model:value="data" style="width: 142px; margin-right: 20px">
+          <a-select-option value="vector-data">矢量数据</a-select-option>
+        </a-select>
+        <a-input-search
+          style="width: 362px; margin-right: 20px"
+          v-model:value="key"
+          placeholder="请输入服务关键词"
+          enter-button
+        />
+        <a-select v-model:value="sort" style="width: 142px">
+          <a-select-option value="default">默认排序</a-select-option>
+          <a-select-option value="servename">服务名称</a-select-option>
+          <a-select-option value="servetime">发布时间</a-select-option>
+        </a-select>
+      </div>
+      <div class="content">
+        <div class="show-item lightOrDark2" v-for="item in dataList" :key="item.id">
+          <div class="info">
+            <a-image
+              :width="119"
+              :height="87"
+              style="border-radius: 4px"
+              :src="
+                item.image
+                  ? VITE_GLOB_API_URL_VAR + item.image
+                  : 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp'
+              "
+              :preview="false"
+              :fallback="errorImage"
+            />
+            <div class="show-text">
+              <div class="title">服务名称： {{ item.name }}</div>
+              <div class="sub-title">服务描述： {{ item.description }}</div>
+              <div class="sub-title">创建时间： {{ item.createTime }}</div>
+            </div>
+          </div>
+          <div class="button">
+            <a-button type="error" @click="handlerDeleteLayer(item)">
+              <template #icon>
+                <DeleteOutlined />
+              </template>
+            </a-button>
+            &nbsp;
+            <a-button type="primary" @click="handlerEditLayer(item)">
+              <template #icon>
+                <EditOutlined />
+              </template>
+            </a-button>
+            &nbsp;
+            <a-button type="primary" @click="handlerAddToLayerList(item)">
+              <template #icon>
+                <PlusOutlined />
+              </template>
+            </a-button>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <a-pagination
+          v-model:current="queryList.page"
+          v-model:page-size="queryList.limit"
+          :total="total"
+          @change="onPageChange"
+          :show-total="(total) => `共 ${total} 条`"
+        />
+        <a-select v-model:value="queryList.limit" style="width: 120px">
+          <a-select-option value="5">共5条/页</a-select-option>
+          <a-select-option value="10">共10条/页</a-select-option>
+          <a-select-option value="20">共20条/页</a-select-option>
+          <a-select-option value="50">共50条/页</a-select-option>
+        </a-select>
+      </div>
+    </div>
+    <div class="information">
+      <div style="margin-bottom: 16px">
+        <div style="width: 100%; height: 266px">
+          <a-image
+            src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
+            height="100%"
+            width="100%"
+          />
+        </div>
+      </div>
+      <div class="show-info lightOrDark2">
+        <div class="title">
+          <div class="first"></div>
+          <div class="last"></div>
+        </div>
+        <div
+          style="
+            position: absolute;
+            height: 32px;
+            top: 24px;
+            display: flex;
+            align-items: center;
+            margin-left: 14px;
+          "
+        >
+          服务基本信息
+        </div>
+        <div class="serve-text">
+          <div style="width: 60%; margin-left: 20px">
+            <a-row>
+              <a-col :span="6">
+                <span>服务URL：</span>
+              </a-col>
+              <a-col :span="18"> </a-col>
+              <a-col :span="6">
+                <span>服务名称：</span>
+              </a-col>
+              <a-col :span="18"> </a-col>
+              <a-col :span="6">
+                <span>服务简介：</span>
+              </a-col>
+              <a-col :span="18"> </a-col>
+              <a-col :span="6">
+                <span>关键字：</span>
+              </a-col>
+              <a-col :span="18"> </a-col>
+              <a-col :span="6">
+                <span>服务类型：</span>
+              </a-col>
+              <a-col :span="18"> </a-col>
+              <a-col :span="6">
+                <span>覆盖范围：</span>
+              </a-col>
+              <a-col :span="18"> </a-col>
+              <a-col :span="6">
+                <span>坐标系：</span>
+              </a-col>
+              <a-col :span="18"> </a-col>
+              <a-col :span="6">
+                <span>投影类型：</span>
+              </a-col>
+              <a-col :span="18"> </a-col>
+              <a-col :span="6">
+                <span>使用权限：</span>
+              </a-col>
+              <a-col :span="18"> </a-col>
+              <a-col :span="6">
+                <span>发布时间：</span>
+              </a-col>
+              <a-col :span="18"> </a-col>
+              <a-col :span="6">
+                <span>服务预览：</span>
+              </a-col>
+              <a-col :span="18"> </a-col>
+            </a-row>
+          </div>
+          <div style="width: 35%">
+            <span>预览图：</span>
+            <a-image
+              src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
+              height="100%"
+              width="100%"
+            />
+          </div>
+        </div>
+        <!-- <a-textarea v-model:value="jsonData" style="height: 240px" /> -->
+        <!-- <p class="operate-box">
+          <a-button type="primary" @click="handlerRenderLayer">应 用</a-button>
+          &nbsp;
+          <a-button type="primary" @click="handlerSaveStyle">保 存</a-button>
+        </p> -->
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, defineEmits, reactive, onBeforeMount } from 'vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { DeleteOutlined, PlusOutlined, EditOutlined } from '@ant-design/icons-vue';
+  import { deleteLayer, getLayerList, updateLayer } from '@/api/sys/layerManagement';
+  import { utildata } from './util.ts';
+
+  import { getAppEnvConfig } from '@/utils/env';
+  const { VITE_GLOB_API_URL } = getAppEnvConfig();
+  const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL + '/');
+
+  const { createMessage } = useMessage();
+
+  const data = ref('vector-data');
+  const sort = ref('default');
+  const key = ref('');
+  const dataList = ref([]);
+  const total = ref(0);
+  const current = ref();
+  const pageSize = ref();
+  const jsonData = ref('');
+  const queryList = reactive({
+    key: null,
+    limit: 5,
+    page: 1,
+    name: null,
+  });
+
+  onBeforeMount(() => {
+    handlerGetLayerList();
+  });
+
+  const onPageChange = (e) => {
+    queryList.page = e;
+    handlerGetLayerList();
+  };
+
+  const handlerGetLayerList = () => {
+    // getLayerList(queryList).then((res) => {
+    //   //   console.log(dataList.value);
+    // });
+    dataList.value = utildata;
+    total.value = utildata.length;
+  };
+
+  const currentLayer = ref();
+  const handlerEditLayer = (item) => {};
+</script>
+<style lang="less" scoped>
+  html[data-theme='light'] {
+    .lightOrDark1 {
+      background-color: #e0e5ed;
+    }
+    .lightOrDark2 {
+      background-color: #ffffff;
+    }
+  }
+  [data-theme='dark'] {
+    .lightOrDark1 {
+      background-color: #000000;
+    }
+    .lightOrDark2 {
+      background-color: #1f1f1f;
+      color: #ffffff;
+    }
+  }
+
+  .serve-resource {
+    display: flex;
+    justify-content: space-between;
+    padding: 28px 46px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    height: 700px;
+
+    .list {
+      width: calc(50% - 19px);
+    }
+    .header {
+      display: flex;
+      margin-bottom: 14px;
+    }
+    .content {
+      max-height: 565px;
+      overflow: auto;
+      margin-bottom: 8px;
+      height: 565px;
+      .show-item {
+        height: 119px;
+        border-radius: 4px;
+        padding: 16px 30px 16px 16px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 3px;
+        .info {
+          display: flex;
+          .show-text {
+            margin-left: 15px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            .title {
+              font-size: 14px;
+              font-weight: 600;
+              margin-bottom: 3px;
+            }
+            .sub-title {
+              font-size: 12px;
+            }
+          }
+        }
+      }
+    }
+    .footer {
+      display: flex;
+      justify-content: flex-end;
+    }
+    .information {
+      width: calc(50% - 19px);
+      .show-info {
+        height: 369px;
+        border-radius: 10px;
+        padding: 24px 29px;
+        position: relative;
+        .title {
+          display: flex;
+          height: 32px;
+          margin-bottom: 16px;
+          .first {
+            width: 3px;
+            height: 100%;
+            background-color: #0081ff;
+          }
+          .last {
+            background: linear-gradient(270deg, rgba(0, 183, 255, 0) 0%, #0081ff 100%);
+            opacity: 0.14;
+            flex: 1;
+          }
+        }
+        .serve-text {
+          display: flex;
+          font-family:
+            PingFangSC,
+            PingFang SC;
+          font-weight: 400;
+          font-size: 12px;
+
+          .serve-info {
+            width: 60%;
+            padding-left: 12px;
+            .info-title {
+              display: inline-block;
+              opacity: 0.41;
+              width: 60px;
+              min-width: 60px;
+            }
+            .info-content {
+              text-overflow: ellipsis;
+              overflow: hidden;
+              white-space: nowrap;
+            }
+            & > div {
+              margin-bottom: 7px;
+              display: flex;
+            }
+          }
+          .serve-image {
+            width: 40%;
+          }
+        }
+        .operate-box {
+          margin: 12px 0px 0px 0px;
+          text-align: right;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/demo/system/layermanagement/components/modal/ThirdPartyServe.vue b/src/views/demo/system/layermanagement/components/modal/ThirdPartyServe.vue
new file mode 100644
index 0000000..3b53bb4
--- /dev/null
+++ b/src/views/demo/system/layermanagement/components/modal/ThirdPartyServe.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="thirdServe">
+    <div class="thirdServe-div">
+      <a-row>
+        <a-col :span="24" style="margin-top: 10px">
+          <span class="spanTitle">服务名称</span>
+        </a-col>
+        <a-col :span="24">
+          <a-input v-modal:value="thirdServe.serveName" placeholder="请输入服务名称" size="large" />
+        </a-col>
+        <a-col :span="24" style="margin-top: 10px">
+          <span class="spanTitle">服务类型</span>
+        </a-col>
+        <a-col :span="24">
+          <a-select
+            allowClear
+            v-modal:value="thirdServe.serveType"
+            style="width: 300px"
+            :options="serveTypeOptions"
+            placeholder="请选择服务类型"
+            size="large"
+          />
+        </a-col>
+        <a-col :span="24" style="margin-top: 10px">
+          <span class="spanTitle">服务地址</span>
+        </a-col>
+        <a-col :span="24">
+          <a-textarea
+            v-modal:value="thirdServe.serveAddress"
+            :rows="4"
+            placeholder="请输入服务地址"
+            size="large"
+          />
+        </a-col>
+        <a-col :span="24" style="margin-top: 10px">
+          <span class="spanTitle">要素类型</span>
+        </a-col>
+        <a-col :span="24">
+          <a-input
+            v-modal:value="thirdServe.elementType"
+            placeholder="请输入要素类型"
+            size="large"
+          />
+        </a-col>
+        <a-col :span="24" style="margin-top: 50px">
+          <div style="position: absolute; right: 0px">
+            <a-button style="width: 80px; margin-right: 20px" @click="serveCancle"> 取消 </a-button>
+            <a-button type="primary" style="width: 80px" @click="thirdServeSubmit">确认</a-button>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { defineProps, defineEmits, ref, onMounted } from 'vue';
+  import { cloneDeep } from 'lodash-es';
+
+  const emit = defineEmits(['serveCancle']);
+  const thirdServe = {
+    serveName: null,
+    serveType: null,
+    serveAddress: null,
+    elementType: null,
+  };
+  const thirdServeForm = ref({});
+
+  const serveTypeOptions = [
+    {
+      value: 0,
+      label: 'WMTS OGC Web服务',
+    },
+    {
+      value: 1,
+      label: 'WMS OGC Web服务',
+    },
+    {
+      value: 2,
+      label: 'ArcGIS REST服务',
+    },
+    {
+      value: 3,
+      label: '矢量瓦片服务（Mapbox）',
+    },
+    {
+      value: 4,
+      label: 'X，Y，Z瓦片服务',
+    },
+  ];
+
+  function thirdServeSubmit() {}
+
+  function serveCancle() {
+    emit('serveCancle');
+  }
+
+  onMounted(() => {
+    thirdServeForm.value = cloneDeep(thirdServe);
+  });
+</script>
+<style lang="less">
+  .thirdServe {
+    display: flex;
+    justify-content: center;
+    height: 700px;
+  }
+
+  .thirdServe-div {
+    margin-top: 30px;
+    width: calc(50%);
+  }
+
+  .spanTitle {
+    margin-top: 25px;
+    font-size: 16px;
+  }
+</style>
diff --git a/src/views/demo/system/layermanagement/components/modal/index.vue b/src/views/demo/system/layermanagement/components/modal/index.vue
new file mode 100644
index 0000000..4148f9f
--- /dev/null
+++ b/src/views/demo/system/layermanagement/components/modal/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <a-modal
+      class="map-resource-modal"
+      width="1446px"
+      v-model:open="props.openModal"
+      style="top: 50px"
+      :footer="null"
+    >
+      <template #closeIcon>
+        <CloseCircleOutlined @click="serveCancle" :style="{ fontSize: '30px' }" />
+      </template>
+      <a-tabs v-model:activeKey="activeKey" :tabBarGutter="50" size="large">
+        <a-tab-pane key="1" tab="服务资源">
+          <ServeResource />
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="第三方服务">
+          <ThirdPartyServe @serveCancle="serveCancle" />
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="离线文件">
+          <OfflineFile />
+        </a-tab-pane>
+        <template #leftExtra>
+          <div :style="{ width: '30px' }" />
+        </template>
+      </a-tabs>
+    </a-modal>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { CloseCircleOutlined } from '@ant-design/icons-vue';
+  import { defineProps, defineEmits, ref } from 'vue';
+  import ServeResource from './ServeResource.vue';
+  import ThirdPartyServe from './ThirdPartyServe.vue';
+  import OfflineFile from './OfflineFile.vue';
+
+  const props = defineProps(['openModal']);
+  const emit = defineEmits(['serveModalCancle']);
+
+  const activeKey = ref('1');
+
+  function serveCancle() {
+    emit('serveModalCancle', false);
+  }
+</script>
+<style scoped></style>
diff --git a/src/views/demo/system/layermanagement/components/modal/util.ts b/src/views/demo/system/layermanagement/components/modal/util.ts
new file mode 100644
index 0000000..3502595
--- /dev/null
+++ b/src/views/demo/system/layermanagement/components/modal/util.ts
@@ -0,0 +1,87 @@
+export const utildata = [
+    {
+        "id": "90d0740b-f389-498b-bee5-5ca3aaf75842",
+        "name": "沂水边牧",
+        "description": null,
+        "type": 0,
+        "image": null,
+        "relationTable": "test_yishui",
+        "createTime": "2024-05-31 13:33:45",
+        "createId": "-1",
+        "srid": "EPSG:4326",
+        "status": 1,
+        "shpPath": "D:\\vs\\project\\基础框架后端svn\\OpenAuth.WebApi\\bin\\Debug\\net6.0\\20240528\\\\2024052816004685980256.zip",
+        "style": null,
+        "vectorType": null,
+        "attributeTable": null,
+        "attributeField": null
+    },
+    {
+        "id": "f5155097-3192-4b12-abca-870f3477240c",
+        "name": "天空地案件图斑（关联属性）",
+        "description": "天空地案件图斑（关联属性）",
+        "type": 0,
+        "image": null,
+        "relationTable": "drone_shp_data",
+        "createTime": "2024-06-21 15:47:32",
+        "createId": "-1",
+        "srid": "EPSG:4326",
+        "status": 1,
+        "shpPath": null,
+        "style": "null",
+        "vectorType": "面",
+        "attributeTable": "drone_caseinfo_single",
+        "attributeField": null
+    },
+    {
+        "id": "d0c0a888-17a2-48a4-b319-04b84de06dc4",
+        "name": "天空地图斑面图层",
+        "description": "天空地图斑面图层",
+        "type": 0,
+        "image": null,
+        "relationTable": "drone_shp_data",
+        "createTime": "2024-06-06 14:44:28",
+        "createId": "-1",
+        "srid": "EPSG:4326",
+        "status": 1,
+        "shpPath": null,
+        "style": "{    \"id\": \"b9874b8d-5d0d-4a76-8c68-7028c3f40881\",    \"type\": \"line\",    \"source\": {        \"type\": \"vector\",        \"tiles\": [            \"http://192.168.10.102:9023/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=drone_shp_data&X-Token=1ded3fe7\"        ],        \"minzoom\": 1,        \"maxzoom\": 20    },    \"source-layer\": \"drone_shp_data\",    \"layout\": {},    \"paint\": {        \"fill-color\": \"rgba(23,240,230, 0.4)\",        \"fill-outline-color\": \"rgba(23,240,230, 1)\"    }}",
+        "vectorType": "point",
+        "attributeTable": null,
+        "attributeField": null
+    },
+    {
+        "id": "d6496bf0-e51b-42a5-9749-1c2e06ebe678",
+        "name": "违法建设图斑",
+        "description": "违法建设图斑",
+        "type": 0,
+        "image": null,
+        "relationTable": "drone_shp_data",
+        "createTime": "2024-06-06 16:41:24",
+        "createId": "-1",
+        "srid": "EPSG:4326",
+        "status": 1,
+        "shpPath": null,
+        "style": "{    \"id\": \"b9874b8d-5d0d-4a76-8c68-70254858054\",    \"type\": \"line\",    \"source\": {        \"type\": \"vector\",        \"tiles\": [            \"http://192.168.10.102:9023/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=drone_shp_data&X-Token=1ded3fe7\"        ],        \"minzoom\": 1,        \"maxzoom\": 20    },    \"source-layer\": \"drone_shp_data\",    \"layout\": {        \"line-join\": \"round\",        \"line-cap\": \"round\"    },    \"paint\": {        \"line-color\": \"#f6c125\",        \"line-width\": 2    }}",
+        "vectorType": "point",
+        "attributeTable": null,
+        "attributeField": null
+    },
+    {
+        "id": "39f60d19-81da-480e-a936-aa933c02e33a",
+        "name": "违建图斑",
+        "description": "违建图斑",
+        "type": 0,
+        "image": null,
+        "relationTable": "drone_shp_data",
+        "createTime": "2024-06-06 16:36:19",
+        "createId": "-1",
+        "srid": "EPSG:4326",
+        "status": 1,
+        "shpPath": null,
+        "style": "{    \"id\": \"b9874b8d-5d0d-4a76nwg8w428c3f40269\",    \"type\": \"line\",    \"source\": {        \"type\": \"vector\",        \"tiles\": [            \"http://192.168.10.102:9023/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=drone_shp_data&X-Token=1ded3fe7\"        ],        \"minzoom\": 1,        \"maxzoom\": 20    },    \"source-layer\": \"drone_shp_data\",    \"layout\": {        \"line-join\": \"round\",        \"line-cap\": \"round\"    },    \"paint\": {        \"line-color\": \"#f6c125\",        \"line-width\": 2    }}",
+        "vectorType": "面",
+        "attributeTable": null,
+        "attributeField": null
+    },
+];
\ No newline at end of file
diff --git a/src/views/demo/system/layermanagement/components/util.ts b/src/views/demo/system/layermanagement/components/util.ts
new file mode 100644
index 0000000..90daea5
--- /dev/null
+++ b/src/views/demo/system/layermanagement/components/util.ts
@@ -0,0 +1,26 @@
+import type { TreeProps } from 'ant-design-vue';
+
+export const prepareTreeData: TreeProps['treeData'] = [
+    {
+        title: '费县林业防火',
+        key: '0',
+        children: [
+          {
+            title: '水网',
+            key: '0-0',
+            children: [
+              { title: '坑塘', key: '0-0-0' },
+              { title: '水源地', key: '0-0-1' },
+            ],
+          },
+          {
+            title: '路网',
+            key: '0-1',
+            children: [
+                { title: '公路', key: '0-1-0' },
+                { title: '其他', key: '0-1-1' },
+            ],
+          },
+        ],
+      },
+];
\ No newline at end of file
diff --git a/src/views/demo/system/layermanagement/index.vue b/src/views/demo/system/layermanagement/index.vue
new file mode 100644
index 0000000..a2cbd71
--- /dev/null
+++ b/src/views/demo/system/layermanagement/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="w-full" style="height: 100%">
+    <MapboxMaps />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import MapboxMaps from './components/MapboxMap.vue';
+</script>