af-mobile-client-vue3 1.1.6 → 1.1.7

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

@@ -1,22 +1,36 @@
 <script setup lang="ts">
-import type { LocationResult } from '../types'
+import type { LocationResult, PhoneLocationStatus } from '../types'
+import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
 import { Button } from 'vant'
 import { nextTick, onMounted, ref, watch } from 'vue'
 import XOlMap from '../index.vue'
 
 interface Props {
   modelValue?: LocationResult
-  tianDiTuKey: string
-  amapKey: string
   defaultCenter?: [number, number]
   defaultZoom?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  defaultCenter: () => [116.404, 39.915],
-  defaultZoom: 10,
-  tianDiTuKey: '',
-  amapKey: '',
+  defaultCenter: () => {
+    try {
+      mobileUtil.execute({
+        param: undefined,
+        funcName: 'getPhoneStatus',
+        callbackFunc: (result) => {
+          const locationResult = result as PhoneLocationStatus
+          if (locationResult.f_latitude && locationResult.f_longitude) {
+            return [locationResult.f_longitude, locationResult.f_latitude]
+          }
+        },
+      })
+    }
+    catch (error) {
+      console.error('获取位置信息失败:', error)
+    }
+    return [108.948024, 34.263161] // 北京天安门坐标
+  },
+  defaultZoom: 16,
 })
 
 const emit = defineEmits<{
@@ -55,8 +69,6 @@ onMounted(() => {
     mapRef.value.init({
       center: props.defaultCenter,
       zoom: props.defaultZoom,
-      tianDiTuKey: props.tianDiTuKey,
-      amapKey: props.amapKey,
     })
 
     // 初始化后尝试获取地址信息

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

@@ -17,6 +17,7 @@ import type {
   WMSOptions,
 } from './types'
 import locationIcon from '@af-mobile-client-vue3/assets/img/component/positioning.png'
+import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
 import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
 import { Map, View } from 'ol'
 import { defaults as defaultControls, ScaleLine } from 'ol/control'
@@ -73,6 +74,8 @@ const wmsLayerStatus = ref<WMSLayerConfig[]>([])
 const vectorLayers: Record<number, VectorLayer<VectorSource>> = {}
 const pointLayerStatus = ref<PointLayerConfig[]>([])
 
+const tiandityKey = ref()
+const gaodeKey = ref()
 /** 导航模式 是否正在跟随定位 */
 const isFollowingLocation = ref(false)
 /** 定位定时器 */
@@ -85,11 +88,10 @@ let locationLayer: VectorLayer<VectorSource> | null = null
  */
 function createLocationLayer(): VectorLayer<VectorSource> {
   const source = new VectorSource()
-  const layer = new VectorLayer({
+  return new VectorLayer({
     source,
     zIndex: 10, // 确保位置图标在最上层
   })
-  return layer
 }
 
 /**
@@ -252,7 +254,7 @@ function initializeLayers(tianDiTuKey = ''): void {
  */
 async function getAddressInfo(location: [number, number]): Promise<string> {
   try {
-    const key = mapParams.value.amapKey
+    const key = gaodeKey.value
 
     if (!key) {
       return '获取地址失败: 未配置密钥'
@@ -320,86 +322,91 @@ function init(params: InitParams = {}): void {
     zoom = 10,
     maxZoom = 18,
     minZoom = 4,
-    tianDiTuKey = '',
-    amapKey = '',
   } = params
 
   try {
-    // 初始化所有底图图层
-    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',
+    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')
         }
-      })
+      }, 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'
-      })
-    }
+        // 鼠标释放时
+        mapElement.addEventListener('mouseup', () => {
+          mapElement.style.cursor = 'grab'
+        })
+
+        // 鼠标离开地图时
+        mapElement.addEventListener('mouseleave', () => {
+          mapElement.style.cursor = 'grab'
+        })
+      }
+    })
   }
   catch (error) {
     console.error('地图初始化失败:', error)

package/src/components/data/XOlMap/types.ts

@@ -28,12 +28,8 @@ export interface InitParams {
   maxZoom?: number
   /** 最小缩放级别 */
   minZoom?: number
-  /** 天地图密钥 */
-  tianDiTuKey?: string
   /** 是否开启地址选择模式 */
   enableLocationPicker?: boolean
-  /** 高德地图 API key */
-  amapKey?: string
 }
 
 /** 点位数据接口 */

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)