diff --git a/.gitignore b/.gitignore
index a28af86e43..0c403a5842 100644
--- a/.gitignore
+++ b/.gitignore
@@ -48,3 +48,5 @@ core/core-frontend/src/assets/fsSvg.html
 /sdk/dataease-plugin-filter/
 /sdk/dataease-plugin-interface/
 /sdk/dataease-plugin-view/
+/extensions/
+.vite/
diff --git a/core/core-frontend/src/views/system/parameter/index.vue b/core/core-frontend/src/views/system/parameter/index.vue
index 232f272f0b..caab8148f3 100644
--- a/core/core-frontend/src/views/system/parameter/index.vue
+++ b/core/core-frontend/src/views/system/parameter/index.vue
@@ -40,7 +40,7 @@ const handleClick = (tab, event: Event) => {
 .sys-setting-p {
   width: 100%;
   background: var(--ContentBG, #ffffff);
-  height: calc(100% - 95px);
+  height: calc(100vh - 176px);
   box-sizing: border-box;
   margin-top: 12px;
 }
diff --git a/core/core-frontend/src/views/system/parameter/map/Geometry.vue b/core/core-frontend/src/views/system/parameter/map/Geometry.vue
index 4ff89855f6..47c21db890 100644
--- a/core/core-frontend/src/views/system/parameter/map/Geometry.vue
+++ b/core/core-frontend/src/views/system/parameter/map/Geometry.vue
@@ -1,6 +1,6 @@
 <template>
   <el-container class="geometry-container">
-    <el-aside width="200px" class="geonetry-aside">
+    <el-aside class="geonetry-aside">
       <div class="geo-title">
         <span>{{ t('online_map.geometry') }}</span>
         <span class="add-icon-span">
@@ -10,7 +10,13 @@
         </span>
       </div>
       <div class="geo-search">
-        <el-input class="m16 w100" v-model="keyword" clearable :placeholder="t('commons.search')">
+        <el-input
+          class="m16 w100"
+          v-model="keyword"
+          clearable
+          :placeholder="t('commons.search')"
+          @change="filterResource"
+        >
           <template #prefix>
             <el-icon>
               <Icon name="icon_search-outline_outlined"></Icon>
@@ -19,90 +25,118 @@
         </el-input>
       </div>
       <div class="map-tree-container">
-        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
+        <el-scrollbar class="menu-tree">
+          <el-tree
+            menu
+            ref="areaTreeRef"
+            node-key="id"
+            :data="treeData"
+            @node-click="handleNodeClick"
+            :highlight-current="true"
+            :expand-on-click-node="false"
+            :default-expand-all="false"
+            :filter-node-method="filterResourceNode"
+          >
+            <template #default="{ node, data }">
+              <span class="custom-tree-node" :class="{ 'is-disabled': node.disabled || data.root }">
+                <span
+                  :title="data.name"
+                  v-html="data.colorName && keyword ? data.colorName : data.name"
+                />
+              </span>
+            </template>
+          </el-tree>
+        </el-scrollbar>
       </div>
     </el-aside>
-    <el-main>地理信息内容区域</el-main>
+    <el-main class="geometry-main">
+      <div class="geo-content-container" v-if="!selectedData">
+        <EmptyBackground img-type="noneWhite" description="请在左侧选择区域" />
+      </div>
+      <div v-else class="geo-content-container">
+        <div class="geo-content-top">
+          <span>{{ selectedData.name }}</span>
+        </div>
+        <div class="geo-content-middle">
+          <div class="geo-area">
+            <div class="area-label"><span>区域代码</span></div>
+            <div class="area-content">
+              <span>{{ selectedData.id }}</span>
+            </div>
+          </div>
+          <div class="geo-area">
+            <div class="area-label"><span>上级区域</span></div>
+            <div class="area-content">
+              <span>{{ selectedData.parentName }}</span>
+              <span v-if="selectedData.pid" class="area-secondary">{{
+                '(' + selectedData.pid + ')'
+              }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="geo-content-bottom">
+          <div class="area-label"><span>坐标文件</span></div>
+          <el-scrollbar class="area-content-geo">
+            <span>{{ selectedData.geoJson }}</span>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-main>
   </el-container>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
+import { getWorldTree } from '@/api/map'
+import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
+import { getGeoJsonFile } from '@/views/chart/components/js/util'
+import { cloneDeep } from 'lodash-es'
+import { setColorName } from '@/utils/utils'
 const { t } = useI18n()
 const keyword = ref('')
-
+const treeData = ref([])
 interface Tree {
   label: string
   children?: Tree[]
 }
+const areaTreeRef = ref(null)
 
-const handleNodeClick = (data: Tree) => {
-  console.log(data)
-}
+const selectedData = ref(null)
 
-const data: Tree[] = [
-  {
-    label: 'Level one 1',
-    children: [
-      {
-        label: 'Level two 1-1',
-        children: [
-          {
-            label: 'Level three 1-1-1'
-          }
-        ]
-      }
-    ]
-  },
-  {
-    label: 'Level one 2',
-    children: [
-      {
-        label: 'Level two 2-1',
-        children: [
-          {
-            label: 'Level three 2-1-1'
-          }
-        ]
-      },
-      {
-        label: 'Level two 2-2',
-        children: [
-          {
-            label: 'Level three 2-2-1'
-          }
-        ]
-      }
-    ]
-  },
-  {
-    label: 'Level one 3',
-    children: [
-      {
-        label: 'Level two 3-1',
-        children: [
-          {
-            label: 'Level three 3-1-1'
-          }
-        ]
-      },
-      {
-        label: 'Level two 3-2',
-        children: [
-          {
-            label: 'Level three 3-2-1'
-          }
-        ]
-      }
-    ]
+const handleNodeClick = async (data: Tree) => {
+  selectedData.value = data
+  const geoJson = cloneDeep(await getGeoJsonFile(data['id']))
+  selectedData.value['geoJson'] = geoJson
+  const pid = data['pid']
+  if (pid) {
+    const parent = areaTreeRef.value.getNode(pid)
+    if (parent) {
+      selectedData.value.parentName = parent.data.name
+    }
   }
-]
-
-const defaultProps = {
-  children: 'children',
-  label: 'label'
 }
+const filterResource = val => {
+  areaTreeRef.value?.filter(val)
+}
+const filterResourceNode = (value: string, data) => {
+  setColorName(data, value)
+  if (!value) return true
+  return data.name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
+}
+
+const loadTreeData = () => {
+  getWorldTree()
+    .then(res => {
+      const root = res.data
+      treeData.value = [root]
+    })
+    .catch(e => {
+      console.error(e)
+    })
+}
+
+loadTreeData()
 </script>
 
 <style lang="less" scoped>
@@ -112,6 +146,7 @@ const defaultProps = {
     width: 280px !important;
     border-right: 1px solid #1f232926;
     padding: 16px;
+    height: 100%;
     .geo-title {
       display: flex;
       justify-content: space-between;
@@ -123,6 +158,7 @@ const defaultProps = {
         line-height: 24px;
       }
       .add-icon-span {
+        display: none;
         color: #3370ff;
         height: 20px;
         width: 20px;
@@ -140,6 +176,79 @@ const defaultProps = {
     .geo-search {
       margin-bottom: 16px;
     }
+    .map-tree-container {
+      height: calc(100% - 96px);
+      overflow-y: auto;
+    }
+  }
+  .geometry-main {
+    padding: 16px !important;
   }
 }
+.geo-content-container {
+  width: 100%;
+  height: 100%;
+  .geo-content-top {
+    height: 24px;
+    line-height: 24px;
+    margin-bottom: 16px;
+    span {
+      font-weight: 500;
+      font-size: 16px;
+      color: #1f2329;
+    }
+  }
+  .geo-content-middle {
+    display: flex;
+    .geo-area {
+      height: 48px;
+      width: 50%;
+    }
+    margin-bottom: 16px;
+  }
+  :deep(.area-label) {
+    height: 22px;
+    line-height: 22px;
+    span {
+      font-size: 14px;
+      color: #646a73;
+      font-weight: 400;
+    }
+  }
+  :deep(.area-content) {
+    line-height: 22px;
+    height: 22px;
+    span {
+      font-size: 14px;
+      color: #1f2329;
+      font-weight: 400;
+    }
+    .area-secondary {
+      color: #646a73;
+    }
+  }
+  .geo-content-bottom {
+    width: 100%;
+    height: calc(100% - 110px);
+    .area-content-geo {
+      line-height: 22px;
+      overflow-x: hidden;
+      overflow-y: auto;
+      height: calc(100% - 30px);
+      span {
+        font-size: 14px;
+        color: #1f2329;
+        font-weight: 400;
+      }
+    }
+  }
+}
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  box-sizing: content-box;
+  padding-right: 4px;
+  overflow: hidden;
+}
 </style>