af-mobile-client-vue3 1.3.30 → 1.3.31

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

@@ -1,149 +1,149 @@
-/** 地址选择结果接口 */
-export interface LocationResult {
-  /** 经度 */
-  longitude: number
-  /** 纬度 */
-  latitude: number
-  /** 地址描述 */
-  address: string
-}
-
-/** 手机状态接口 */
-export interface PhoneLocationStatus {
-
-  status: string
-
-  data: {
-    location: string
-  }
-}
-
-/** 初始化参数接口 */
-export interface InitParams {
-  /** 地图中心点坐标 [经度, 纬度] */
-  center?: [number, number]
-  /** 地图缩放级别 */
-  zoom?: number
-  /** 最大缩放级别 */
-  maxZoom?: number
-  /** 最小缩放级别 */
-  minZoom?: number
-  /** 是否开启地址选择模式 */
-  enableLocationPicker?: boolean
-  /** 是否为预览模式（预览时不显示定位按钮） */
-  isPreview?: boolean
-}
-
-/** 点位数据接口 */
-export interface PointData {
-  /** 经度 */
-  longitude: number
-  /** 纬度 */
-  latitude: number
-  /** 点标题 */
-  title?: string
-  /** 自定义数据 */
-  extData?: Record<string, any>
-}
-
-/** 点位数据提供者函数类型 */
-export type PointDataProvider = () => PointData[] | Promise<PointData[]>
-
-/** 点位图层配置接口 */
-export interface PointLayerConfig {
-  /** 图层ID */
-  id: number
-  /** 图层名称 */
-  value: string
-  /** 是否显示 */
-  show: boolean
-  /** 是否在控制面板显示 */
-  showInControl?: boolean
-  /** 图标URL */
-  icon: string
-  /** 图标锚点 */
-  iconAnchor?: [number, number]
-  /** 图标缩放比例 */
-  scale?: number
-  /** 点击事件处理函数 */
-  onClick?: (point: PointData, event: any) => void
-  /** 点位数据提供者 */
-  dataProvider?: () => PointData[] | Promise<PointData[]>
-}
-
-/** WebGL渲染配置接口 */
-export interface WebGLPointOptions extends PointLayerConfig {
-  /** 图标大小 */
-  iconSize?: [number, number]
-  /** 是否开启聚合 */
-  enableCluster?: boolean
-  /** 聚合距离，单位像素 */
-  clusterDistance?: number
-  /** 聚合样式配置 */
-  clusterStyle?: {
-    /** 填充颜色 */
-    fillColor?: string
-    /** 边框颜色 */
-    strokeColor?: string
-    /** 文字颜色 */
-    textColor?: string
-  }
-  /** 渲染性能配置 */
-  performance?: {
-    /** 是否开启分块加载 */
-    enableChunk?: boolean
-    /** 每块数据量 */
-    chunkSize?: number
-    /** 是否开启节流 */
-    enableThrottle?: boolean
-    /** 节流时间间隔(ms) */
-    throttleWait?: number
-  }
-}
-
-/** WMS 图层配置接口 */
-export interface WMSLayerConfig {
-  /** 图层名称 */
-  layerName: string
-  /** 图层显示名称 */
-  value: string
-  /** 是否显示 */
-  show: boolean
-  /** 手机端是否显示 */
-  phoneShow: boolean
-  /** 图层 ID */
-  id: number
-}
-
-/** WMS 服务配置接口 */
-export interface WMSConfig {
-  /** 工作空间 */
-  workspace: string
-  /** 坐标系 */
-  srs: string
-  /** 图片格式 */
-  format: string
-  /** WMS 版本 */
-  version: string
-  /** WMS 服务地址 */
-  url: string
-}
-
-/** WMS 完整配置接口 */
-export interface WMSOptions {
-  /** WMS 图层列表 */
-  layers: WMSLayerConfig[]
-  /** WMS 服务配置 */
-  wms: WMSConfig
-}
-
-/**
- * 轨迹数据类型
- */
-export interface TrackData {
-  id: number
-  name: string
-  trackData: [number, number][] // 经纬度数组
-  color: string
-  show?: boolean // 是否显示
-}
+/** 地址选择结果接口 */
+export interface LocationResult {
+  /** 经度 */
+  longitude: number
+  /** 纬度 */
+  latitude: number
+  /** 地址描述 */
+  address: string
+}
+
+/** 手机状态接口 */
+export interface PhoneLocationStatus {
+
+  status: string
+
+  data: {
+    location: string
+  }
+}
+
+/** 初始化参数接口 */
+export interface InitParams {
+  /** 地图中心点坐标 [经度, 纬度] */
+  center?: [number, number]
+  /** 地图缩放级别 */
+  zoom?: number
+  /** 最大缩放级别 */
+  maxZoom?: number
+  /** 最小缩放级别 */
+  minZoom?: number
+  /** 是否开启地址选择模式 */
+  enableLocationPicker?: boolean
+  /** 是否为预览模式（预览时不显示定位按钮） */
+  isPreview?: boolean
+}
+
+/** 点位数据接口 */
+export interface PointData {
+  /** 经度 */
+  longitude: number
+  /** 纬度 */
+  latitude: number
+  /** 点标题 */
+  title?: string
+  /** 自定义数据 */
+  extData?: Record<string, any>
+}
+
+/** 点位数据提供者函数类型 */
+export type PointDataProvider = () => PointData[] | Promise<PointData[]>
+
+/** 点位图层配置接口 */
+export interface PointLayerConfig {
+  /** 图层ID */
+  id: number
+  /** 图层名称 */
+  value: string
+  /** 是否显示 */
+  show: boolean
+  /** 是否在控制面板显示 */
+  showInControl?: boolean
+  /** 图标URL */
+  icon: string
+  /** 图标锚点 */
+  iconAnchor?: [number, number]
+  /** 图标缩放比例 */
+  scale?: number
+  /** 点击事件处理函数 */
+  onClick?: (point: PointData, event: any) => void
+  /** 点位数据提供者 */
+  dataProvider?: () => PointData[] | Promise<PointData[]>
+}
+
+/** WebGL渲染配置接口 */
+export interface WebGLPointOptions extends PointLayerConfig {
+  /** 图标大小 */
+  iconSize?: [number, number]
+  /** 是否开启聚合 */
+  enableCluster?: boolean
+  /** 聚合距离，单位像素 */
+  clusterDistance?: number
+  /** 聚合样式配置 */
+  clusterStyle?: {
+    /** 填充颜色 */
+    fillColor?: string
+    /** 边框颜色 */
+    strokeColor?: string
+    /** 文字颜色 */
+    textColor?: string
+  }
+  /** 渲染性能配置 */
+  performance?: {
+    /** 是否开启分块加载 */
+    enableChunk?: boolean
+    /** 每块数据量 */
+    chunkSize?: number
+    /** 是否开启节流 */
+    enableThrottle?: boolean
+    /** 节流时间间隔(ms) */
+    throttleWait?: number
+  }
+}
+
+/** WMS 图层配置接口 */
+export interface WMSLayerConfig {
+  /** 图层名称 */
+  layerName: string
+  /** 图层显示名称 */
+  value: string
+  /** 是否显示 */
+  show: boolean
+  /** 手机端是否显示 */
+  phoneShow: boolean
+  /** 图层 ID */
+  id: number
+}
+
+/** WMS 服务配置接口 */
+export interface WMSConfig {
+  /** 工作空间 */
+  workspace: string
+  /** 坐标系 */
+  srs: string
+  /** 图片格式 */
+  format: string
+  /** WMS 版本 */
+  version: string
+  /** WMS 服务地址 */
+  url: string
+}
+
+/** WMS 完整配置接口 */
+export interface WMSOptions {
+  /** WMS 图层列表 */
+  layers: WMSLayerConfig[]
+  /** WMS 服务配置 */
+  wms: WMSConfig
+}
+
+/**
+ * 轨迹数据类型
+ */
+export interface TrackData {
+  id: number
+  name: string
+  trackData: [number, number][] // 经纬度数组
+  color: string
+  show?: boolean // 是否显示
+}

