diff --git a/src/components/VanillaJsonEditor.vue b/src/components/VanillaJsonEditor.vue
index d79cc59a7..293adef61 100644
--- a/src/components/VanillaJsonEditor.vue
+++ b/src/components/VanillaJsonEditor.vue
@@ -77,7 +77,7 @@ const documentProperties = computed<{
   content?: string
   size?: string
 }>(() => {
-  if (showDocumentProperties) {
+  if (showDocumentProperties.value) {
     const data = jsonEditor.get()
     let content
     let code
diff --git a/src/main.ts b/src/main.ts
index 2815f7d2f..cfe898816 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,4 @@
 import config from './config'
-import EventBus from '@/plugins/EventBus.js'
 import App from '@/App.vue'
 import axios from '@/plugins/Axios'
 import { createPiniaPersist } from '@/plugins/PiniaPersist'
@@ -13,10 +12,6 @@ const $apiBase = import.meta.env.PROD ? config.apiOrigin : (import.meta.env.VITE
   const pinia = createPinia()
   const app = createApp(App)
 
-  app.config.globalProperties.$axios = axios
-  app.config.globalProperties.$eventBus = EventBus
-  app.provide('$axios', axios)
-  app.provide('$eventBus', EventBus)
   axios.$apiBase = $apiBase
 
   const piniaPersistPlugin = await createPiniaPersist({
diff --git a/src/tools/3dView/3dView.vue b/src/tools/3dView/3dView.vue
index e12357766..dfdd2d5e8 100644
--- a/src/tools/3dView/3dView.vue
+++ b/src/tools/3dView/3dView.vue
@@ -86,6 +86,7 @@ const rootPath = computed(() => {
     const path = rootFile.value.webkitRelativePath || rootFile.value.name
     return path.replace(fileName.value || '', '')
   }
+  return ''
 })
 
 function initScene() {
diff --git a/src/tools/geoJson/child/addService.vue b/src/tools/geoJson/child/AddService.vue
similarity index 74%
rename from src/tools/geoJson/child/addService.vue
rename to src/tools/geoJson/child/AddService.vue
index 9e458752b..01d26cdc4 100644
--- a/src/tools/geoJson/child/addService.vue
+++ b/src/tools/geoJson/child/AddService.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import type { Layer } from 'leaflet'
-import { CRS, tileLayer } from 'leaflet'
-import { dynamicMapLayer as esriDynamicMapLayer, tiledMapLayer as esriTiledMapLayer } from 'esri-leaflet'
+import type { Layer, Map } from 'leaflet'
 import { v4 as uuid } from 'uuid'
-import { tiledMapLayer } from '@/utils/iclient-leaflet'
 import $event from '@/plugins/EventBus'
+import { addLayer, removeLayer } from '@/utils/gisUtils'
 
+let _map: Map
 const data: {
   count: number
   name: string
@@ -25,50 +24,31 @@ const data: {
   layers: [],
 })
 
+onMounted(() => {
+  $event.emit('getMap', (map: Map) => {
+    _map = map
+  })
+})
+
 function addService() {
   const serviceUrl = data.url
   const serviceType = data.type
   const serviceName = data.name
   data.count++
   data.name = `服务 ${data.count}`
-  let layer
+  let layer: Layer
   try {
-    switch (serviceType) {
-      case 'supermap_rest':
-      case 'supermap_tile': {
-        layer = tiledMapLayer(serviceUrl, {
-          prjCoordSys: { epsgCode: 3857 },
-          crs: CRS.EPSG3857,
-        })
-        break
-      }
-      case 'arcgis_rest': {
-        layer = esriDynamicMapLayer({
-          url: serviceUrl,
-          f: 'image',
-        })
-        break
-      }
-      case 'arcgis_tile': {
-        layer = esriTiledMapLayer({
-          url: serviceUrl,
-        })
-        break
-      }
-      case 'tms': {
-        layer = tileLayer(serviceUrl)
-        break
-      }
-      default:
-        break
-    }
+    layer = addLayer(_map, {
+      name: serviceName,
+      type: serviceType,
+      url: serviceUrl,
+    })
   }
   catch (e) {
     ElMessage.error('添加服务失败')
     return
   }
   if (layer) {
-    $event.emit('addLayer', layer, serviceName)
     data.layers.push({
       name: serviceName,
       url: serviceUrl,
@@ -77,9 +57,9 @@ function addService() {
     })
   }
 }
-function removeLayer(index: number) {
+function remove(index: number) {
   if (data.layers[index]?.layer) {
-    $event.emit('removeLayer', data.layers[index].layer)
+    removeLayer(_map, data.layers[index].layer)
     data.layers.splice(index, 1)
   }
 }
@@ -105,7 +85,7 @@ function removeLayer(index: number) {
         >
           {{ item.url }}
         </div>
-        <el-button @click="removeLayer(index)">
+        <el-button @click="remove(index)">
           移除
         </el-button>
       </div>
diff --git a/src/tools/geoJson/child/geoJsonEditor.vue b/src/tools/geoJson/child/Editor.vue
similarity index 96%
rename from src/tools/geoJson/child/geoJsonEditor.vue
rename to src/tools/geoJson/child/Editor.vue
index 314a86fcf..630f45c1b 100644
--- a/src/tools/geoJson/child/geoJsonEditor.vue
+++ b/src/tools/geoJson/child/Editor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { debounce } from 'lodash-es'
-import $eventBus from '@/plugins/EventBus.js'
+import $eventBus from '@/plugins/EventBus'
 import VanillaJsonEditor from '@/components/VanillaJsonEditor.vue'
 import type { EditorValue } from '@/types/editor'
 
diff --git a/src/tools/geoJson/child/leafletMap.vue b/src/tools/geoJson/child/MainMap.vue
similarity index 72%
rename from src/tools/geoJson/child/leafletMap.vue
rename to src/tools/geoJson/child/MainMap.vue
index 6b8af9d83..acbd5e7c5 100644
--- a/src/tools/geoJson/child/leafletMap.vue
+++ b/src/tools/geoJson/child/MainMap.vue
@@ -1,58 +1,58 @@
 <script setup lang="ts">
 import 'leaflet/dist/leaflet.css'
 import type {
-  Control,
   GeoJSON,
-  Layer,
   Map,
 } from 'leaflet'
 import {
   Icon,
   Marker,
-  geoJSON,
-  marker,
 } from 'leaflet'
 import type { Feature, GeoJsonObject } from 'geojson'
 import $eventBus from '@/plugins/EventBus'
-import '@geoman-io/leaflet-geoman-free'
-import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'
-import { createMap, getMapStatus } from '@/utils/mapUtils'
+import {
+  addDefaultBaseLayers,
+  addOverlay,
+  createMap,
+  getGeoJsonLayer,
+  initDrawLayer,
+  initDrawMap,
+} from '@/utils/gisUtils'
 
 const defaultIcon = new Icon.Default()
-const yellowIcon = new Icon({
-  ...Icon.Default.prototype.options,
-  iconUrl: 'https://jsdelivr.cdn.iszy.xyz/gh/zvonimirsun/leaflet-color-markers@master/img/marker-icon-yellow.png',
-  iconRetinaUrl: 'https://jsdelivr.cdn.iszy.xyz/gh/zvonimirsun/leaflet-color-markers@master/img/marker-icon-2x-yellow.png',
+const yellowIcon = new Icon.Default({
+  iconUrl: 'marker-icon-yellow.png',
+  iconRetinaUrl: 'marker-icon-2x-yellow.png',
 })
 
-let geoJsonLayer: GeoJSON, _map: Map, layerControl: Control.Layers
+let geoJsonLayer: GeoJSON, _map: Map
 
 const selectedFeature = ref<Feature>()
 const mapContainer = ref<HTMLDivElement>()
 const propertyPopup = ref<HTMLDivElement>()
 
 onMounted(() => {
-  $eventBus.on('locationGeo', locationGeo)
+  $eventBus.on('getMap', getMap)
   $eventBus.on('updateGeojsonLayer', updateGeojsonLayer)
   $eventBus.on('getGeoJson', getGeoJson)
-  $eventBus.on('addLayer', addLayer)
-  $eventBus.on('removeLayer', removeLayer)
   $eventBus.on('selectFeature', selectFeature)
   initMap()
 })
 
 onBeforeUnmount(() => {
-  $eventBus.off('locationGeo', locationGeo)
+  $eventBus.off('getMap', getMap)
   $eventBus.off('updateGeojsonLayer', updateGeojsonLayer)
   $eventBus.off('getGeoJson', getGeoJson)
-  $eventBus.off('addLayer', addLayer)
-  $eventBus.off('removeLayer', removeLayer)
   $eventBus.off('selectFeature', selectFeature)
   if (_map) {
     _map.remove()
   }
 })
 
+function getMap() {
+  return _map
+}
+
 function initMap() {
   if (!mapContainer.value) {
     return
@@ -64,42 +64,29 @@ function initMap() {
       center: [35, 105],
       zoom: 4,
     },
-    controls: {
-      layers: true,
-    },
   })
+  addDefaultBaseLayers(_map)
   // 添加GeoJson图层
-  geoJsonLayer = geoJSON(undefined, {
+  geoJsonLayer = getGeoJsonLayer({
     onEachFeature,
-    pointToLayer: (feature, latLng) => {
-      return marker(latLng).addTo(_map)
-    },
   }).addTo(_map)
   // 添加底图、图层控制
-  layerControl = getMapStatus(_map).controls.layers as Control.Layers
-  layerControl.addOverlay(geoJsonLayer, '图形')
-  _map.pm.setLang('zh')
-  _map.pm.setGlobalOptions({
-    layerGroup: geoJsonLayer,
-  })
-  _map.pm.addControls({
-    position: 'topright',
-    drawCircleMarker: false,
-    drawText: false,
-    rotateMode: true,
+  addOverlay(_map, {
+    name: '图形',
+    layer: geoJsonLayer,
   })
-
-  _map.on('pm:create pm:remove pm:cut', (e) => {
-    updateEditor()
-    if (e.type === 'pm:create') {
-      onEachFeature(e.layer.toGeoJSON() as Feature, e.layer)
-    }
+  initDrawMap(_map, geoJsonLayer, {
+    onChange() {
+      updateEditor()
+    },
   })
 }
 
 function onEachFeature(feature: Feature, layer: GeoJSON | Marker) {
-  layer.on('pm:change', () => {
-    updateEditor()
+  initDrawLayer(layer, {
+    onChange: () => {
+      updateEditor()
+    },
   })
   if (!feature.properties) {
     feature.properties = {}
@@ -134,14 +121,6 @@ function onEachFeature(feature: Feature, layer: GeoJSON | Marker) {
   })
 }
 
-function locationGeo(geoJson: GeoJsonObject) {
-  try {
-    const layer = geoJSON(geoJson)
-    _map.fitBounds(layer.getBounds())
-  }
-  catch (e) {
-  }
-}
 function updateGeojsonLayer(geoJson: GeoJsonObject) {
   geoJsonLayer.clearLayers()
   try {
@@ -156,16 +135,6 @@ function getGeoJson(callback: (geoJson: GeoJsonObject) => void) {
   callback(geoJsonLayer?.toGeoJSON())
 }
 
-function addLayer(layer: Layer, serviceName: string) {
-  layer.addTo(_map)
-  layerControl.addOverlay(layer, serviceName)
-}
-
-function removeLayer(layer: Layer) {
-  _map.removeLayer(layer)
-  layerControl.removeLayer(layer)
-}
-
 function updateEditor() {
   if (geoJsonLayer.getLayers().length === 0) {
     $eventBus.emit('updateEditor', {
@@ -262,10 +231,6 @@ function selectFeature(index: number) {
         height: 20rem;
         overflow-y: auto;
 
-        * {
-          //box-sizing: border-box;
-        }
-
         .title {
           display: flex;
           width: 100%;
diff --git a/src/tools/geoJson/child/propertyTable.vue b/src/tools/geoJson/child/PropertyTable.vue
similarity index 100%
rename from src/tools/geoJson/child/propertyTable.vue
rename to src/tools/geoJson/child/PropertyTable.vue
diff --git a/src/tools/geoJson/geoJson.vue b/src/tools/geoJson/geoJson.vue
index 90ac13ba9..5395dc059 100644
--- a/src/tools/geoJson/geoJson.vue
+++ b/src/tools/geoJson/geoJson.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import LeafletMap from './child/leafletMap.vue'
-import GeoJsonEditor from './child/geoJsonEditor.vue'
-import PropertyTable from './child/propertyTable.vue'
-import AddService from './child/addService.vue'
+import MainMap from './child/MainMap.vue'
+import GeoJsonEditor from './child/Editor.vue'
+import PropertyTable from './child/PropertyTable.vue'
+import AddService from './child/AddService.vue'
 import ControlMenu from './child/ControlMenu.vue'
 
 const currentTab = ref('geoJson')
@@ -23,7 +23,7 @@ const wrapperHeight = computed(() => {
     ref="wrapper"
     class="wrapper"
   >
-    <LeafletMap />
+    <MainMap />
     <el-tabs
       v-model="currentTab"
       type="card"
diff --git a/src/tools/imageBase64.vue b/src/tools/imageBase64.vue
index 103631db4..6e3b6687f 100644
--- a/src/tools/imageBase64.vue
+++ b/src/tools/imageBase64.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import type { AxiosStatic } from 'axios'
+import $axios from '@/plugins/Axios'
 
 const dataUrl = ref('')
-const $axios: AxiosStatic = inject('$axios') as AxiosStatic
 const imgPreview = ref<HTMLImageElement>()
 const imageSize = ref({
   width: '',
diff --git a/src/tools/latLng.vue b/src/tools/latLng.vue
index ec5ab4af7..784a79216 100644
--- a/src/tools/latLng.vue
+++ b/src/tools/latLng.vue
@@ -2,12 +2,11 @@
 import type { Map, Marker } from 'leaflet'
 import { Icon, LatLng, Popup, marker } from 'leaflet'
 import type { Ref } from 'vue'
-import { createMap, utils } from '@/utils/mapUtils'
+import { addDefaultBaseLayers, createMap, formatDegree, getAddress, getLocation } from '@/utils/gisUtils'
 
-const yellowIcon = new Icon({
-  ...Icon.Default.prototype.options,
-  iconUrl: 'https://jsdelivr.cdn.iszy.xyz/gh/zvonimirsun/leaflet-color-markers@master/img/marker-icon-yellow.png',
-  iconRetinaUrl: 'https://jsdelivr.cdn.iszy.xyz/gh/zvonimirsun/leaflet-color-markers@master/img/marker-icon-2x-yellow.png',
+const yellowIcon = new Icon.Default({
+  iconUrl: 'marker-icon-yellow.png',
+  iconRetinaUrl: 'marker-icon-2x-yellow.png',
 })
 
 let map: Map
@@ -24,10 +23,8 @@ onMounted(() => {
       center: [35, 105],
       zoom: 4,
     },
-    controls: {
-      layers: true,
-    },
   })
+  addDefaultBaseLayers(map)
   centerMarker = marker(map.getCenter(), { icon: new Icon.Default() })
     .addTo(map)
     .bindPopup(updatePopupContent(map.getCenter()))
@@ -104,16 +101,16 @@ function updatePopupContent(location: LatLng, popup?: Popup, address?: string):
     content += `<p>西经W: ${Math.abs(lng)}</p>`
   }
   if (lat >= 0) {
-    content += `<p>北纬N: ${utils.formatDegree(Math.abs(lat))}</p>`
+    content += `<p>北纬N: ${formatDegree(Math.abs(lat))}</p>`
   }
   else {
-    content += `<p>南纬S: ${utils.formatDegree(Math.abs(lat))}</p>`
+    content += `<p>南纬S: ${formatDegree(Math.abs(lat))}</p>`
   }
   if (lng >= 0) {
-    content += `<p>东经E: ${utils.formatDegree(lng)}</p>`
+    content += `<p>东经E: ${formatDegree(lng)}</p>`
   }
   else {
-    content += `<p>西经W: ${utils.formatDegree(lng)}</p>`
+    content += `<p>西经W: ${formatDegree(lng)}</p>`
   }
   if (address) {
     content += `<p>地址: ${address}</p>`
@@ -145,7 +142,7 @@ function locateLocation(location: LatLng, fly?: boolean, address?: string) {
     const index = setTimeout(() => {
       helper()
     }, 500)
-    utils.getAddress(location).then((res) => {
+    getAddress(location).then((res) => {
       clearTimeout(index)
       address = res
       helper()
@@ -163,7 +160,7 @@ function locateLocation(location: LatLng, fly?: boolean, address?: string) {
 
 async function locateAddress(address: string) {
   try {
-    const info = await utils.getLocation(address)
+    const info = await getLocation(address)
     locateLocation(info.latLng, true, info.address)
   }
   catch (e) {
diff --git a/src/tools/viewSourceCode.vue b/src/tools/viewSourceCode.vue
index 74fcf49a9..7be11a4a4 100644
--- a/src/tools/viewSourceCode.vue
+++ b/src/tools/viewSourceCode.vue
@@ -3,6 +3,7 @@ import { html_beautify as htmlBeatify } from 'js-beautify'
 import 'highlight.js/lib/common'
 import hljsVuePlugin from '@highlightjs/vue-plugin'
 import 'highlight.js/styles/idea.css'
+import $axios from '@/plugins/Axios'
 
 export default {
   name: 'ViewSourceCode',
@@ -17,7 +18,7 @@ export default {
       if (this.url) {
         this.loading = true
         try {
-          const res = await this.$axios(`https://cors.iszy.xyz/${this.url}`)
+          const res = await $axios(`https://cors.iszy.xyz/${this.url}`)
           this.data = htmlBeatify(res.data || '')
           ElMessage.success('解析成功')
         }
diff --git a/src/utils/gisUtils/common.ts b/src/utils/gisUtils/common.ts
new file mode 100644
index 000000000..6fb63abe1
--- /dev/null
+++ b/src/utils/gisUtils/common.ts
@@ -0,0 +1,10 @@
+export const tdtToken = 'bed806b1ccb34b268ab1c0700123d444'
+export const gaodeToken = '868d6830a7409520ae283cde3a3f84d1'
+
+export function formatDegree(value: number) {
+  value = Math.abs(value)
+  const v1 = Math.floor(value)// 度
+  const v2 = Math.floor((value - v1) * 60) // 分
+  const v3 = ((value - v1) * 3600 % 60).toFixed(2) // 秒
+  return `${v1}° ${v2 < 10 ? `0${v2}` : v2}' ${Number.parseFloat(v3) < 10 ? `0${v3}` : v3}" `
+}
diff --git a/src/utils/leaflet.ChineseLayer.js b/src/utils/gisUtils/core/leaflet.ChineseLayer.js
similarity index 100%
rename from src/utils/leaflet.ChineseLayer.js
rename to src/utils/gisUtils/core/leaflet.ChineseLayer.js
diff --git a/src/utils/gisUtils/index.ts b/src/utils/gisUtils/index.ts
new file mode 100644
index 000000000..58bd77d2a
--- /dev/null
+++ b/src/utils/gisUtils/index.ts
@@ -0,0 +1,2 @@
+export * from './utils'
+export * from './common'
diff --git a/src/utils/gisUtils/type.d.ts b/src/utils/gisUtils/type.d.ts
new file mode 100644
index 000000000..b3e71b399
--- /dev/null
+++ b/src/utils/gisUtils/type.d.ts
@@ -0,0 +1,38 @@
+import type { ControlPosition, MapOptions } from 'leaflet'
+
+export interface ControlOptions {
+  zoom?: boolean | ControlPosition
+  scale?: boolean | ControlPosition
+}
+
+export interface InitMapOptions {
+  dom: HTMLDivElement
+  options?: MapOptions
+  view: {
+    center: [number, number]
+    zoom: number
+  }
+  controls?: ControlOptions
+}
+
+export interface ChineseLayerOption {
+  type: string
+  chinese: true
+  options?: any
+}
+
+export interface GeneralLayerOption {
+  type: string
+  url: string
+  chinese?: false
+  options?: any
+}
+
+export type LayerOption = ChineseLayerOption | GeneralLayerOption
+
+export type LayerOptionWithName = LayerOption & { name: string }
+export type LayerOptions = LayerOption[]
+export interface LayerOptionsWithName {
+  layers: LayerOptions
+  name: string
+}
diff --git a/src/utils/gisUtils/utils/addressUtils.ts b/src/utils/gisUtils/utils/addressUtils.ts
new file mode 100644
index 000000000..9fd10bee6
--- /dev/null
+++ b/src/utils/gisUtils/utils/addressUtils.ts
@@ -0,0 +1,45 @@
+import { LatLng } from 'leaflet'
+import { csysConvert } from '../core/leaflet.ChineseLayer'
+import $axios from '@/plugins/Axios'
+import { gaodeToken } from '@/utils/gisUtils'
+
+export async function getLocation(address: string): Promise<{
+  latLng: LatLng
+  address: string
+}> {
+  const res = await $axios.get('https://amap.api.iszy.xyz/v3/geocode/geo', {
+    params: {
+      address,
+      key: gaodeToken,
+    },
+  })
+  if (res.data.status === '1' && Number(res.data.count) > 0) {
+    const info = res.data.geocodes[0]
+    const latLng = csysConvert.gcj02_To_gps84(Number.parseFloat(info.location.split(',')[0]), Number.parseFloat(info.location.split(',')[1]))
+    return {
+      latLng: new LatLng(latLng.lat, latLng.lng),
+      address: info.formatted_address,
+    }
+  }
+  else {
+    throw new Error('未找到相关地址。')
+  }
+}
+
+export async function getAddress(location: LatLng): Promise<string> {
+  const gaodeLatLng = csysConvert.gps84_To_gcj02(location.lng, location.lat)
+  const res = await $axios.get('https://amap.api.iszy.xyz/v3/geocode/regeo', {
+    params: {
+      location: `${gaodeLatLng.lng},${gaodeLatLng.lat}`,
+      output: 'json',
+      key: gaodeToken,
+      homeorcorp: 1,
+    },
+  })
+  if (res.data.status === '1' && res.data.regeocode.formatted_address) {
+    return res.data.regeocode.formatted_address
+  }
+  else {
+    throw new Error('未找到相关地址。')
+  }
+}
diff --git a/src/utils/gisUtils/utils/drawUtils.ts b/src/utils/gisUtils/utils/drawUtils.ts
new file mode 100644
index 000000000..ecf80ec59
--- /dev/null
+++ b/src/utils/gisUtils/utils/drawUtils.ts
@@ -0,0 +1,78 @@
+import type { GeoJSON, Layer, Map } from 'leaflet'
+import L from 'leaflet'
+import '@geoman-io/leaflet-geoman-free'
+import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'
+import { circle } from '@turf/turf'
+
+export function initDrawLayer(layer: Layer, {
+  onChange,
+}: {
+  onChange: (layer: L.Layer) => void
+}) {
+  layer.on('pm:change', ({ layer }) => {
+    onChange(layer)
+  })
+}
+
+export function initDrawMap(map: Map, geoJsonLayer: GeoJSON, {
+  onCreate,
+  onRemove,
+  onChange,
+}: {
+  onCreate?: (layer: L.Layer) => void
+  onRemove?: (layer: L.Layer) => void
+  onChange?: (layer: L.Layer) => void
+} = {}) {
+  if (!map.pm) {
+    L.PM.reInitLayer(map as any)
+  }
+  map.pm.setLang('zh')
+  map.pm.setGlobalOptions({
+    layerGroup: geoJsonLayer,
+  })
+  map.pm.addControls({
+    position: 'topright',
+    drawCircleMarker: false,
+    drawText: false,
+    rotateMode: true,
+  })
+  if (onCreate) {
+    map.on('pm:create', ({ shape, layer }) => {
+      onAdd({ shape, layer })
+      onCreate(layer)
+    })
+    map.on('pm:cut', ({ layer }) => {
+      onAdd({ layer })
+      onCreate(layer)
+    })
+  }
+  if (onRemove) {
+    map.on('pm:remove', ({ layer }) => {
+      onRemove(layer)
+    })
+  }
+  if (onChange) {
+    map.on('pm:create', ({ shape, layer }) => {
+      onAdd({ shape, layer })
+      onChange(layer)
+    })
+    map.on('pm:cut', ({ layer }) => {
+      onChange(layer)
+    })
+    map.on('pm:remove', ({ layer }) => {
+      onChange(layer)
+    })
+  }
+  function onAdd({ shape, layer }: { shape?: string, layer: Layer }) {
+    if (shape === 'Circle') {
+      const marker = layer as any
+      const latLng = marker.getLatLng()
+      const radius = marker.getRadius()
+      geoJsonLayer.addData(circle([latLng.lng, latLng.lat], radius / 1000))
+    }
+    else {
+      geoJsonLayer.addData((layer as GeoJSON).toGeoJSON())
+    }
+    geoJsonLayer.removeLayer(layer)
+  }
+}
diff --git a/src/utils/gisUtils/utils/geojsonUtils.ts b/src/utils/gisUtils/utils/geojsonUtils.ts
new file mode 100644
index 000000000..426f814bd
--- /dev/null
+++ b/src/utils/gisUtils/utils/geojsonUtils.ts
@@ -0,0 +1,17 @@
+import type { GeoJSON, LatLng, Layer } from 'leaflet'
+import { geoJSON, marker } from 'leaflet'
+
+export function getGeoJsonLayer({ geojson, onEachFeature, pointToLayer }: {
+  geojson?: any
+  onEachFeature?: (...args: any[]) => any
+  pointToLayer?: (_feature: any, latLng: LatLng) => Layer
+} = {}): GeoJSON {
+  return geoJSON(geojson, {
+    onEachFeature,
+    pointToLayer: pointToLayer ?? defaultPointToLayer,
+  })
+}
+
+function defaultPointToLayer(_feature: any, latLng: LatLng) {
+  return marker(latLng)
+}
diff --git a/src/utils/gisUtils/utils/index.ts b/src/utils/gisUtils/utils/index.ts
new file mode 100644
index 000000000..9278c975f
--- /dev/null
+++ b/src/utils/gisUtils/utils/index.ts
@@ -0,0 +1,6 @@
+export * from './mapUtils'
+export * from './layerUtils'
+export * from './addressUtils'
+export * from './geojsonUtils'
+export * from './viewUtils'
+export * from './drawUtils'
diff --git a/src/utils/gisUtils/utils/layerUtils/index.ts b/src/utils/gisUtils/utils/layerUtils/index.ts
new file mode 100644
index 000000000..6a50efd7e
--- /dev/null
+++ b/src/utils/gisUtils/utils/layerUtils/index.ts
@@ -0,0 +1 @@
+export * from './layerUtils'
diff --git a/src/utils/gisUtils/utils/layerUtils/layerUtils.ts b/src/utils/gisUtils/utils/layerUtils/layerUtils.ts
new file mode 100644
index 000000000..e628b93a9
--- /dev/null
+++ b/src/utils/gisUtils/utils/layerUtils/layerUtils.ts
@@ -0,0 +1,246 @@
+import type { ControlPosition, Layer, LayerGroup, Map, TileLayer } from 'leaflet'
+import { CRS, control, layerGroup, tileLayer } from 'leaflet'
+import { dynamicMapLayer as esriDynamicMapLayer, tiledMapLayer as esriTiledMapLayer } from 'esri-leaflet'
+import type { ChineseLayerOption, LayerOption, LayerOptionWithName, LayerOptionsWithName } from '../../type'
+import { get } from '../persistMap'
+import { tdtToken } from '@/utils/gisUtils/common'
+import { chineseLayer } from '@/utils/gisUtils/core/leaflet.ChineseLayer'
+import { tiledMapLayer } from '@/utils/iclient-leaflet'
+
+function addLayerControl(map: Map, { position }: { position?: ControlPosition } = {}) {
+  const status = get(map)
+  status.controls.layers = control.layers({}, {}, {
+    hideSingleBase: true,
+    position: position ?? 'bottomleft',
+  }).addTo(map)
+  return status.controls.layers
+}
+
+export function addLayer(map: Map, options: LayerOptionWithName | LayerOptionsWithName): Layer | LayerGroup {
+  let layer: Layer | LayerGroup
+  if ('layers' in options) {
+    const layers = createLayers(options.layers)
+    layer = layerGroup(layers)
+  }
+  else {
+    layer = createLayer(options)
+  }
+  addOverlay(map, {
+    name: options.name,
+    layer,
+  })
+  return layer
+}
+
+export function removeLayer(map: Map, layer: Layer | LayerGroup) {
+  const status = get(map)
+  const layerControl = status.controls.layers
+  map.removeLayer(layer)
+  layerControl?.removeLayer(layer)
+}
+
+export function addDefaultBaseLayers(map: Map) {
+  const layers = [
+    {
+      name: '高德矢量',
+      layer: createLayer({
+        type: 'GaoDe.Normal.Map',
+        chinese: true,
+        options: {
+          attribution: '&copy; <a href="https://lbs.amap.com/pages/terms/" target="_blank">高德地图</a> 贡献者',
+        },
+      }),
+    },
+    {
+      name: '高德影像',
+      layer: layerGroup(createLayers([
+        {
+          type: 'GaoDe.Satellite.Map',
+          chinese: true,
+        },
+        {
+          type: 'GaoDe.Satellite.Annotation',
+          chinese: true,
+        },
+      ]), {
+        attribution: '&copy; <a href="https://lbs.amap.com/pages/terms/" target="_blank">高德地图</a> 贡献者',
+      }),
+    },
+    {
+      name: '谷歌矢量',
+      layer: createLayer({
+        type: 'Google.Normal.Map',
+        chinese: true,
+        options: {
+          attribution: '&copy; <a href="https://www.google.com/maps" target="_blank">谷歌地图</a> 贡献者',
+        },
+      }),
+    },
+    {
+      name: '谷歌影像',
+      layer: layerGroup(createLayers([
+        {
+          type: 'Google.Satellite.Map',
+          chinese: true,
+        },
+        {
+          type: 'Google.Satellite.Annotation',
+          chinese: true,
+        },
+      ]), {
+        attribution: '&copy; <a href="https://www.google.com/maps" target="_blank">谷歌地图</a> 贡献者',
+      }),
+    },
+    {
+      name: 'OpenStreetMap',
+      layer: createLayer({
+        type: 'OSM.Normal.Map',
+        chinese: true,
+        options: {
+          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> 贡献者',
+        },
+      }),
+    },
+    {
+      name: '天地图矢量',
+      layer: layerGroup(createLayers([
+        {
+          type: 'TianDiTu.Normal.Map',
+          chinese: true,
+        },
+        {
+          type: 'TianDiTu.Normal.Annotation',
+          chinese: true,
+        },
+      ]), {
+        attribution: '&copy; <a href="https://www.tianditu.gov.cn/" target="_blank">天地图</a> 贡献者',
+      }),
+    },
+    {
+      name: '天地图影像',
+      layer: layerGroup(createLayers([{
+        type: 'TianDiTu.Satellite.Map',
+        chinese: true,
+      }, {
+        type: 'TianDiTu.Satellite.Annotation',
+        chinese: true,
+      }]), {
+        attribution: '&copy; <a href="https://www.tianditu.gov.cn/" target="_blank">天地图</a> 贡献者',
+      }),
+    },
+    {
+      name: '天地图地形',
+      layer: layerGroup(createLayers([
+        {
+          type: 'TianDiTu.Terrain.Map',
+          chinese: true,
+        },
+        {
+          type: 'TianDiTu.Terrain.Annotation',
+          chinese: true,
+        },
+      ]), {
+        attribution: '&copy; <a href="https://www.tianditu.gov.cn/" target="_blank">天地图</a> 贡献者',
+      }),
+    },
+  ]
+  layers.forEach(({ name, layer }, index) => {
+    addBaseLayer(map, { name, layer, add: index === 0 })
+  })
+}
+
+export function addBaseLayer(map: Map, { name, layer, add }: { name: string, layer: Layer | LayerGroup, add?: boolean }) {
+  const status = get(map)
+  const layerControl = status.controls.layers || addLayerControl(map)
+  layerControl.addBaseLayer(layer, name)
+  if (add) {
+    layer.addTo(map)
+  }
+}
+
+export function addOverlay(map: Map, { name, layer }: { name: string, layer: Layer | LayerGroup }) {
+  const status = get(map)
+  const layerControl = status.controls.layers || addLayerControl(map)
+  layerControl.addOverlay(layer, name)
+}
+
+function createLayer(options: LayerOption): Layer {
+  if (options.chinese) {
+    return getChineseLayer(options)
+  }
+  else {
+    switch (options.type) {
+      case 'supermap_rest':
+      case 'supermap_tile': {
+        return tiledMapLayer(options.url, {
+          prjCoordSys: { epsgCode: 3857 },
+          crs: CRS.EPSG3857,
+          ...options.options,
+        })
+      }
+      case 'arcgis_rest': {
+        return esriDynamicMapLayer({
+          url: options.url,
+          f: 'image',
+          ...options.options,
+        })
+      }
+      case 'arcgis_tile': {
+        return esriTiledMapLayer({
+          url: options.url,
+          ...options.options,
+        })
+      }
+      case 'tms': {
+        return tileLayer(options.url, {
+          ...options.options,
+        })
+      }
+    }
+    // todo
+    throw new Error('not support')
+  }
+}
+
+function createLayers(options: LayerOption[]): Layer[] {
+  return options.map(option => createLayer(option))
+}
+
+function getChineseLayer(options: Omit<ChineseLayerOption, 'chinese'>): TileLayer {
+  const _options: any = {}
+  const type = options.type
+  const providerName = type.split('.')[0]
+  switch (providerName) {
+    case 'GaoDe':
+      Object.assign(_options, {
+        maxNativeZoom: 18,
+        maxZoom: 20,
+      })
+      break
+    case 'Google':
+      Object.assign(_options, {
+        maxZoom: 20,
+      })
+      break
+    case 'OSM':
+      Object.assign(_options, {
+        maxNativeZoom: 19,
+        maxZoom: 20,
+      })
+      break
+    case 'TianDiTu':
+      Object.assign(_options, {
+        key: tdtToken,
+        maxNativeZoom: 18,
+        maxZoom: 20,
+      })
+      if (type.includes('Terrain')) {
+        Object.assign(_options, {
+          maxNativeZoom: 14,
+        })
+      }
+      break
+  }
+
+  return chineseLayer(type, { ..._options, ...options.options })
+}
diff --git a/src/utils/gisUtils/utils/mapUtils.ts b/src/utils/gisUtils/utils/mapUtils.ts
new file mode 100644
index 000000000..4629a07d0
--- /dev/null
+++ b/src/utils/gisUtils/utils/mapUtils.ts
@@ -0,0 +1,53 @@
+import 'leaflet/dist/leaflet.css'
+
+import type { Map, MapOptions } from 'leaflet'
+import { Icon, control, map } from 'leaflet'
+import persistMap, { add } from './persistMap'
+import config from '@/config'
+import type { InitMapOptions } from '@/utils/gisUtils/type'
+
+Icon.Default.prototype.options.imagePath = `https://jsdelivr.${config.cdnHost}/gh/zvonimirsun/leaflet-color-markers@master/img/`
+Icon.Default.prototype.options.iconUrl = 'marker-icon-blue.png'
+Icon.Default.prototype.options.iconRetinaUrl = 'marker-icon-2x-blue.png'
+
+const defaultMapOptions: MapOptions = {
+  attributionControl: true,
+  zoomControl: false,
+  minZoom: 4,
+  trackResize: true,
+}
+
+export function createMap(options: InitMapOptions) {
+  const map = getMap(options.dom, options.options)
+  map.setView(options.view.center, options.view.zoom)
+  const status = add(map)
+  if (options.controls?.scale !== false) {
+    status.controls.scale = control.scale({
+      imperial: false,
+      position: typeof options.controls?.scale === 'string' ? options.controls.scale : 'bottomright',
+    }).addTo(map)
+  }
+  if (options.controls?.zoom !== false) {
+    status.controls.zoom = control.zoom({
+      zoomInTitle: '放大',
+      zoomOutTitle: '缩小',
+      position: typeof options.controls?.zoom === 'string' ? options.controls.zoom : 'topright',
+    }).addTo(map)
+  }
+  return map
+}
+
+function getMap(dom: HTMLDivElement, options: MapOptions = defaultMapOptions) {
+  return map(dom, {
+    ...defaultMapOptions,
+    ...options,
+  })
+}
+
+export function getMapStatus(map: Map) {
+  const status = persistMap.get(map)
+  if (!status) {
+    throw new Error('map not found')
+  }
+  return status
+}
diff --git a/src/utils/gisUtils/utils/persistMap.ts b/src/utils/gisUtils/utils/persistMap.ts
new file mode 100644
index 000000000..d1a894133
--- /dev/null
+++ b/src/utils/gisUtils/utils/persistMap.ts
@@ -0,0 +1,35 @@
+import type { Control, Map } from 'leaflet'
+
+interface Controls {
+  layers?: Control.Layers
+  zoom?: Control.Zoom
+  scale?: Control.Scale
+}
+
+const persistMap = new WeakMap<Map, {
+  controls: Controls
+}>()
+
+export function add(map: Map) {
+  const _status = persistMap.get(map)
+  if (_status) {
+    return _status
+  }
+  const status: {
+    controls: Controls
+  } = {
+    controls: {},
+  }
+  persistMap.set(map, status)
+  return status
+}
+
+export function get(map: Map) {
+  const status = persistMap.get(map)
+  if (!status) {
+    return add(map)
+  }
+  return status
+}
+
+export default persistMap
diff --git a/src/utils/gisUtils/utils/viewUtils.ts b/src/utils/gisUtils/utils/viewUtils.ts
new file mode 100644
index 000000000..7d54c6e96
--- /dev/null
+++ b/src/utils/gisUtils/utils/viewUtils.ts
@@ -0,0 +1,7 @@
+import type { Map } from 'leaflet'
+import { getGeoJsonLayer } from '@/utils/gisUtils'
+
+export function setViewByGeojson(map: Map, geojson: any) {
+  const bounds = getGeoJsonLayer(geojson).getBounds()
+  map.fitBounds(bounds)
+}
diff --git a/src/utils/mapUtils.ts b/src/utils/mapUtils.ts
deleted file mode 100644
index ef361a393..000000000
--- a/src/utils/mapUtils.ts
+++ /dev/null
@@ -1,330 +0,0 @@
-import 'leaflet/dist/leaflet.css'
-
-import type { Control, ControlPosition, Map, MapOptions, TileLayer } from 'leaflet'
-import { Icon, LatLng, control, layerGroup, map } from 'leaflet'
-import config from '@/config'
-import { chineseLayer, csysConvert } from '@/utils/leaflet.ChineseLayer.js'
-import $axios from '@/plugins/Axios'
-
-Icon.Default.prototype.options.iconUrl = `https://jsdelivr.${config.cdnHost}/gh/zvonimirsun/leaflet-color-markers@master/img/marker-icon-blue.png`
-Icon.Default.prototype.options.iconRetinaUrl = `https://jsdelivr.${config.cdnHost}/gh/zvonimirsun/leaflet-color-markers@master/img/marker-icon-2x-blue.png`
-Icon.Default.prototype.options.shadowUrl = `https://jsdelivr.${config.cdnHost}/gh/zvonimirsun/leaflet-color-markers@master/img/marker-shadow.png`
-
-interface InitMapOptions {
-  dom: HTMLDivElement
-  options?: MapOptions
-  view: {
-    center: [number, number]
-    zoom: number
-  }
-  controls?: {
-    layers?: boolean | ControlPosition
-    zoom?: boolean | ControlPosition
-    scale?: boolean | ControlPosition
-  }
-}
-
-interface ChineseLayerOptions {
-  type: string
-  chinese: true
-  options?: any
-}
-
-interface GeneralLayerOptions {
-  type: string
-  url: string
-  chinese?: false
-  options?: any
-}
-
-type LayerOptions = ChineseLayerOptions | GeneralLayerOptions
-
-const defaultMapOptions: MapOptions = {
-  attributionControl: true,
-  zoomControl: false,
-  minZoom: 4,
-  trackResize: true,
-}
-
-const tdtToken = 'bed806b1ccb34b268ab1c0700123d444'
-const gaodeToken = '868d6830a7409520ae283cde3a3f84d1'
-
-const persistMap = new WeakMap<Map, {
-  controls: {
-    layers?: Control.Layers
-    zoom?: Control.Zoom
-    scale?: Control.Scale
-  }
-}>()
-
-function createMap(options: InitMapOptions) {
-  const map = getMap(options.dom, options.options)
-  map.setView(options.view.center, options.view.zoom)
-  const controlMap: {
-    layers?: Control.Layers
-    zoom?: Control.Zoom
-    scale?: Control.Scale
-  } = {
-  }
-  persistMap.set(map, {
-    controls: controlMap,
-  })
-  if (options.controls?.layers) {
-    controlMap.layers = control.layers({
-      高德矢量: getLayer({
-        type: 'GaoDe.Normal.Map',
-        chinese: true,
-        options: {
-          attribution: '&copy; <a href="https://lbs.amap.com/pages/terms/" target="_blank">高德地图</a> 贡献者',
-        },
-      }).addTo(map),
-      高德影像: layerGroup(getLayers([
-        {
-          type: 'GaoDe.Satellite.Map',
-          chinese: true,
-        },
-        {
-          type: 'GaoDe.Satellite.Annotation',
-          chinese: true,
-        },
-      ]), {
-        attribution: '&copy; <a href="https://lbs.amap.com/pages/terms/" target="_blank">高德地图</a> 贡献者',
-      }),
-      谷歌矢量: getLayer({
-        type: 'Google.Normal.Map',
-        chinese: true,
-        options: {
-          attribution: '&copy; <a href="https://www.google.com/maps" target="_blank">谷歌地图</a> 贡献者',
-        },
-      }),
-      谷歌影像: layerGroup(getLayers([
-        {
-          type: 'Google.Satellite.Map',
-          chinese: true,
-        },
-        {
-          type: 'Google.Satellite.Annotation',
-          chinese: true,
-        },
-      ]), {
-        attribution: '&copy; <a href="https://www.google.com/maps" target="_blank">谷歌地图</a> 贡献者',
-      }),
-      OpenStreetMap: getLayer({
-        type: 'OSM.Normal.Map',
-        chinese: true,
-        options: {
-          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> 贡献者',
-        },
-      }),
-      天地图矢量: layerGroup(getLayers([
-        {
-          type: 'TianDiTu.Normal.Map',
-          chinese: true,
-        },
-        {
-          type: 'TianDiTu.Normal.Annotation',
-          chinese: true,
-        },
-      ]), {
-        attribution: '&copy; <a href="https://www.tianditu.gov.cn/" target="_blank">天地图</a> 贡献者',
-      }),
-      天地图影像: layerGroup(getLayers([{
-        type: 'TianDiTu.Satellite.Map',
-        chinese: true,
-      }, {
-        type: 'TianDiTu.Satellite.Annotation',
-        chinese: true,
-      }]), {
-        attribution: '&copy; <a href="https://www.tianditu.gov.cn/" target="_blank">天地图</a> 贡献者',
-      }),
-      天地图地形: layerGroup(getLayers([
-        {
-          type: 'TianDiTu.Terrain.Map',
-          chinese: true,
-        },
-        {
-          type: 'TianDiTu.Terrain.Annotation',
-          chinese: true,
-        },
-      ]), {
-        attribution: '&copy; <a href="https://www.tianditu.gov.cn/" target="_blank">天地图</a> 贡献者',
-      }),
-    }, {}, {
-      hideSingleBase: true,
-      position: typeof options.controls?.layers === 'string' ? options.controls.layers : 'bottomleft',
-    }).addTo(map)
-  }
-  if (options.controls?.scale !== false) {
-    controlMap.scale = control.scale({
-      imperial: false,
-      position: typeof options.controls?.scale === 'string' ? options.controls.scale : 'bottomright',
-    }).addTo(map)
-  }
-  if (options.controls?.zoom !== false) {
-    controlMap.zoom = control.zoom({
-      zoomInTitle: '放大',
-      zoomOutTitle: '缩小',
-      position: typeof options.controls?.zoom === 'string' ? options.controls.zoom : 'topright',
-    }).addTo(map)
-  }
-  return map
-}
-
-function getMap(dom: HTMLDivElement, options: MapOptions = defaultMapOptions) {
-  return map(dom, {
-    ...defaultMapOptions,
-    ...options,
-  })
-}
-
-function addLayer(map: Map, options: LayerOptions | LayerOptions[], {
-  flat = true,
-  add = true,
-} = {}) {
-  if (Array.isArray(options)) {
-    const layers = options.map(option => getLayer(option))
-    if (add) {
-      if (flat) {
-        layers.forEach((layer) => {
-          layer.addTo(map)
-        })
-      }
-      else {
-        layerGroup(layers).addTo(map)
-      }
-    }
-    return layers
-  }
-  else {
-    const layer = getLayer(options)
-    if (add) {
-      layer.addTo(map)
-    }
-    return layer
-  }
-}
-
-function getLayer(options: LayerOptions): TileLayer {
-  if (options.chinese) {
-    return getChineseLayer(options)
-  }
-  else {
-    // todo
-    throw new Error('not support')
-  }
-}
-
-function getLayers(options: LayerOptions[]): TileLayer[] {
-  return options.map(option => getLayer(option))
-}
-
-function getChineseLayer(options: Omit<ChineseLayerOptions, 'chinese'>): TileLayer {
-  const _options: any = {}
-  const type = options.type
-  const providerName = type.split('.')[0]
-  switch (providerName) {
-    case 'GaoDe':
-      Object.assign(_options, {
-        maxNativeZoom: 18,
-        maxZoom: 20,
-      })
-      break
-    case 'Google':
-      Object.assign(_options, {
-        maxZoom: 20,
-      })
-      break
-    case 'OSM':
-      Object.assign(_options, {
-        maxNativeZoom: 19,
-        maxZoom: 20,
-      })
-      break
-    case 'TianDiTu':
-      Object.assign(_options, {
-        key: tdtToken,
-        maxNativeZoom: 18,
-        maxZoom: 20,
-      })
-      if (type.includes('Terrain')) {
-        Object.assign(_options, {
-          maxNativeZoom: 14,
-        })
-      }
-      break
-  }
-
-  return chineseLayer(type, { ..._options, ...options.options })
-}
-
-function formatDegree(value: number) {
-  value = Math.abs(value)
-  const v1 = Math.floor(value)// 度
-  const v2 = Math.floor((value - v1) * 60) // 分
-  const v3 = ((value - v1) * 3600 % 60).toFixed(2) // 秒
-  return `${v1}° ${v2 < 10 ? `0${v2}` : v2}' ${Number.parseFloat(v3) < 10 ? `0${v3}` : v3}" `
-}
-
-async function getLocation(address: string): Promise<{
-  latLng: LatLng
-  address: string
-}> {
-  const res = await $axios.get('https://amap.api.iszy.xyz/v3/geocode/geo', {
-    params: {
-      address,
-      key: gaodeToken,
-    },
-  })
-  if (res.data.status === '1' && Number(res.data.count) > 0) {
-    const info = res.data.geocodes[0]
-    const latLng = csysConvert.gcj02_To_gps84(Number.parseFloat(info.location.split(',')[0]), Number.parseFloat(info.location.split(',')[1]))
-    return {
-      latLng: new LatLng(latLng.lat, latLng.lng),
-      address: info.formatted_address,
-    }
-  }
-  else {
-    throw new Error('未找到相关地址。')
-  }
-}
-
-async function getAddress(location: LatLng): Promise<string> {
-  const gaodeLatLng = csysConvert.gps84_To_gcj02(location.lng, location.lat)
-  const res = await $axios.get('https://amap.api.iszy.xyz/v3/geocode/regeo', {
-    params: {
-      location: `${gaodeLatLng.lng},${gaodeLatLng.lat}`,
-      output: 'json',
-      key: gaodeToken,
-      homeorcorp: 1,
-    },
-  })
-  if (res.data.status === '1' && res.data.regeocode.formatted_address) {
-    return res.data.regeocode.formatted_address
-  }
-  else {
-    throw new Error('未找到相关地址。')
-  }
-}
-
-function getMapStatus(map: Map) {
-  const status = persistMap.get(map)
-  if (!status) {
-    throw new Error('map not found')
-  }
-  return status
-}
-
-const utils = {
-  formatDegree,
-  getAddress,
-  getLocation,
-}
-
-export {
-  tdtToken,
-  gaodeToken,
-  createMap,
-  addLayer,
-  getMapStatus,
-  utils,
-}