af-mobile-client-vue3 1.5.69 → 1.5.70

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.5.69",
+  "version": "1.5.70",
   "packageManager": "pnpm@10.13.1",
   "description": "Vue + Vite component lib",
   "engines": {

package/src/api/map/trackApi.ts

@@ -0,0 +1,94 @@
+import { getConfigByNameAsync } from '@af-mobile-client-vue3/services/api/common'
+import { post } from '@af-mobile-client-vue3/services/restTools'
+import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
+import { trajectoryThinning } from '@af-mobile-client-vue3/utils/map/track'
+import { trajectoryGrouping } from '@af-mobile-client-vue3/utils/map/trackUtils'
+import dayjs from 'dayjs/esm/index'
+
+/**
+ * trajectoryThinning 是否抽稀 默认 false
+ * trajectoryCorrection 是否高德纠偏 默认 false
+ * group 是否分组 默认 false 要进行高德纠偏必须分组
+ * AMAP_KEY 高德key 用来纠偏
+ * gapMs 分组时间间隔 毫秒 默认 30分钟
+ * rdpEpsilon RDP 精度（度） 默认 0.000001
+ * dbscanEpsilon DBSCAN聚类半径(km) 默认 0.01
+ * minPuts DBSCAN聚类 最小开始聚类点数 默认 20
+ * minDistance 分组数据进行高德纠偏起始纠偏数 默认 20 不能低于20 否则就会纠偏失败，失败也算次数
+ */
+export interface TrajectoryParams {
+  trajectoryThinning?: boolean
+  trajectoryCorrection?: boolean
+  group?: boolean
+  AMAP_KEY?: string
+  gapMs?: number
+  rdpEpsilon?: number
+  dbscanEpsilon?: number
+  minPuts?: number
+  minDistance?: number
+  orderTime?: string
+  serviceName?: string
+}
+export const defaultTrajectoryParams: Required<TrajectoryParams> = {
+  trajectoryThinning: false,
+  trajectoryCorrection: false,
+  group: false,
+  AMAP_KEY: '',
+  gapMs: 1800000,
+  rdpEpsilon: 0.000001,
+  dbscanEpsilon: 0.01,
+  minPuts: 20,
+  minDistance: 20,
+  orderTime: 'f_realtime asc',
+  serviceName: 'af-linepatrol',
+}
+/**
+ *
+ * @param userId 查询的用户id
+ * @param dateStr 查询的轨迹日期
+ * @param trajectoryParams 后台轨迹纠偏参数
+ */
+export async function getDeviceState(
+  userId: string = useUserStore().getLogin().id,
+  dateStr: string = dayjs().format('YYYY-MM-DD'),
+  trajectoryParams: TrajectoryParams = defaultTrajectoryParams,
+) {
+  const condition = `1 = 1 and f_user_id = ${userId}  and (f_realtime between '${dateStr} 00:00:00' and '${dateStr} 23:59:59'`
+  const param = {
+    condition,
+    dateStr,
+    userId,
+    ...trajectoryParams,
+  }
+  // 获取轨迹
+  const trackPoint = await post(`/api/${trajectoryParams.serviceName}/logic/getDeviceStateLogic`, param)
+  // 轨迹数据未处理，需要对原始数据进行 处理
+  if (trackPoint.state === 'error') {
+    // 轨迹抽稀
+    if (trackPoint.points.length >= 30) {
+      // 轨迹抽稀
+      let path = trajectoryThinning(trackPoint.points)
+      // 存储 path 数据供表格使用
+      const webConfig = await getConfigByNameAsync('webConfig')
+      if (webConfig?.setting?.lesseeName === 'jinbin') {
+        path = path.filter(item => item.sp !== '0.0')
+      }
+      // 轨迹分组
+      const trajectoryGroupingResult = trajectoryGrouping(path, {})
+      console.warn('>>>> trajectoryGroupingResult', trajectoryGroupingResult)
+      return trajectoryGroupingResult
+
+      // const graspRoadCorrectRes = await graspRoadCorrect(trajectoryGroupingResult)
+      // console.warn('>>>> graspRoadCorrect', graspRoadCorrectRes)
+      // console.warn('>>>> graspRoadCorrect', graspRoadCorrectRes.value)
+      // 返回数据
+      // return JSON.parse(graspRoadCorrectRes.value)
+    }
+    else {
+      console.warn('当日使用app时间较短或行程较少,不足够生成轨迹')
+    }
+  }
+  if (trackPoint.state === 'success') {
+    return trackPoint.points
+  }
+}

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

@@ -15,11 +15,14 @@ import type {
   PolygonData,
   PolygonLayerConfig,
   TrackData,
+  TrackGroupItem,
   WebGLPointOptions,
   WMSLayerConfig,
   WMSOptions,
 } from './types'
 import locationIcon from '@af-mobile-client-vue3/assets/img/component/positioning.png'
+import startIcon from '@af-mobile-client-vue3/assets/img/map/start.png'
+import terminusIcon from '@af-mobile-client-vue3/assets/img/map/terminus.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'
@@ -1192,7 +1195,6 @@ function addTrackLayer(trackData: TrackData): void {
   // 添加到地图
   map.addLayer(vectorLayer)
   trackLayers[trackData.id] = vectorLayer
-
   // 更新图层状态，确保 show 属性被正确设置
   const trackDataWithShow = {
     ...trackData,
@@ -1201,6 +1203,119 @@ function addTrackLayer(trackData: TrackData): void {
   trackLayerStatus.value.push(trackDataWithShow)
 }
 
+/**
+ * 添加分段轨迹组图层
+ * @param trackGroups - 轨迹组数组，每组包含唯一 key 和 path
+ * @param options - 轨迹图层配置
+ * @param options.id - 图层ID
+ * @param options.name - 图层名称
+ * @param options.color - 统一颜色，控制所有轨迹段
+ * @param options.show - 图层是否默认显示
+ */
+function addTrackGroupLayer(
+  trackGroups: TrackGroupItem[],
+  options: {
+    id?: number
+    name?: string
+    color?: string
+    show?: boolean
+  } = {},
+): void {
+  if (!map || !Array.isArray(trackGroups) || trackGroups.length === 0)
+    return
+
+  const layerId = options.id ?? 0
+  const layerName = options.name ?? (trackGroups.length === 1 ? trackGroups[0].key : '轨迹组')
+  const layerColor = options.color || '#ff0000'
+  const visible = options.show ?? true
+
+  const vectorSource = new VectorSource()
+  const vectorLayer = new VectorLayer({
+    source: vectorSource,
+    visible,
+    zIndex: 2,
+  })
+
+  trackGroups.forEach((group) => {
+    if (!group.path || group.path.length === 0)
+      return
+
+    const coordinates = group.path.map(coord => fromLonLat([coord.x, coord.y]))
+    if (coordinates.length > 1) {
+      const lineString = new Feature({
+        geometry: new LineString(coordinates),
+      })
+
+      const lineStyle = new Style({
+        stroke: new Stroke({
+          color: layerColor,
+          width: 4,
+        }),
+      })
+
+      lineString.setStyle(lineStyle)
+      vectorSource.addFeature(lineString)
+    }
+
+    const startPoint = new Feature({
+      geometry: new Point(coordinates[0]),
+      properties: { segmentKey: group.key, type: 'start' },
+    })
+    const endPoint = new Feature({
+      geometry: new Point(coordinates[coordinates.length - 1]),
+      properties: { segmentKey: group.key, type: 'end' },
+    })
+
+    const pointStyle = (src: string, text: string) =>
+      new Style({
+        image: new Icon({
+          src,
+          anchor: [0.5, 1],
+          scale: 0.15,
+          crossOrigin: 'anonymous',
+        }),
+        text: new Text({
+          text,
+          offsetY: 10,
+          font: '12px sans-serif',
+          fill: new Fill({
+            color: '#333',
+          }),
+          stroke: new Stroke({
+            color: '#fff',
+            width: 2,
+          }),
+        }),
+      })
+
+    // 解析时间：key格式为 "开始时间-结束时间"
+    const [startTime, endTime] = group.key.split('-')
+
+    startPoint.setStyle(pointStyle(startIcon, startTime || '起点'))
+    endPoint.setStyle(pointStyle(terminusIcon, endTime || '终点'))
+
+    vectorSource.addFeatures([startPoint, endPoint])
+  })
+
+  map.addLayer(vectorLayer)
+  trackLayers[layerId] = vectorLayer
+
+  const flatTrackData = trackGroups.reduce<[number, number][]>((acc, group) => {
+    if (group.path && group.path.length > 0) {
+      acc.push(...group.path.map(p => [p.x, p.y] as [number, number]))
+    }
+    return acc
+  }, [])
+
+  trackLayerStatus.value.push({
+    id: layerId,
+    name: layerName,
+    trackData: flatTrackData,
+    color: layerColor,
+    show: visible,
+  })
+}
+
 /**
  * 控制轨迹图层显示/隐藏
  * @param trackId - 轨迹ID
@@ -1272,6 +1387,7 @@ defineExpose({
   startNavigation,
   stopNavigation,
   addTrackLayer,
+  addTrackGroupLayer,
   setTrackLayerVisible,
   handleToggleTrackLayer,
   addPolygonLayer,

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

@@ -150,6 +150,32 @@ export interface TrackData {
   show?: boolean // 是否显示
 }
 
+/**
+ * 轨迹点数据接口
+ */
+export interface TrackPoint {
+  /** 经度 */
+  x: number
+  /** 纬度 */
+  y: number
+  /** 角度 */
+  ag?: string
+  /** 时间戳 */
+  tm?: number
+  /** 速度 */
+  sp?: string
+}
+
+/**
+ * 分段轨迹数据项
+ */
+export interface TrackGroupItem {
+  key: string
+  path: TrackPoint[]
+  color?: string
+  show?: boolean
+}
+
 /**
  * 多边形数据接口
  */

package/src/utils/map/track.ts

@@ -0,0 +1,294 @@
+/**
+ * ==========================================
+ * 轨迹抽稀工具
+ * RDP（几何抽稀） + DBSCAN（停留点识别）
+ * 坐标统一使用：
+ *   x -> 经度 (lon)
+ *   y -> 纬度 (lat)
+ * 返回字段仅包含：x、y、ag、tm、sp
+ * ==========================================
+ */
+
+interface Point {
+  x: number
+  y: number
+  ag: any
+  tm: any
+  sp: any
+}
+
+/* ================= DBSCAN ================= */
+
+/**
+ * DBSCAN 聚类算法（基于经纬度球面距离）
+ */
+class DBSCAN {
+  private epsilon: number
+  private minPts: number
+  private data: Point[]
+  private labels: number[]
+  private cellSize: number
+  private grid: Map<string, number[]>
+
+  constructor(epsilon: number, minPts: number, data: Point[]) {
+    this.epsilon = epsilon // km
+    this.minPts = minPts
+    this.data = data
+    this.labels = Array.from({ length: data.length }, () => 0)
+
+    // 空间网格索引（加速邻域查询）
+    this.cellSize = this.epsilon / 110.574
+    this.grid = new Map()
+
+    for (let i = 0; i < data.length; i++) {
+      const { x, y } = data[i]
+      const xIndex = Math.floor(x / this.cellSize)
+      const yIndex = Math.floor(y / this.cellSize)
+      const key = `${xIndex},${yIndex}`
+
+      if (!this.grid.has(key))
+        this.grid.set(key, [])
+      this.grid.get(key)!.push(i)
+    }
+  }
+
+  // 球面距离（Haversine）
+  distance(a, b) {
+    const lat1 = a.y
+    const lon1 = a.x
+    const lat2 = b.y
+    const lon2 = b.x
+
+    const dLat = (lat2 - lat1) * Math.PI / 180
+    const dLon = (lon2 - lon1) * Math.PI / 180
+
+    const s
+      = Math.sin(dLat / 2) ** 2
+        + Math.cos(lat1 * Math.PI / 180)
+        * Math.cos(lat2 * Math.PI / 180)
+        * Math.sin(dLon / 2) ** 2
+
+    return 6371 * 2 * Math.atan2(Math.sqrt(s), Math.sqrt(1 - s))
+  }
+
+  regionQuery(index) {
+    const neighbors = []
+    const { x, y } = this.data[index]
+    const xIndex = Math.floor(x / this.cellSize)
+    const yIndex = Math.floor(y / this.cellSize)
+
+    for (let i = -1; i <= 1; i++) {
+      for (let j = -1; j <= 1; j++) {
+        const key = `${xIndex + i},${yIndex + j}`
+        const cell = this.grid.get(key)
+        if (!cell)
+          continue
+
+        for (const idx of cell) {
+          if (this.distance(this.data[index], this.data[idx]) < this.epsilon) {
+            neighbors.push(idx)
+          }
+        }
+      }
+    }
+    return neighbors
+  }
+
+  dbscan() {
+    let clusterId = 0
+
+    for (let i = 0; i < this.data.length; i++) {
+      if (this.labels[i] !== 0)
+        continue
+
+      const neighbors = this.regionQuery(i)
+      if (neighbors.length < this.minPts) {
+        this.labels[i] = -1
+        continue
+      }
+
+      clusterId++
+      this.expandCluster(i, neighbors, clusterId)
+    }
+
+    return this.labels
+  }
+
+  expandCluster(index, neighbors, clusterId) {
+    this.labels[index] = clusterId
+    let i = 0
+
+    while (i < neighbors.length) {
+      const n = neighbors[i]
+
+      if (this.labels[n] === -1) {
+        this.labels[n] = clusterId
+      }
+      else if (this.labels[n] === 0) {
+        this.labels[n] = clusterId
+        const nn = this.regionQuery(n)
+        if (nn.length >= this.minPts) {
+          neighbors.push(...nn)
+        }
+      }
+      i++
+    }
+  }
+}
+
+/* ================= RDP ================= */
+
+function getDecimalDigits(num) {
+  const str = num.toString()
+  const match = str.match(/\.(\d+)/)
+  return match ? match[1].length : 0
+}
+
+function perpendicularDistance(p, s, e) {
+  const x0 = p.x
+  const y0 = p.y
+  const x1 = s.x
+  const y1 = s.y
+  const x2 = e.x
+  const y2 = e.y
+
+  const num = Math.abs((y2 - y1) * x0 - (x2 - x1) * y0 + x2 * y1 - y2 * x1)
+  const den = Math.sqrt((y2 - y1) ** 2 + (x2 - x1) ** 2)
+
+  return den === 0
+    ? Math.hypot(x0 - x1, y0 - y1)
+    : num / den
+}
+
+function rdp(points, epsilon) {
+  if (points.length < 3)
+    return points
+
+  let maxDist = 0
+  let index = 0
+  const start = points[0]
+  const end = points[points.length - 1]
+
+  for (let i = 1; i < points.length - 1; i++) {
+    const d = perpendicularDistance(points[i], start, end)
+    if (d > maxDist) {
+      maxDist = d
+      index = i
+    }
+  }
+
+  if (maxDist > epsilon) {
+    const left = rdp(points.slice(0, index + 1), epsilon)
+    const right = rdp(points.slice(index), epsilon)
+    return left.slice(0, -1).concat(right)
+  }
+  else {
+    return [start, end]
+  }
+}
+
+/* ================= 主函数 ================= */
+
+/**
+ * 轨迹抽稀主入口
+ * @param {Array} data 原始轨迹
+ * @param {number} rdpEpsilon RDP 精度（度）
+ * @param {number} dbscanEpsilon DBSCAN 半径（km）
+ * @param {number} minPts DBSCAN 最小点数
+ */
+export function trajectoryThinning(
+  data: any[],
+  rdpEpsilon = 0.000001,
+  dbscanEpsilon = 0.01,
+  minPts = 20,
+): Point[] {
+  if (!Array.isArray(data) || data.length === 0)
+    return []
+
+  // 1️⃣ 数据清洗
+  const cleaned: Point[] = data
+    .filter(p =>
+      p.x && p.y
+      && p.ag !== undefined
+      && p.tm !== undefined
+      && p.sp !== undefined
+      && getDecimalDigits(p.x) > 3
+      && getDecimalDigits(p.y) > 3,
+    )
+    .map(p => ({
+      x: +p.x,
+      y: +p.y,
+      ag: p.ag,
+      tm: p.tm,
+      sp: p.sp,
+    }))
+    .sort((a, b) => a.tm - b.tm)
+
+  if (!cleaned.length)
+    return []
+
+  // 2️⃣ 按 tm 去重
+  const dedup: Point[] = []
+  for (let i = 0; i < cleaned.length; i++) {
+    if (!cleaned[i + 1] || cleaned[i].tm !== cleaned[i + 1].tm) {
+      dedup.push(cleaned[i])
+    }
+  }
+
+  // 3️⃣ RDP 抽稀
+  const rdpPoints: Point[] = rdp(dedup, rdpEpsilon)
+  if (!rdpPoints.length)
+    return []
+
+  // 4️⃣ DBSCAN 聚类
+  const labels = runDbscan(dbscanEpsilon, minPts, rdpPoints)
+
+  // 5️⃣ 结果整理
+  return modifyArray(labels, rdpPoints)
+    .filter(Boolean)
+    .map(p => ({
+      x: +p.x.toFixed(6),
+      y: +p.y.toFixed(6),
+      ag: p.ag,
+      tm: p.tm,
+      sp: p.sp,
+    }))
+}
+
+/* ================= 工具函数 ================= */
+
+function runDbscan(epsilon: number, minPts: number, data: Point[]): number[] {
+  if (data.length < minPts) {
+    return Array.from({ length: data.length }, () => -1)
+  }
+  return new DBSCAN(epsilon, minPts, data).dbscan()
+}
+
+function modifyArray(labels: number[], points: Point[]): Point[] {
+  const groups: Record<number, { index: number, tm: number }[]> = {}
+  const result: (Point | 0)[] = Array.from({ length: points.length }, () => 0)
+
+  for (let i = 0; i < labels.length; i++) {
+    const id = labels[i]
+    if (id === -1)
+      continue
+    if (!groups[id])
+      groups[id] = []
+    groups[id].push({ index: i, tm: points[i].tm })
+  }
+
+  for (const group of Object.values(groups)) {
+    group.sort((a, b) => a.tm - b.tm)
+    result[group[0].index] = points[group[0].index]
+    result[group[group.length - 1].index] = points[group[group.length - 1].index]
+  }
+
+  // 噪声点全部保留
+  for (let i = 0; i < labels.length; i++) {
+    if (labels[i] === -1) {
+      result[i] = points[i]
+    }
+  }
+
+  return result.filter(Boolean) as Point[]
+}

package/src/utils/map/trackUtils.ts

@@ -0,0 +1,107 @@
+/**
+ * 获取两个时间之间的时间间隔
+ * @param time1
+ * @param time2
+ * @returns {number}
+ */
+export function getTimeInterval(time1, time2) {
+  if (time1 == null || time2 == null)
+    return 0
+
+  let t1 = Number(time1)
+  let t2 = Number(time2)
+
+  // 秒级 → 转毫秒
+  if (t1 < 1e12)
+    t1 *= 1000
+  if (t2 < 1e12)
+    t2 *= 1000
+
+  return Math.abs(t2 - t1)
+}
+
+/**
+ * 格式化时间为 HH:mm:ss
+ */
+export function formatTime(time) {
+  if (time == null)
+    return ''
+
+  let timestamp = Number(time)
+  if (timestamp < 1e12)
+    timestamp *= 1000
+
+  const date = new Date(timestamp)
+  const hh = String(date.getUTCHours()).padStart(2, '0')
+  const mm = String(date.getUTCMinutes()).padStart(2, '0')
+  const ss = String(date.getUTCSeconds()).padStart(2, '0')
+
+  return `${hh}:${mm}:${ss}`
+}
+/**
+ * 轨迹分组
+ * @param trajectory
+ * @param {object} options
+ * @returns {*}
+ */
+export function trajectoryGrouping(trajectory, options) {
+  if (Array.isArray(trajectory) && trajectory.length === 0) {
+    console.warn('分组失败：无有效轨迹数据')
+    return []
+  }
+  // 排序轨迹
+  const sortedPath = trajectory.sort((a, b) =>
+    new Date(a.tm).getTime() - new Date(b.tm).getTime(),
+  )
+  const result = []
+  let currentGroup = {
+    startTime: null,
+    endTime: null,
+    path: [],
+  }
+
+  for (let i = 0; i < sortedPath.length; i++) {
+    const point = sortedPath[i]
+
+    if (currentGroup.path.length === 0) {
+      // 初始化分组
+      currentGroup.startTime = point.tm
+      currentGroup.endTime = point.tm
+      currentGroup.path.push(point)
+      continue
+    }
+
+    const prevPoint = sortedPath[i - 1]
+    const interval = getTimeInterval(prevPoint.tm, point.tm)
+    const gapMs = options?.gapMs || 1800000
+    if (interval > gapMs) {
+      // 2️⃣ 时间间隔超过阈值，结束当前分组
+      result.push(formatGroup(currentGroup))
+
+      // 新建分组
+      currentGroup = {
+        startTime: point.tm,
+        endTime: point.tm,
+        path: [point],
+      }
+    }
+    else {
+      // 继续当前分组
+      currentGroup.endTime = point.tm
+      currentGroup.path.push(point)
+    }
+  }
+
+  // 3️⃣ 推入最后一组
+  if (currentGroup.path.length > 0) {
+    result.push(formatGroup(currentGroup))
+  }
+
+  return result
+}
+function formatGroup(group) {
+  return {
+    key: `${formatTime(group.startTime)}-${formatTime(group.endTime)}`,
+    path: group.path,
+  }
+}

package/src/views/component/XOlMapView/index.vue

@@ -2,6 +2,7 @@
 import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
 import { showNotify } from 'vant'
 import { onMounted, ref } from 'vue'
+import { getDeviceState } from '~root/src/api/map/trackApi'
 import XOlMap from '../../../components/data/XOlMap/index.vue'
 import { polygonTestData, trackTestData } from './testData'
 import 'vant/lib/index.css'
@@ -273,6 +274,12 @@ function handleAddTrack() {
   })
 }
 
+// 添加轨迹数组测试
+async function handleAddTrackGroup() {
+  const trackGroup = await getDeviceState('419879409793761282', '2026-04-13')
+  mapRef.value.addTrackGroupLayer(trackGroup, { id: 10, name: '轨迹', color: '#fff' })
+}
+
 // 多边形处理函数
 function handlePolygonClick(polygon: any) {
   console.log('>>>> polygon: ', JSON.stringify(polygon))
@@ -364,6 +371,9 @@ function stopNavigation() {
             <van-button type="primary" size="small" @click="handleAddTrack">
               添加测试轨迹
             </van-button>
+            <van-button type="primary" size="small" @click="handleAddTrackGroup">
+              添加测试轨迹数组
+            </van-button>
           </div>
 
           <div class="control-group">