package/src/components/data/XOlMap/utils/{wgs84ToGcj02.js → wgs84ToGcj02.ts}

@@ -1,154 +1,171 @@
-// 导入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'
+
+type TransformFunction = (input: number[], output: number[], offset: number) => void
+
+function forEachPoint(func: TransformFunction) {
+  return function (input: number[], opt_output?: number[], opt_dimension?: number): number[] {
+    const len = input.length
+
+    const dimension = opt_dimension || 2
+    let output: number[]
+
+    if (opt_output) {
+      output = opt_output
+    }
+    else {
+      if (dimension !== 2) {
+        output = input.slice()
+      }
+      else {
+        output = Array.from({ length: len })
+      }
+    }
+    for (let offset = 0; offset < len; offset += dimension) {
+      func(input, output, offset)
+    }
+    return output
+  }
+}
+
+const gcj02: {
+  toWGS84: (input: number[], opt_output?: number[], opt_dimension?: number) => number[]
+  fromWGS84: (input: number[], opt_output?: number[], opt_dimension?: number) => number[]
+} = {} as any
+
+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: number, wgLat: number): [number, number] {
+  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: number, lat: number): boolean {
+  if (lon < 72.004 || lon > 137.8347) {
+    return true
+  }
+  return lat < 0.8293 || lat > 55.8271
+}
+
+function transformLat(x: number, y: number): 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 * 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: number, y: number): 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 * 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: {
+  forward: (input: number[], opt_output?: number[], opt_dimension?: number) => number[]
+  inverse: (input: number[], opt_output?: number[], opt_dimension?: number) => number[]
+} = {} as any
+
+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: {
+  ll2gmerc: (input: number[], opt_output?: number[], opt_dimension?: number) => number[]
+  gmerc2ll: (input: number[], opt_output?: number[], opt_dimension?: number) => number[]
+  smerc2gmerc: (input: number[], opt_output?: number[], opt_dimension?: number) => number[]
+  gmerc2smerc: (input: number[], opt_output?: number[], opt_dimension?: number) => number[]
+  ll2smerc: (input: number[], opt_output?: number[], opt_dimension?: number) => number[]
+  smerc2ll: (input: number[], opt_output?: number[], opt_dimension?: number) => number[]
+} = {} as any
+
+projzh.ll2gmerc = function (input: number[], opt_output?: number[], opt_dimension?: number): number[] {
+  const output = gcj02.toWGS84(input, opt_output, opt_dimension) // 改用 toWGS84
+  return projzh.ll2smerc(output, output, opt_dimension)
+}
+
+projzh.gmerc2ll = function (input: number[], opt_output?: number[], opt_dimension?: number): number[] {
+  const output = projzh.smerc2ll(input, input, opt_dimension)
+  return gcj02.fromWGS84(output, opt_output, opt_dimension) // 改用 fromWGS84
+}
+
+// smerc2gmerc 需要修改
+
+projzh.smerc2gmerc = function (input: number[], opt_output?: number[], opt_dimension?: number): number[] {
+  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: number[], opt_output?: number[], opt_dimension?: number): number[] {
+  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: [number, number, number, number] = [-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)