af-mobile-client-vue3 1.1.8 → 1.1.9

package/src/components/data/XOlMap/index.vue

@@ -308,109 +308,115 @@ async function handleMoveEnd() {
  * 初始化地图
  * @param params - 初始化参数
  */
-function init(params: InitParams = {}): void {
-  if (!mapRef.value) {
-    return
-  }
-
-  // 保存初始化参数
-  mapParams.value = params
-
-  // 设置默认参数
-  const {
-    center = [116.404, 39.915],
-    zoom = 10,
-    maxZoom = 18,
-    minZoom = 4,
-  } = params
+function init(params: InitParams = {}): Promise<void> {
+  return new Promise((resolve) => {
+    if (!mapRef.value) {
+      resolve()
+      return
+    }
 
-  try {
-    getConfigByName('webConfig', (res) => {
-      const tianDiTuKey = res.tianDiTuKey || 'c16876b28898637c0a1a68b3fa410504'
-      const amapKey = res.amapKey || '5ebabc4536d4b42e0dd1e20175cca8ab'
-
-      tiandityKey.value = tianDiTuKey
-      gaodeKey.value = amapKey
-      // 初始化所有底图图层
-      initializeLayers(tianDiTuKey)
-
-      // 创建地图实例 - 加载所有底图图层，但默认只显示高德地图
-      map = new Map({
-        target: mapRef.value,
-        layers: Object.values(baseMaps), // 加载所有底图图层
-        view: new View({
-          center: fromLonLat(center),
-          zoom,
-          projection: 'EPSG:3857',
-          maxZoom,
-          minZoom,
-        }),
-        controls: defaultControls({
-          zoom: false,
-          rotate: false,
-          attribution: false,
-        }).extend([
-          new ScaleLine({
-            units: 'metric',
-            className: 'ol-scale-line',
+    // 保存初始化参数
+    mapParams.value = params
+
+    // 设置默认参数
+    const {
+      center = [116.404, 39.915],
+      zoom = 10,
+      maxZoom = 18,
+      minZoom = 4,
+    } = params
+
+    try {
+      getConfigByName('webConfig', (res) => {
+        const tianDiTuKey = res.tianDiTuKey || 'c16876b28898637c0a1a68b3fa410504'
+        const amapKey = res.amapKey || '5ebabc4536d4b42e0dd1e20175cca8ab'
+
+        tiandityKey.value = tianDiTuKey
+        gaodeKey.value = amapKey
+        // 初始化所有底图图层
+        initializeLayers(tianDiTuKey)
+
+        // 创建地图实例 - 加载所有底图图层，但默认只显示高德地图
+        map = new Map({
+          target: mapRef.value,
+          layers: Object.values(baseMaps), // 加载所有底图图层
+          view: new View({
+            center: fromLonLat(center),
+            zoom,
+            projection: 'EPSG:3857',
+            maxZoom,
+            minZoom,
+          }),
+          controls: defaultControls({
+            zoom: false,
+            rotate: false,
+            attribution: false,
+          }).extend([
+            new ScaleLine({
+              units: 'metric',
+              className: 'ol-scale-line',
+            }),
+          ]),
+          interactions: defaultInteractions({
+            altShiftDragRotate: false,
+            pinchRotate: false,
           }),
-        ]),
-        interactions: defaultInteractions({
-          altShiftDragRotate: false,
-          pinchRotate: false,
-        }),
-      })
-
-      // 更新地图大小，确保地图正确渲染
-      setTimeout(() => {
-        if (map) {
-          map.updateSize()
-          // 确保默认图层正确显示
-          handleMapChange('tianditu')
-        }
-      }, 200)
-
-      // 监听地图移动结束事件
-      map.on('moveend', handleMoveEnd)
-
-      // 设置鼠标样式
-      if (mapRef.value) {
-        mapRef.value.style.cursor = 'grab'
-        // 监听地图事件
-        const mapElement = mapRef.value
-
-        // 鼠标按下时
-        mapElement.addEventListener('mousedown', () => {
-          mapElement.style.cursor = 'grabbing'
-          // 用户开始拖动地图，取消跟随定位
-          if (locationTimer) {
-            isFollowingLocation.value = false
-          }
         })
 
-        // 触摸开始时
-        mapElement.addEventListener('touchstart', () => {
-          // 用户开始拖动地图，取消跟随定位
-          if (locationTimer) {
-            isFollowingLocation.value = false
+        // 更新地图大小，确保地图正确渲染
+        setTimeout(() => {
+          if (map) {
+            map.updateSize()
+            // 确保默认图层正确显示
+            handleMapChange('tianditu')
+            // 地图初始化完成后解析 Promise
+            resolve()
           }
-        })
+        }, 200)
+
+        // 监听地图移动结束事件
+        map.on('moveend', handleMoveEnd)
+
+        // 设置鼠标样式
+        if (mapRef.value) {
+          mapRef.value.style.cursor = 'grab'
+          // 监听地图事件
+          const mapElement = mapRef.value
+
+          // 鼠标按下时
+          mapElement.addEventListener('mousedown', () => {
+            mapElement.style.cursor = 'grabbing'
+            // 用户开始拖动地图，取消跟随定位
+            if (locationTimer) {
+              isFollowingLocation.value = false
+            }
+          })
 
-        // 鼠标释放时
-        mapElement.addEventListener('mouseup', () => {
-          mapElement.style.cursor = 'grab'
-        })
+          // 触摸开始时
+          mapElement.addEventListener('touchstart', () => {
+            // 用户开始拖动地图，取消跟随定位
+            if (locationTimer) {
+              isFollowingLocation.value = false
+            }
+          })
 
-        // 鼠标离开地图时
-        mapElement.addEventListener('mouseleave', () => {
-          mapElement.style.cursor = 'grab'
-        })
-      }
-    })
-  }
-  catch (error) {
-    console.error('地图初始化失败:', error)
-  }
+          // 鼠标释放时
+          mapElement.addEventListener('mouseup', () => {
+            mapElement.style.cursor = 'grab'
+          })
+
+          // 鼠标离开地图时
+          mapElement.addEventListener('mouseleave', () => {
+            mapElement.style.cursor = 'grab'
+          })
+        }
+      })
+    }
+    catch (error) {
+      console.error('地图初始化失败:', error)
+      resolve()
+    }
+  })
 }
 
 /**
@@ -905,6 +911,7 @@ defineExpose({
 // 组件卸载时清理地图实例
 onUnmounted(() => {
   if (map) {
+    stopNavigation()
     map.setTarget(undefined)
     map = null
   }

package/src/components/data/XOlMap/utils/wgs84ToGcj02.js

@@ -1,154 +1,154 @@
-// 导入proj控件
-import * as proj from 'ol/proj'
-
-function forEachPoint(func) {
-  return function (input, opt_output, opt_dimension) {
-    const len = input.length
-
-    const dimension = opt_dimension || 2
-    let output
-
-    if (opt_output) {
-      output = opt_output
-    }
-    else {
-      if (dimension !== 2) {
-        output = input.slice()
-      }
-      else {
-        output = [len]
-      }
-    }
-    for (let offset = 0; offset < len; offset += dimension) {
-      func(input, output, offset)
-    }
-    return output
-  }
-}
-
-const gcj02 = {}
-const PI = Math.PI
-const AXIS = 6378245.0
-// eslint-disable-next-line no-loss-of-precision
-const OFFSET = 0.00669342162296594323 // (a^2 - b^2) / a^2
-
-function delta(wgLon, wgLat) {
-  let dLat = transformLat(wgLon - 105.0, wgLat - 35.0)
-  let dLon = transformLon(wgLon - 105.0, wgLat - 35.0)
-  const radLat = (wgLat / 180.0) * PI
-  let magic = Math.sin(radLat)
-  magic = 1 - OFFSET * magic * magic
-  const sqrtMagic = Math.sqrt(magic)
-  dLat = (dLat * 180.0) / (((AXIS * (1 - OFFSET)) / (magic * sqrtMagic)) * PI)
-  dLon = (dLon * 180.0) / ((AXIS / sqrtMagic) * Math.cos(radLat) * PI)
-  return [dLon, dLat]
-}
-
-function outOfChina(lon, lat) {
-  if (lon < 72.004 || lon > 137.8347) {
-    return true
-  }
-  return lat < 0.8293 || lat > 55.8271
-}
-
-function transformLat(x, y) {
-  let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
-  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
-  ret += ((20.0 * Math.sin(y * PI) + 40.0 * Math.sin((y / 3.0) * PI)) * 2.0) / 3.0
-  ret += ((160.0 * Math.sin((y / 12.0) * PI) + 320 * Math.sin((y * PI) / 30.0)) * 2.0) / 3.0
-  return ret
-}
-
-function transformLon(x, y) {
-  let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
-  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
-  ret += ((20.0 * Math.sin(x * PI) + 40.0 * Math.sin((x / 3.0) * PI)) * 2.0) / 3.0
-  ret += ((150.0 * Math.sin((x / 12.0) * PI) + 300.0 * Math.sin((x / 30.0) * PI)) * 2.0) / 3.0
-  return ret
-}
-
-gcj02.toWGS84 = forEachPoint((input, output, offset) => {
-  let lng = input[offset]
-  let lat = input[offset + 1]
-  if (!outOfChina(lng, lat)) {
-    const deltaD = delta(lng, lat)
-    lng = lng - deltaD[0] // 改回减法
-    lat = lat - deltaD[1] // 改回减法
-  }
-  output[offset] = lng
-  output[offset + 1] = lat
-})
-
-gcj02.fromWGS84 = forEachPoint((input, output, offset) => {
-  let lng = input[offset]
-  let lat = input[offset + 1]
-  if (!outOfChina(lng, lat)) {
-    const deltaD = delta(lng, lat)
-    lng = lng + deltaD[0] // 改回加法
-    lat = lat + deltaD[1] // 改回加法
-  }
-  output[offset] = lng
-  output[offset + 1] = lat
-})
-
-const sphericalMercator = {}
-const RADIUS = 6378137
-const MAX_LATITUDE = 85.0511287798
-const RAD_PER_DEG = Math.PI / 180
-
-sphericalMercator.forward = forEachPoint((input, output, offset) => {
-  const lat = Math.max(Math.min(MAX_LATITUDE, input[offset + 1]), -MAX_LATITUDE)
-  const sin = Math.sin(lat * RAD_PER_DEG)
-  output[offset] = RADIUS * input[offset] * RAD_PER_DEG
-  output[offset + 1] = (RADIUS * Math.log((1 + sin) / (1 - sin))) / 2
-})
-
-sphericalMercator.inverse = forEachPoint((input, output, offset) => {
-  output[offset] = input[offset] / RADIUS / RAD_PER_DEG
-  output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / RADIUS)) - Math.PI / 2) / RAD_PER_DEG
-})
-
-const projzh = {}
-
-projzh.ll2gmerc = function (input, opt_output, opt_dimension) {
-  const output = gcj02.toWGS84(input, opt_output, opt_dimension) // 改用 toWGS84
-  return projzh.ll2smerc(output, output, opt_dimension)
-}
-
-projzh.gmerc2ll = function (input, opt_output, opt_dimension) {
-  const output = projzh.smerc2ll(input, input, opt_dimension)
-  return gcj02.fromWGS84(output, opt_output, opt_dimension) // 改用 fromWGS84
-}
-
-// smerc2gmerc 需要修改
-
-projzh.smerc2gmerc = function (input, opt_output, opt_dimension) {
-  let output = projzh.smerc2ll(input, input, opt_dimension)
-  output = gcj02.toWGS84(output, output, opt_dimension) // 这里应该用 toWGS84
-  return projzh.ll2smerc(output, output, opt_dimension)
-}
-
-// gmerc2smerc 需要修改
-
-projzh.gmerc2smerc = function (input, opt_output, opt_dimension) {
-  let output = projzh.smerc2ll(input, input, opt_dimension)
-  output = gcj02.fromWGS84(output, output, opt_dimension) // 这里应该用 fromWGS84
-  return projzh.ll2smerc(output, output, opt_dimension)
-}
-
-projzh.ll2smerc = sphericalMercator.forward
-projzh.smerc2ll = sphericalMercator.inverse
-
-// 定义WGS84转GCJ02的投影
-const extent = [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
-export const wgs84ToGcj02Projection = new proj.Projection({
-  code: 'WGS84-TO-GCJ02',
-  extent,
-  units: 'm',
-})
-
-// 添加投影和转换方法
-proj.addProjection(wgs84ToGcj02Projection)
-// 注意这里转换方法的顺序与原来相反
-proj.addCoordinateTransforms('EPSG:4326', wgs84ToGcj02Projection, projzh.ll2gmerc, projzh.gmerc2ll)
-proj.addCoordinateTransforms('EPSG:3857', wgs84ToGcj02Projection, projzh.smerc2gmerc, projzh.gmerc2smerc)
+// 导入proj控件
+import * as proj from 'ol/proj'
+
+function forEachPoint(func) {
+  return function (input, opt_output, opt_dimension) {
+    const len = input.length
+
+    const dimension = opt_dimension || 2
+    let output
+
+    if (opt_output) {
+      output = opt_output
+    }
+    else {
+      if (dimension !== 2) {
+        output = input.slice()
+      }
+      else {
+        output = [len]
+      }
+    }
+    for (let offset = 0; offset < len; offset += dimension) {
+      func(input, output, offset)
+    }
+    return output
+  }
+}
+
+const gcj02 = {}
+const PI = Math.PI
+const AXIS = 6378245.0
+// eslint-disable-next-line no-loss-of-precision
+const OFFSET = 0.00669342162296594323 // (a^2 - b^2) / a^2
+
+function delta(wgLon, wgLat) {
+  let dLat = transformLat(wgLon - 105.0, wgLat - 35.0)
+  let dLon = transformLon(wgLon - 105.0, wgLat - 35.0)
+  const radLat = (wgLat / 180.0) * PI
+  let magic = Math.sin(radLat)
+  magic = 1 - OFFSET * magic * magic
+  const sqrtMagic = Math.sqrt(magic)
+  dLat = (dLat * 180.0) / (((AXIS * (1 - OFFSET)) / (magic * sqrtMagic)) * PI)
+  dLon = (dLon * 180.0) / ((AXIS / sqrtMagic) * Math.cos(radLat) * PI)
+  return [dLon, dLat]
+}
+
+function outOfChina(lon, lat) {
+  if (lon < 72.004 || lon > 137.8347) {
+    return true
+  }
+  return lat < 0.8293 || lat > 55.8271
+}
+
+function transformLat(x, y) {
+  let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
+  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
+  ret += ((20.0 * Math.sin(y * PI) + 40.0 * Math.sin((y / 3.0) * PI)) * 2.0) / 3.0
+  ret += ((160.0 * Math.sin((y / 12.0) * PI) + 320 * Math.sin((y * PI) / 30.0)) * 2.0) / 3.0
+  return ret
+}
+
+function transformLon(x, y) {
+  let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
+  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0
+  ret += ((20.0 * Math.sin(x * PI) + 40.0 * Math.sin((x / 3.0) * PI)) * 2.0) / 3.0
+  ret += ((150.0 * Math.sin((x / 12.0) * PI) + 300.0 * Math.sin((x / 30.0) * PI)) * 2.0) / 3.0
+  return ret
+}
+
+gcj02.toWGS84 = forEachPoint((input, output, offset) => {
+  let lng = input[offset]
+  let lat = input[offset + 1]
+  if (!outOfChina(lng, lat)) {
+    const deltaD = delta(lng, lat)
+    lng = lng - deltaD[0] // 改回减法
+    lat = lat - deltaD[1] // 改回减法
+  }
+  output[offset] = lng
+  output[offset + 1] = lat
+})
+
+gcj02.fromWGS84 = forEachPoint((input, output, offset) => {
+  let lng = input[offset]
+  let lat = input[offset + 1]
+  if (!outOfChina(lng, lat)) {
+    const deltaD = delta(lng, lat)
+    lng = lng + deltaD[0] // 改回加法
+    lat = lat + deltaD[1] // 改回加法
+  }
+  output[offset] = lng
+  output[offset + 1] = lat
+})
+
+const sphericalMercator = {}
+const RADIUS = 6378137
+const MAX_LATITUDE = 85.0511287798
+const RAD_PER_DEG = Math.PI / 180
+
+sphericalMercator.forward = forEachPoint((input, output, offset) => {
+  const lat = Math.max(Math.min(MAX_LATITUDE, input[offset + 1]), -MAX_LATITUDE)
+  const sin = Math.sin(lat * RAD_PER_DEG)
+  output[offset] = RADIUS * input[offset] * RAD_PER_DEG
+  output[offset + 1] = (RADIUS * Math.log((1 + sin) / (1 - sin))) / 2
+})
+
+sphericalMercator.inverse = forEachPoint((input, output, offset) => {
+  output[offset] = input[offset] / RADIUS / RAD_PER_DEG
+  output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / RADIUS)) - Math.PI / 2) / RAD_PER_DEG
+})
+
+const projzh = {}
+
+projzh.ll2gmerc = function (input, opt_output, opt_dimension) {
+  const output = gcj02.toWGS84(input, opt_output, opt_dimension) // 改用 toWGS84
+  return projzh.ll2smerc(output, output, opt_dimension)
+}
+
+projzh.gmerc2ll = function (input, opt_output, opt_dimension) {
+  const output = projzh.smerc2ll(input, input, opt_dimension)
+  return gcj02.fromWGS84(output, opt_output, opt_dimension) // 改用 fromWGS84
+}
+
+// smerc2gmerc 需要修改
+
+projzh.smerc2gmerc = function (input, opt_output, opt_dimension) {
+  let output = projzh.smerc2ll(input, input, opt_dimension)
+  output = gcj02.toWGS84(output, output, opt_dimension) // 这里应该用 toWGS84
+  return projzh.ll2smerc(output, output, opt_dimension)
+}
+
+// gmerc2smerc 需要修改
+
+projzh.gmerc2smerc = function (input, opt_output, opt_dimension) {
+  let output = projzh.smerc2ll(input, input, opt_dimension)
+  output = gcj02.fromWGS84(output, output, opt_dimension) // 这里应该用 fromWGS84
+  return projzh.ll2smerc(output, output, opt_dimension)
+}
+
+projzh.ll2smerc = sphericalMercator.forward
+projzh.smerc2ll = sphericalMercator.inverse
+
+// 定义WGS84转GCJ02的投影
+const extent = [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
+export const wgs84ToGcj02Projection = new proj.Projection({
+  code: 'WGS84-TO-GCJ02',
+  extent,
+  units: 'm',
+})
+
+// 添加投影和转换方法
+proj.addProjection(wgs84ToGcj02Projection)
+// 注意这里转换方法的顺序与原来相反
+proj.addCoordinateTransforms('EPSG:4326', wgs84ToGcj02Projection, projzh.ll2gmerc, projzh.gmerc2ll)
+proj.addCoordinateTransforms('EPSG:3857', wgs84ToGcj02Projection, projzh.smerc2gmerc, projzh.gmerc2smerc)