feat(mapUtils): 维护map内部状态

ZvonimirSun · Feb 29, 2024 · 17a0a86 · 17a0a86
1 parent ffa4cd1
commit 17a0a86
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 11 deletions.
diff --git a/src/tools/latLng.vue b/src/tools/latLng.vue
@@ -24,7 +24,7 @@
 
 <script lang="ts" setup>
 import { marker, Icon, Map, Marker, LatLng, Popup } from 'leaflet'
-import { initMap, utils } from '@/utils/mapUtils'
+import { createMap, utils } from '@/utils/mapUtils'
 import { Ref } from 'vue'
 
 const yellowIcon = new Icon({
@@ -41,7 +41,7 @@ const keyword = ref('')
 const mapContainer = ref<HTMLDivElement>() as Ref<HTMLDivElement>
 
 onMounted(() => {
-  map = initMap({
+  map = createMap({
     dom: mapContainer.value,
     view: {
       center: [35, 105],

diff --git a/src/utils/mapUtils.ts b/src/utils/mapUtils.ts
@@ -1,7 +1,7 @@
 import 'leaflet/dist/leaflet.css'
 
 import $axios from '@/plugins/Axios'
-import { map, Map, Icon, MapOptions, control, layerGroup, ControlPosition, TileLayer, LatLng } from 'leaflet'
+import { map, Map, Icon, MapOptions, control, layerGroup, ControlPosition, TileLayer, LatLng, Control } from 'leaflet'
 import { ChineseLayer, chineseLayer } from '@/utils/leaflet.ChineseLayer.js'
 import markerShadow from 'leaflet/dist/images/marker-shadow.png'
 import markerIcon from 'leaflet/dist/images/marker-icon.png'
@@ -25,9 +25,6 @@ interface InitMapOptions {
   }
 }
 
-const tdtToken = 'bed806b1ccb34b268ab1c0700123d444'
-const gaodeToken = '868d6830a7409520ae283cde3a3f84d1'
-
 interface ChineseLayerOptions {
   type: string,
   chinese: true,
@@ -50,11 +47,31 @@ const defaultMapOptions: MapOptions = {
   trackResize: true
 }
 
-function initMap (options: InitMapOptions) {
+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) {
-    control.layers({
+    controlMap.layers = control.layers({
       高德矢量: getLayer({
         type: 'GaoDe.Normal.Map',
         chinese: true,
@@ -141,13 +158,13 @@ function initMap (options: InitMapOptions) {
     }).addTo(map)
   }
   if (options.controls?.scale !== false) {
-    control.scale({
+    controlMap.scale = control.scale({
       imperial: false,
       position: typeof options.controls?.scale === 'string' ? options.controls.scale : 'bottomright'
     }).addTo(map)
   }
   if (options.controls?.zoom !== false) {
-    control.zoom({
+    controlMap.zoom = control.zoom({
       zoomInTitle: '放大',
       zoomOutTitle: '缩小',
       position: typeof options.controls?.zoom === 'string' ? options.controls.zoom : 'topright'
@@ -287,6 +304,10 @@ async function getAddress (location: LatLng): Promise<string> {
   }
 }
 
+function getMapStatus (map: Map) {
+  return persistMap.get(map)
+}
+
 const utils = {
   formatDegree,
   getAddress,
@@ -296,7 +317,8 @@ const utils = {
 export {
   tdtToken,
   gaodeToken,
-  initMap,
+  createMap,
   addLayer,
+  getMapStatus,
   utils
 }