@smart100/spu-web-plugin 1.0.8 → 1.0.9

package/src/map/index.ts

@@ -0,0 +1,564 @@
+import { urlquery } from '../urlquery'
+import { cloneDeep } from 'lodash-es'
+import { mapService } from './MapService'
+import { getAMapKey } from './AMapKey'
+import { axios } from '../axios'
+import { wgs84ToGcj02, BMapTransformBD09ToGCJ02Points } from './utils'
+
+type Location = {
+  longitude: string
+  latitude: string
+  address?: string
+  // [propName: string]: any;
+} | null
+
+const cachetime = 30000 // 缓存时间30秒
+let datetime: number | null = null
+let lastLocation: Location = null
+let runing = false
+let locationPromise: Promise<Location>
+
+// app端默认坐标为 gcj02
+const getLocationByNative = async (): Promise<Location> => {
+  console.log('getLocationByNative start...')
+  return new Promise((resolve, reject) => {
+    let isload = false
+    setTimeout(() => {
+      if (!isload) {
+        console.error('getLocationByNative fail: timeout 30000')
+        resolve(null)
+      }
+    }, 30000)
+    window.Native.getLocation((res: any, error: any, status: any) => {
+      // console.log('getLocation res', res)
+      // console.log('getLocation error', error)
+      // console.log('getLocation status', status)
+      isload = true
+      if (res && res?.longitude && res?.latitude) {
+        const result = {
+          longitude: res.longitude.toString(),
+          latitude: res.latitude.toString(),
+          address: res.address || ''
+        }
+        console.log(`getLocationByNative success: ${JSON.stringify(result)}`)
+        resolve(result)
+      } else {
+        console.error('getLocationByNative fail')
+        resolve(null)
+      }
+    })
+  })
+}
+
+// 浏览器定位: 需要开启https
+const getLocationByNavigator = async (): Promise<Location> => {
+  console.log('getLocationByNavigator start...')
+  return new Promise((resolve, reject) => {
+    if ('geolocation' in navigator) {
+      const time = setTimeout(() => {
+        console.error('getLocationByNavigator fail: timeout 5000')
+        resolve(null)
+      }, 5000)
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          // console.log(position)
+          // debugger
+          clearTimeout(time)
+          if (position.coords) {
+            // 浏览器定位默认返回 WGS84 坐标 需要转化为 GCJ02 坐标
+            const Gcj02 = wgs84ToGcj02(position.coords.longitude, position.coords.latitude)
+            // console.log(Gcj02)
+            // debugger
+            const result = {
+              latitude: Gcj02.lat.toString(),
+              longitude: Gcj02.lng.toString()
+            }
+            console.log(`getLocationByNavigator success: ${JSON.stringify(result)}`)
+            resolve(result)
+          } else {
+            console.error('getLocationByNavigator fail')
+            resolve(null)
+          }
+        },
+        () => {
+          clearTimeout(time)
+          console.error('getLocationByNavigator fail')
+          resolve(null)
+        }
+      )
+    } else {
+      console.error('getLocationByNavigator fail: navigator.geolocation not support')
+      resolve(null)
+    }
+  })
+}
+
+// ipaas ip 定位
+const getIPLocationByIpaas = async (
+  ip?: string
+): Promise<Location> => {
+  console.log('getIPLocationByIpaas start...')
+  return new Promise((resolve, reject) => {
+    const AMapKey = getAMapKey()
+
+    axios.post(
+      'https://silkroad.wxchina.com/api/openapi/publishEvent?topic=xw-listener&subtopic=xw-listener&apicaseid=6684389338001815271',
+      {
+        key: AMapKey.key, // 好像不传也没问题 因为key是在ipaas那边设置的
+        ip: ip || ''
+      }
+    )
+      .then((res: any) => {
+        // console.log(res)
+        // debugger
+
+        // res.data.rectangle = '113.1017375,22.93212254;113.6770499,23.3809537'
+        if (res.data.rectangle) {
+          const rectangle = res.data.rectangle
+          const rects = rectangle.split(';').map((rect: any) => {
+            const [longitude, latitude] = rect.split(',')
+            return {
+              longitude: Number(longitude),
+              latitude: Number(latitude)
+            }
+          })
+
+          const result = {
+            longitude: ((rects[0].longitude + rects[1].longitude) / 2).toString(),
+            latitude: ((rects[0].latitude + rects[1].latitude) / 2).toString()
+          }
+          console.log(`getIPLocationByIpaas success: ${JSON.stringify(result)}`)
+          resolve(result)
+        } else {
+          console.error('getIPLocationByIpaas fail')
+          resolve(null)
+        }
+      }).catch((err: any) => {
+        console.error(err)
+        console.error('getIPLocationByIpaas fail')
+        resolve(null)
+      })
+  })
+}
+
+// ipaas 逆地址解析
+const getAddressByIpaas = async (position: Location): Promise<string> => {
+  console.log('getAddressByIpaas start...')
+  // 如果不设置安全秘钥的话 js-api的逆地址查询不成功 返回 INVALID_USER_SCODE 改成用ipaas服务查询
+  return new Promise(async (resolve, reject) => {
+    if (position) {
+      try {
+        const AMapKey = getAMapKey()
+        const result = await axios.post('https://silkroad.wxchina.com/api/openapi/publishEvent?topic=xw-listener&subtopic=xw-listener&apicaseid=6684389338001809906', {
+          longitude: position.longitude,
+          latitude: position.latitude,
+          key: AMapKey.key
+          // extensions: 'all'
+        })
+        // console.log(result)
+        const address = result?.data?.formatted_address
+        if (address) {
+          console.log(`getAddressByIpaas success: ${address}`)
+          resolve(address)
+        } else {
+          console.error('getAddressByIpaas fail')
+          resolve('')
+        }
+      } catch (error) {
+        console.error(error)
+        console.error('getAddressByIpaas fail')
+        resolve('')
+      }
+    }
+  })
+}
+
+// 高德定位
+const getLocationByAmap = async (): Promise<Location> => {
+  console.log('getLocationByAmap start...')
+  return new Promise((resolve, reject) => {
+    const geolocation = new window.AMap.Geolocation({
+      enableHighAccuracy: true,
+      timeout: 15000
+    })
+
+    geolocation.getCurrentPosition((status: string, res: any) => {
+      // console.log(status, result)
+      // debugger
+      if (status === 'complete') {
+        const { lng, lat } = res.position
+        const result = {
+          longitude: lng.toString(),
+          latitude: lat.toString()
+        }
+        console.log(`getLocationByAmap success: ${JSON.stringify(result)}`)
+        resolve(result)
+      } else {
+        console.error('getLocationByAmap fail')
+        resolve(null)
+      }
+    })
+  })
+}
+
+// 高德城市定位
+const getCityLocationByAmap = async (): Promise<Location> => {
+  console.log('getCityLocationByAmap start...')
+  return new Promise((resolve, reject) => {
+    const geolocation = new window.AMap.Geolocation({
+      enableHighAccuracy: true,
+      timeout: 15000
+    })
+    geolocation.getCityInfo((status: string, res: any) => {
+      // console.log(res)
+      // debugger
+      if (status === 'complete') {
+        const lng = res.position[0].toString()
+        const lat = res.position[1].toString()
+        const result = {
+          longitude: lng.toString(),
+          latitude: lat.toString()
+        }
+        console.log(`getCityLocationByAmap success: ${JSON.stringify(result)}`)
+        resolve(result)
+      } else {
+        console.error('getCityLocationByAmap fail')
+        resolve(null)
+      }
+    })
+  })
+}
+
+// 高德逆地址解析
+const getAddressByAmap = async (position: Location): Promise<string> => {
+  console.log('getAddressByAmap start...')
+  console.log('getAddressByAmap changeto getAddressByIpaas')
+  // return new Promise((resolve, reject) => {
+  //   if (position) {
+  //     new window.AMap.Geocoder({
+  //       city: '',
+  //       radius: 500
+  //     }).getAddress([position.longitude, position.latitude], (status: string, result: any) => {
+  //       if (status === 'complete' && result.info === 'OK' && result.regeocode) {
+  //         resolve(result?.regeocode?.formattedAddress || '')
+  //       } else {
+  //         console.error('getAddressByAmap fail')
+  //         resolve('')
+  //       }
+  //     })
+  //   }
+  // })
+  // 如果不设置安全秘钥的话 js-api的逆地址查询不成功 返回 INVALID_USER_SCODE 改成用ipaas服务查询
+  const address = await getAddressByIpaas(position)
+  return address
+}
+
+// 腾讯ip定位：通过终端设备IP地址获取其当前所在地理位置，精确到市级，常用于显示当地城市天气预报、初始化用户城市等非精确定位场景。
+const getIPLocationByTMap = async (ip?: string): Promise<Location> => {
+  console.log('getIPLocationByTMap start...')
+  return new Promise((resolve, reject) => {
+    const ipLocation = new window.TMap.service.IPLocation()
+    const params = ip ? { ip } : {}
+    ipLocation
+      .locate(params)
+      .then((res: any) => {
+        const result = {
+          longitude: res.result.location.lng.toString(),
+          latitude: res.result.location.lat.toString()
+        }
+        console.log(`getIPLocationByTMap success: ${JSON.stringify(result)}`)
+        resolve(result)
+      })
+      .catch((err: any) => {
+        console.error(err)
+        console.error(`getIPLocationByTMap fail: ${JSON.stringify(err)}`)
+        resolve(null)
+      })
+  })
+}
+
+// 腾讯逆地址解析
+const getAddressByTMap = async (position: Location): Promise<string> => {
+  console.log('getAddressByTMap start...')
+  return new Promise((resolve, reject) => {
+    if (position) {
+      const location = new window.TMap.LatLng(position.latitude, position.longitude)
+      // console.log(position)
+      // console.log(location)
+      // debugger
+      new window.TMap.service.Geocoder()
+        .getAddress({
+          location,
+          getPoi: false
+        })
+        .then((res: any) => {
+          // console.log(res)
+          // debugger
+          const address = res?.result?.formatted_addresses?.recommend || res?.result?.address
+          console.log(`getAddressByTMap success: ${address}`)
+          resolve(address)
+        })
+        .catch((err: any) => {
+          console.error(err)
+          console.error(`getAddressByTMap fail: ${JSON.stringify(err)}`)
+          resolve('')
+        })
+    }
+  })
+}
+
+// 百度浏览器定位
+const getLocationByBMap = async (): Promise<Location> => {
+  console.log('getLocationByBMap start...')
+  return new Promise((resolve, reject) => {
+    new window.BMap.Geolocation().getCurrentPosition(
+      async (res: any) => {
+        // console.log(res)
+        // debugger
+        if (!res) {
+          console.error('getLocationByBMap fail')
+          resolve(null)
+          return
+        }
+        // 初始化已经指定 window.BMap.coordType = 'BMAP_COORD_GCJ02' 定位返回的定位信息，外层[latitude,longitude]依然是BD09，然后point里面的是GCJ02
+        // {
+        //   "accuracy": 150,
+        //   "altitude": null,
+        //   "altitudeAccuracy": null,
+        //   "heading": null,
+        //   "latitude": 39.915018933989,
+        //   "longitude": 116.40383261074,
+        //   "speed": null,
+        //   "timestamp": null,
+        //   "point": {
+        //     "lng": 116.39745977716758,
+        //     "lat": 39.908676092571405
+        //   },
+        //   "address": {
+        //     "country": "",
+        //     "city": "北京市",
+        //     "city_code": 0,
+        //     "district": "东城区",
+        //     "province": "北京市",
+        //     "street": "东华门大街",
+        //     "street_number": "66号"
+        //   }
+        // }
+
+        // 不用转换
+        // const point: any = await BMapTransformBD09ToGCJ02Points([{
+        //   lng: res.longitude,
+        //   lat: res.latitude
+        // }])
+        // console.log(point)
+        // debugger
+
+        const lng = res.point.lng.toString()
+        const lat = res.point.lat.toString()
+        const result = {
+          longitude: lng,
+          latitude: lat
+        }
+        console.log(`getLocationByBMap success: ${JSON.stringify(result)}`)
+        resolve(result)
+      },
+      {
+        enableHighAccuracy: true
+      }
+    )
+  })
+}
+
+// 百度城市定位
+const getCityLocationByBMap = async (): Promise<Location> => {
+  console.log('getCityLocationByBMap start...')
+  return new Promise((resolve, reject) => {
+    new window.BMap.LocalCity().get(async (res: any) => {
+      // console.log(res)
+      // debugger
+      const lng = res.center.lng.toString()
+      const lat = res.center.lat.toString()
+      if (lng && lat) {
+        // 城市ip定位返回的是 BD09 地址 需要转换
+        const point: any = await BMapTransformBD09ToGCJ02Points([
+          {
+            lng,
+            lat
+          }
+        ])
+        // console.log(point)
+        // debugger
+        const result = {
+          longitude: point[0].lng,
+          latitude: point[0].lat
+        }
+        console.log(`getCityLocationByBMap success: ${JSON.stringify(result)}`)
+        resolve(result)
+      } else {
+        console.error('getCityLocationByBMap fail')
+        resolve(null)
+      }
+    })
+  })
+}
+
+// 百度逆地址解析
+const getAddressByBmap = async (position: Location): Promise<string> => {
+  console.log('getAddressByBmap start...')
+  return new Promise(async (resolve, reject) => {
+    // resolve('')
+    if (!position) {
+      console.error('getAddressByBmap fail')
+      resolve('')
+      return
+    }
+    // // 把 GCJ02 转化为百度 BD09 地址
+    // const points: any = await transformGCJ02ToBD09Points([{
+    //   lng: position.longitude,
+    //   lat: position.latitude
+    // }])
+    // const point = points[0]
+
+    // 指定了 window.BMap.coordType = 'BMAP_COORD_GCJ02' 不需要转换
+    const point = new window.BMap.Point(position.longitude, position.latitude)
+    // console.log(point)
+    // debugger
+    new window.BMap.Geocoder().getLocation(point, (result: any) => {
+      // console.log(result)
+      const address = result?.address
+      if (address) {
+        console.log(`getAddressByBmap success: ${address}`)
+        resolve(address)
+      } else {
+        console.error('getAddressByBmap fail')
+        resolve('')
+      }
+    })
+  })
+}
+
+// 定位流程: 缓存 > 判断环境（APP，小程序，企微）基于环境获取定位 > 地图商高精度定位 > 地图商城市ip定位
+const getLocationPromise = async (): Promise<Location> => {
+  let location: Location = null
+
+  // 在 SPU 容器里使用 Native-API 的定位
+  if (window?.Native?.getLocation) {
+    location = await getLocationByNative()
+  }
+
+  if (!location) {
+    location = await getLocationByNavigator()
+  }
+
+  if (!location) {
+    if (mapService.type === 'amap') {
+      location = await getLocationByAmap()
+      // ip城市定位结果不精确 但总比定不到位好
+      if (!location) {
+        location = await getCityLocationByAmap()
+      }
+    } else if (mapService.type === 'tencent') {
+      location = await getIPLocationByTMap()
+    } else if (mapService.type === 'baidu') {
+      location = await getLocationByBMap()
+      // ip城市定位结果不精确 但总比定不到位好
+      if (!location) {
+        location = await getCityLocationByBMap()
+      }
+    }
+  }
+
+  if (!location) {
+    location = await getIPLocationByIpaas()
+  }
+
+  // 开发模式下为了方便测试提供虚拟定位
+  if (!location && urlquery.isvirtuallocation) {
+    location = {
+      longitude: '116.397454',
+      latitude: '39.908671'
+    }
+  }
+
+  if (location && !location.address) {
+    location.address = (await getAddress(location)) || '经纬度获取成功，但地址获取失败。'
+  }
+
+  return location
+}
+
+// WGS84 GCJ-02 BD-09 坐标系
+// https://www.jianshu.com/p/559029832a67
+async function getLocation() {
+  await mapService.init()
+  // debugger
+  // 缓存30秒
+  if (datetime && Date.now() - datetime <= cachetime && lastLocation && !runing) {
+    return cloneDeep(lastLocation)
+  }
+  // 兼容同时间发起多个
+  if (runing && locationPromise) {
+    return locationPromise
+  }
+  // console.log('runing')
+  runing = true
+  locationPromise = getLocationPromise()
+  const locationRes = await locationPromise
+  runing = false
+  if (locationRes) {
+    datetime = Date.now()
+    lastLocation = locationRes
+  }
+  return locationRes
+}
+
+// 逆地址解析
+const getAddress = async (position: Location): Promise<string> => {
+  await mapService.init()
+
+  let address = ''
+
+  // 先统一用ipaas解析 因为需要储存一致的地址格式（各地图商逆地址查询的地址格式不统一）
+  // 如果不行再按照各地图商解析
+  address = await getAddressByIpaas(position)
+
+  if (!address) {
+    if (mapService.type === 'amap') {
+      address = await getAddressByAmap(position)
+    } else if (mapService.type === 'tencent') {
+      address = await getAddressByTMap(position)
+    } else if (mapService.type === 'baidu') {
+      address = await getAddressByBmap(position)
+    }
+  }
+  return address
+}
+
+// const getDistance = async (p1: [number, number], p2: [number, number]) => {
+//   await mapService.init()
+//   return window.AMap.GeometryUtil.distance(p1, p2)
+// }
+
+// 两个经纬度距离计算
+const getDistance = async (latlng1: [number, number], latlng2: [number, number]) => {
+  // console.log(latlng1)
+  // console.log(latlng2)
+  const lng1 = Number(latlng1[0])
+  const lat1 = Number(latlng1[1])
+  const lng2 = Number(latlng2[0])
+  const lat2 = Number(latlng2[1])
+  const radLat1 = (lat1 * Math.PI) / 180.0
+  const radLat2 = (lat2 * Math.PI) / 180.0
+  const a = radLat1 - radLat2
+  const b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0
+  let s =
+    2 *
+    Math.asin(
+      Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2))
+    )
+  s = s * 6378.137 // EARTH_RADIUS
+  s = Math.round(s * 10000) / 10000
+  return s * 1000
+}
+
+export { getLocation, getAddress, getDistance }

package/src/map/utils.ts

@@ -0,0 +1,98 @@
+function transformLat (x: number, y: number) {
+  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 * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0
+  ret += (20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin(y / 3.0 * Math.PI)) * 2.0 / 3.0
+  ret += (160.0 * Math.sin(y / 12.0 * Math.PI) + 320 * Math.sin(y * Math.PI / 30.0)) * 2.0 / 3.0
+  return ret
+}
+
+function transformLon (x: number, y: number) {
+  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 * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0
+  ret += (20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin(x / 3.0 * Math.PI)) * 2.0 / 3.0
+  ret += (150.0 * Math.sin(x / 12.0 * Math.PI) + 300.0 * Math.sin(x / 30.0 * Math.PI)) * 2.0 / 3.0
+  return ret
+}
+
+function outOfChina (lng: number, lat: number) {
+  return (lng < 72.004 || lng > 137.8347) || (lat < 0.8293 || lat > 55.8271)
+}
+
+function delta (lng: number, lat: number) {
+  const a = 6378245.0 // 地球长半轴
+  const ee = 0.00669342162296594323 // 扁率
+  let dLat = transformLat(lng - 105.0, lat - 35.0)
+  let dLng = transformLon(lng - 105.0, lat - 35.0)
+  const radLat = lat / 180.0 * Math.PI
+  let magic = Math.sin(radLat)
+  magic = 1 - ee * magic * magic
+  const sqrtMagic = Math.sqrt(magic)
+  dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * Math.PI)
+  dLng = (dLng * 180.0) / (a / sqrtMagic * Math.cos(radLat) * Math.PI)
+  return {
+    lat: dLat,
+    lng: dLng
+  }
+}
+
+function wgs84ToGcj02 (lng: number, lat: number) {
+  if (outOfChina(lng, lat)) {
+    return {
+      lng: lng,
+      lat: lat
+    }
+  }
+  const d = delta(lng, lat)
+  return {
+    lng: lng + d.lng,
+    lat: lat + d.lat
+  }
+}
+
+
+
+/**
+ * 坐标常量说明：
+ * COORDINATES_WGS84 = 1, WGS84坐标
+ * COORDINATES_WGS84_MC = 2, WGS84的平面墨卡托坐标
+ * COORDINATES_GCJ02 = 3，GCJ02坐标
+ * COORDINATES_GCJ02_MC = 4, GCJ02的平面墨卡托坐标
+ * COORDINATES_BD09 = 5, 百度bd09经纬度坐标
+ * COORDINATES_BD09_MC = 6，百度bd09墨卡托坐标
+ * COORDINATES_MAPBAR = 7，mapbar地图坐标
+ * COORDINATES_51 = 8，51地图坐标
+ */
+const BMapTransformBD09ToGCJ02Points = (points: any[]) => {
+  return new Promise((resolve, reject) => {
+    new window.BMap.Convertor().translate(points, 5, 3, (data: any) => {
+      if (!data.status) {
+        resolve(data.points)
+      } else {
+        console.error(data)
+        // reject(data.status)
+        resolve(points)
+      }
+    })
+  })
+}
+
+const BMapTransformGCJ02ToBD09Points = (points: any[]) => {
+  return new Promise((resolve, reject) => {
+    const convertor = new window.BMap.Convertor()
+    convertor.translate(points, 3, 5, (data: any) => {
+      if (!data.status) {
+        resolve(data.points)
+      } else {
+        console.error(data)
+        // reject(data.status)
+        resolve(points)
+      }
+    })
+  })
+}
+
+export {
+  wgs84ToGcj02,
+  BMapTransformBD09ToGCJ02Points,
+  BMapTransformGCJ02ToBD09Points
+}