HarmonyOS APP开发：实时路况与动态路径调整

核心要点：本文深入讲解HarmonyOS导航系统中实时路况数据的获取、解析与可视化，以及基于路况变化的动态路径调整（重规划）机制，涵盖WebSocket实时推送、路况着色渲染、智能重规划触发策略等核心模块。

| 开发语言 | ArkTS |
| 核心框架 | ArkUI (StateManagement V2) / 网络管理 / 地图组件 |
| 相关文档 | 网络管理开发指南 / 地图组件 |

一、背景与动机

静态路径规划只考虑了历史平均路况，而实际道路状况瞬息万变——突发事故、施工封路、高峰拥堵都可能导致原路线严重延误。实时路况与动态路径调整是"智能导航"区别于"普通地图"的核心能力。

在HarmonyOS生态中，实时路况系统面临以下独特需求：

1. 低延迟推送：路况变化需在秒级内反映到导航界面
2. 增量更新：全国路网路况数据量大，需只推送变化部分
3. 智能重规划：不是每次路况变化都重规划，需判断是否"值得"重规划
4. 功耗优化：持续的网络连接和数据处理需控制功耗
5. 离线降级：网络不可用时需降级为基于历史数据的预估

二、核心原理

2.1 实时路况数据流

flowchart TB
    subgraph 数据源
        A[交通管理部门<br/>官方数据] --> D[路况数据聚合平台]
        B[众包浮动车<br/>GPS轨迹数据] --> D
        C[路侧传感器<br/>线圈/摄像头] --> D
    end

    subgraph 传输层
        D --> E[WebSocket<br/>实时推送]
        D --> F[HTTP轮询<br/>降级方案]
    end

    subgraph 客户端处理
        E --> G[增量解析器]
        F --> G
        G --> H[路况状态合并]
        H --> I[路段着色渲染]
        H --> J[重规划触发判断]
    end

    subgraph 决策
        J --> K{时间节省 > 阈值?}
        K -->|是| L[触发动态重规划]
        K -->|否| M[保持当前路线]
        L --> N[新路线对比展示]
    end

    classDef sourceStyle fill:#1a1a2e,stroke:#e94560,color:#fff
    classDef transportStyle fill:#16213e,stroke:#0f3460,color:#e0e0e0
    classDef processStyle fill:#0f3460,stroke:#e94560,color:#fff
    classDef decisionStyle fill:#533483,stroke:#e94560,color:#fff

    class A,B,C,D sourceStyle
    class E,F transportStyle
    class G,H,I,J processStyle
    class K,L,M,N decisionStyle

2.2 路况等级定义

TPI（Traffic Performance Index）：行程时间指数，TPI = 实际行程时间 / 自由流行程时间

2.3 智能重规划触发策略

不是每次路况变化都需要重规划。频繁重规划不仅浪费算力，还会让用户频繁切换路线产生困惑。智能重规划需满足以下条件：

flowchart TD
    A[路况数据更新] --> B{当前路线是否受影响?}
    B -->|否| C[忽略, 继续导航]
    B -->|是| D[计算当前路线新耗时]
    D --> E[计算备选路线耗时]
    E --> F{时间节省 > MIN_SAVE?}
    F -->|否| G[不重规划<br/>但更新ETA]
    F -->|是| H{距上次重规划 > COOLDOWN?}
    H -->|否| G
    H -->|是| I{新路线距离偏差 < MAX_DETOUR?}
    I -->|否| G
    I -->|是| J[触发重规划]

    classDef processStyle fill:#16213e,stroke:#0f3460,color:#e0e0e0
    classDef decisionStyle fill:#0f3460,stroke:#e94560,color:#fff
    classDef actionStyle fill:#533483,stroke:#e94560,color:#fff
    classDef ignoreStyle fill:#1a1a2e,stroke:#0f3460,color:#e0e0e0

    class A,D,E processStyle
    class B,F,H,I decisionStyle
    class J actionStyle
    class C,G ignoreStyle

关键参数：

三、代码实战

3.1 路况数据模型

// TrafficDataModels.ets - 路况数据模型

/** 路况等级 */
export enum TrafficLevel {
  SMOOTH = 'smooth',           // 畅通
  SLOW = 'slow',               // 缓行
  CONGESTED = 'congested',     // 拥堵
  SEVERE = 'severe'            // 严重拥堵
}

/** 路段路况信息 */
export interface RoadTrafficInfo {
  roadId: string;              // 路段唯一标识
  trafficLevel: TrafficLevel;  // 路况等级
  speed: number;               // 当前平均速度（km/h）
  freeFlowSpeed: number;       // 自由流速度（km/h）
  tpi: number;                 // 行程时间指数
  delay: number;               // 延迟时间（秒）
  congestionLength: number;    // 拥堵长度（米）
  timestamp: number;           // 数据时间戳
  source: TrafficDataSource;   // 数据来源
}

/** 数据来源 */
export enum TrafficDataSource {
  OFFICIAL = 'official',       // 官方数据
  CROWDSOURCED = 'crowdsourced', // 众包数据
  SENSOR = 'sensor',           // 传感器数据
  HISTORICAL = 'historical'    // 历史预估
}

/** 路况增量更新包 */
export interface TrafficIncrementalUpdate {
  version: number;             // 数据版本号
  updates: RoadTrafficInfo[];  // 变化的路段
  removed: string[];           // 过期的路段ID
  timestamp: number;           // 更新时间戳
}

/** 路况等级工具函数 */
export class TrafficLevelUtils {
  /** 根据TPI计算路况等级 */
  static fromTPI(tpi: number): TrafficLevel {
    if (tpi <= 1.0) return TrafficLevel.SMOOTH;
    if (tpi <= 1.5) return TrafficLevel.SLOW;
    if (tpi <= 2.5) return TrafficLevel.CONGESTED;
    return TrafficLevel.SEVERE;
  }

  /** 路况等级对应颜色 */
  static getColor(level: TrafficLevel): string {
    const colorMap: Record<TrafficLevel, string> = {
      [TrafficLevel.SMOOTH]: '#2d6a4f',      // 绿色
      [TrafficLevel.SLOW]: '#e9c46a',        // 黄色
      [TrafficLevel.CONGESTED]: '#f4a261',   // 橙色
      [TrafficLevel.SEVERE]: '#e76f51'       // 红色
    };
    return colorMap[level];
  }

  /** 路况等级对应线宽 */
  static getLineWidth(level: TrafficLevel): number {
    const widthMap: Record<TrafficLevel, number> = {
      [TrafficLevel.SMOOTH]: 6,
      [TrafficLevel.SLOW]: 8,
      [TrafficLevel.CONGESTED]: 10,
      [TrafficLevel.SEVERE]: 12
    };
    return widthMap[level];
  }

  /** 路况等级中文描述 */
  static getLabel(level: TrafficLevel): string {
    const labelMap: Record<TrafficLevel, string> = {
      [TrafficLevel.SMOOTH]: '畅通',
      [TrafficLevel.SLOW]: '缓行',
      [TrafficLevel.CONGESTED]: '拥堵',
      [TrafficLevel.SEVERE]: '严重拥堵'
    };
    return labelMap[level];
  }
}

3.2 WebSocket实时路况推送

// TrafficWebSocketService.ets - WebSocket实时路况服务

import { webSocket } from '@kit.NetworkKit';
import {
  RoadTrafficInfo, TrafficIncrementalUpdate,
  TrafficLevel, TrafficLevelUtils, TrafficDataSource
} from './TrafficDataModels';

/** WebSocket连接状态 */
export enum WSState {
  DISCONNECTED = 'disconnected',
  CONNECTING = 'connecting',
  CONNECTED = 'connected',
  RECONNECTING = 'reconnecting'
}

/** 路况更新回调 */
interface TrafficUpdateCallbacks {
  onTrafficUpdate?: (updates: RoadTrafficInfo[]) => void;
  onConnectionChange?: (state: WSState) => void;
  onError?: (error: Error) => void;
}

@ObservedV2
export class TrafficWebSocketService {
  @Trace wsState: WSState = WSState.DISCONNECTED;
  @Trace lastUpdateTime: number = 0;
  @Trace receivedUpdateCount: number = 0;

  private ws: webSocket.WebSocket | null = null;
  private callbacks: TrafficUpdateCallbacks = {};
  private reconnectTimer: number = -1;
  private heartbeatTimer: number = -1;
  private currentVersion: number = 0;

  // 重连配置
  private readonly RECONNECT_DELAYS = [1000, 2000, 5000, 10000, 30000];
  private reconnectAttempt: number = 0;

  // 心跳配置
  private readonly HEARTBEAT_INTERVAL = 30000; // 30秒

  /** 设置回调 */
  setCallbacks(callbacks: TrafficUpdateCallbacks): void {
    this.callbacks = callbacks;
  }

  /** 连接WebSocket */
  async connect(url: string): Promise<void> {
    if (this.wsState === WSState.CONNECTED || this.wsState === WSState.CONNECTING) {
      return;
    }

    this.setWSState(WSState.CONNECTING);

    try {
      this.ws = webSocket.createWebSocket();

      // 注册事件回调
      this.ws.on('open', () => {
        console.info('[TrafficWS] 连接成功');
        this.setWSState(WSState.CONNECTED);
        this.reconnectAttempt = 0;
        this.startHeartbeat();
      });

      this.ws.on('message', (err, value) => {
        this.handleMessage(value);
      });

      this.ws.on('close', () => {
        console.warn('[TrafficWS] 连接关闭');
        this.stopHeartbeat();
        this.setWSState(WSState.DISCONNECTED);
        this.scheduleReconnect(url);
      });

      this.ws.on('error', (err) => {
        console.error(`[TrafficWS] 连接错误: ${JSON.stringify(err)}`);
        this.callbacks.onError?.(new Error('WebSocket连接错误'));
      });

      await this.ws.connect(url);
    } catch (error) {
      console.error(`[TrafficWS] 连接失败: ${JSON.stringify(error)}`);
      this.setWSState(WSState.DISCONNECTED);
      this.scheduleReconnect(url);
    }
  }

  /** 断开连接 */
  disconnect(): void {
    this.stopHeartbeat();
    this.clearReconnectTimer();

    if (this.ws) {
      try {
        this.ws.close();
      } catch (e) {
        // 忽略关闭错误
      }
      this.ws = null;
    }
    this.setWSState(WSState.DISCONNECTED);
  }

  /** 订阅特定区域路况 */
  subscribeArea(bounds: {
    southWest: { latitude: number; longitude: number };
    northEast: { latitude: number; longitude: number };
  }): void {
    if (this.wsState !== WSState.CONNECTED || !this.ws) return;

    const subscribeMsg = JSON.stringify({
      type: 'subscribe',
      bounds,
      version: this.currentVersion
    });

    try {
      this.ws.send(subscribeMsg);
    } catch (error) {
      console.error(`[TrafficWS] 发送订阅失败: ${JSON.stringify(error)}`);
    }
  }

  /** 处理收到的消息 */
  private handleMessage(value: string | ArrayBuffer): void {
    try {
      const data = typeof value === 'string' ? value : String.fromCharCode(...new Uint8Array(value));
      const parsed = JSON.parse(data) as TrafficIncrementalUpdate;

      if (parsed.version <= this.currentVersion) {
        return; // 忽略过期数据
      }

      this.currentVersion = parsed.version;
      this.lastUpdateTime = parsed.timestamp;
      this.receivedUpdateCount++;

      // 回调通知
      this.callbacks.onTrafficUpdate?.(parsed.updates);
    } catch (error) {
      console.error(`[TrafficWS] 消息解析失败: ${JSON.stringify(error)}`);
    }
  }

  /** 启动心跳 */
  private startHeartbeat(): void {
    this.stopHeartbeat();
    this.heartbeatTimer = setInterval(() => {
      if (this.ws && this.wsState === WSState.CONNECTED) {
        try {
          this.ws.send(JSON.stringify({ type: 'ping', timestamp: Date.now() }));
        } catch (e) {
          console.warn('[TrafficWS] 心跳发送失败');
        }
      }
    }, this.HEARTBEAT_INTERVAL) as unknown as number;
  }

  /** 停止心跳 */
  private stopHeartbeat(): void {
    if (this.heartbeatTimer !== -1) {
      clearInterval(this.heartbeatTimer);
      this.heartbeatTimer = -1;
    }
  }

  /** 调度重连 */
  private scheduleReconnect(url: string): void {
    this.clearReconnectTimer();
    const delay = this.RECONNECT_DELAYS[
      Math.min(this.reconnectAttempt, this.RECONNECT_DELAYS.length - 1)
    ];

    console.info(`[TrafficWS] ${delay}ms后尝试第${this.reconnectAttempt + 1}次重连`);
    this.setWSState(WSState.RECONNECTING);

    this.reconnectTimer = setTimeout(() => {
      this.reconnectAttempt++;
      this.connect(url);
    }, delay) as unknown as number;
  }

  /** 清除重连定时器 */
  private clearReconnectTimer(): void {
    if (this.reconnectTimer !== -1) {
      clearTimeout(this.reconnectTimer);
      this.reconnectTimer = -1;
    }
  }

  /** 更新WebSocket状态 */
  private setWSState(state: WSState): void {
    this.wsState = state;
    this.callbacks.onConnectionChange?.(state);
  }
}

3.3 智能重规划决策引擎

// SmartRerouteEngine.ets - 智能重规划决策引擎

import {
  RoadTrafficInfo, TrafficLevel, TrafficIncrementalUpdate
} from './TrafficDataModels';
import { PlanResult, AStarPlanner } from './AStarPlanner';
import { PathPlanningGraph, RouteStrategy } from './PathPlanningGraph';

/** 重规划配置 */
interface RerouteConfig {
  minTimeSave: number;          // 最小节省时间（秒），默认300秒（5分钟）
  cooldownPeriod: number;       // 冷却时间（秒），默认180秒（3分钟）
  maxDetourRatio: number;       // 最大绕行比例，默认1.5
  minRemainingTime: number;     // 最小剩余行程（秒），默认600秒（10分钟）
  checkInterval: number;        // 检查间隔（秒），默认30秒
}

/** 重规划结果 */
interface RerouteResult {
  originalRoute: PlanResult;
  newRoute: PlanResult;
  timeSaved: number;            // 节省时间（秒）
  distanceDiff: number;         // 距离差异（米）
  reason: string;               // 重规划原因描述
}

/** 重规划事件回调 */
interface RerouteCallbacks {
  onRerouteSuggested?: (result: RerouteResult) => void;
  onRerouteApplied?: (newRoute: PlanResult) => void;
  onETAUpdated?: (newETA: number) => void;
}

@ObservedV2
export class SmartRerouteEngine {
  @Trace isChecking: boolean = false;
  @Trace lastRerouteTime: number = 0;
  @Trace currentETA: number = 0;
  @Trace rerouteCount: number = 0;

  private graph: PathPlanningGraph;
  private currentRoute: PlanResult | null = null;
  private trafficCache: Map<string, RoadTrafficInfo> = new Map();
  private config: RerouteConfig;
  private callbacks: RerouteCallbacks = {};
  private checkTimer: number = -1;

  // 路段ID到边的映射
  private roadToEdgeMap: Map<string, number[]> = new Map();

  static readonly DEFAULT_CONFIG: RerouteConfig = {
    minTimeSave: 300,
    cooldownPeriod: 180,
    maxDetourRatio: 1.5,
    minRemainingTime: 600,
    checkInterval: 30
  };

  constructor(graph: PathPlanningGraph, config?: Partial<RerouteConfig>) {
    this.graph = graph;
    this.config = { ...SmartRerouteEngine.DEFAULT_CONFIG, ...config };
  }

  /** 设置回调 */
  setCallbacks(callbacks: RerouteCallbacks): void {
    this.callbacks = callbacks;
  }

  /** 设置当前路线 */
  setCurrentRoute(route: PlanResult): void {
    this.currentRoute = route;
    this.currentETA = route.totalDuration;
  }

  /** 更新路况数据 */
  updateTraffic(updates: RoadTrafficInfo[]): void {
    for (const info of updates) {
      this.trafficCache.set(info.roadId, info);

      // 同步更新图中对应边的trafficDelay
      const edgeIndices = this.roadToEdgeMap.get(info.roadId) ?? [];
      for (const idx of edgeIndices) {
        if (this.currentRoute && idx < this.currentRoute.edges.length) {
          this.currentRoute.edges[idx].trafficDelay = info.delay;
        }
      }
    }

    // 重新计算当前路线ETA
    this.recalculateCurrentETA();
  }

  /** 注册路段-边映射 */
  registerRoadEdgeMapping(roadId: string, edgeIndices: number[]): void {
    this.roadToEdgeMap.set(roadId, edgeIndices);
  }

  /** 启动定期检查 */
  startPeriodicCheck(): void {
    this.stopPeriodicCheck();
    this.checkTimer = setInterval(() => {
      this.evaluateReroute();
    }, this.config.checkInterval * 1000) as unknown as number;
  }

  /** 停止定期检查 */
  stopPeriodicCheck(): void {
    if (this.checkTimer !== -1) {
      clearInterval(this.checkTimer);
      this.checkTimer = -1;
    }
  }

  /** 重新计算当前路线ETA */
  private recalculateCurrentETA(): void {
    if (!this.currentRoute) return;

    let totalDuration = 0;
    for (const edge of this.currentRoute.edges) {
      const travelTime = (edge.length / (edge.speed * 1000 / 3600)) + edge.trafficDelay;
      totalDuration += travelTime;
    }

    const oldETA = this.currentETA;
    this.currentETA = totalDuration;

    if (Math.abs(oldETA - this.currentETA) > 30) {
      this.callbacks.onETAUpdated?.(this.currentETA);
    }
  }

  /** 评估是否需要重规划 */
  private async evaluateReroute(): Promise<void> {
    if (!this.currentRoute || this.isChecking) return;

    // 冷却期检查
    const timeSinceLastReroute = (Date.now() - this.lastRerouteTime) / 1000;
    if (timeSinceLastReroute < this.config.cooldownPeriod) return;

    // 剩余行程检查
    if (this.currentETA < this.config.minRemainingTime) return;

    this.isChecking = true;

    try {
      // 1. 检查当前路线是否有严重拥堵路段
      const congestedSegments = this.findCongestedSegments();
      if (congestedSegments.length === 0) {
        this.isChecking = false;
        return;
      }

      // 2. 尝试重规划
      const originId = this.currentRoute.path[0];
      const destId = this.currentRoute.path[this.currentRoute.path.length - 1];
      const planner = new AStarPlanner(this.graph, RouteStrategy.FASTEST);
      const newRoute = planner.plan(originId, destId);

      if (!newRoute) {
        this.isChecking = false;
        return;
      }

      // 3. 计算节省时间
      const timeSaved = this.currentETA - newRoute.totalDuration;

      // 4. 判断是否值得重规划
      if (timeSaved < this.config.minTimeSave) {
        this.isChecking = false;
        return;
      }

      // 5. 判断绕行是否过大
      const detourRatio = newRoute.totalDistance / this.currentRoute.totalDistance;
      if (detourRatio > this.config.maxDetourRatio) {
        this.isChecking = false;
        return;
      }

      // 6. 生成重规划建议
      const rerouteResult: RerouteResult = {
        originalRoute: this.currentRoute,
        newRoute,
        timeSaved,
        distanceDiff: newRoute.totalDistance - this.currentRoute.totalDistance,
        reason: this.buildRerouteReason(congestedSegments, timeSaved)
      };

      this.callbacks.onRerouteSuggested?.(rerouteResult);

    } finally {
      this.isChecking = false;
    }
  }

  /** 查找当前路线上的拥堵路段 */
  private findCongestedSegments(): Array<{ roadId: string; info: RoadTrafficInfo }> {
    const congested: Array<{ roadId: string; info: RoadTrafficInfo }> = [];

    for (const [roadId, info] of this.trafficCache) {
      if (info.trafficLevel === TrafficLevel.CONGESTED ||
          info.trafficLevel === TrafficLevel.SEVERE) {
        // 检查该路段是否在当前路线上
        const edgeIndices = this.roadToEdgeMap.get(roadId) ?? [];
        if (edgeIndices.length > 0) {
          congested.push({ roadId, info });
        }
      }
    }

    return congested;
  }

  /** 构建重规划原因描述 */
  private buildRerouteReason(
    congestedSegments: Array<{ roadId: string; info: RoadTrafficInfo }>,
    timeSaved: number
  ): string {
    const severeCount = congestedSegments.filter(
      s => s.info.trafficLevel === TrafficLevel.SEVERE
    ).length;

    if (severeCount > 0) {
      return `前方${severeCount}处严重拥堵，切换路线可节省约${Math.round(timeSaved / 60)}分钟`;
    }

    const congestedCount = congestedSegments.length;
    return `前方${congestedCount}处拥堵，切换路线可节省约${Math.round(timeSaved / 60)}分钟`;
  }

  /** 应用重规划 */
  applyReroute(newRoute: PlanResult): void {
    this.currentRoute = newRoute;
    this.currentETA = newRoute.totalDuration;
    this.lastRerouteTime = Date.now();
    this.rerouteCount++;
    this.callbacks.onRerouteApplied?.(newRoute);
  }
}

3.4 路况可视化与重规划提示UI

// TrafficRerouteView.ets - 路况可视化与重规划提示UI

import { TrafficLevel, TrafficLevelUtils } from './TrafficDataModels';
import { SmartRerouteEngine, RerouteResult } from './SmartRerouteEngine';

/** 路况图例组件 */
@Builder
function TrafficLegend() {
  Row() {
    ForEach([
      { level: TrafficLevel.SMOOTH, label: '畅通' },
      { level: TrafficLevel.SLOW, label: '缓行' },
      { level: TrafficLevel.CONGESTED, label: '拥堵' },
      { level: TrafficLevel.SEVERE, label: '严重拥堵' }
    ], (item: { level: TrafficLevel; label: string }) => {
      Row() {
        Circle()
          .width(8)
          .height(8)
          .fill(TrafficLevelUtils.getColor(item.level))
        Text(item.label)
          .fontSize(11)
          .fontColor('rgba(255,255,255,0.6)')
          .margin({ left: 4 })
      }
      .margin({ right: 12 })
    })
  }
  .padding({ left: 16, right: 16, top: 8, bottom: 8 })
  .borderRadius(8)
  .backgroundColor('rgba(26,26,46,0.85)')
}

/** 重规划建议弹窗 */
@Builder
function RerouteSuggestionDialog(
  result: RerouteResult,
  onAccept: () => void,
  onReject: () => void
) {
  Column() {
    // 标题
    Row() {
      Text('⚡ 发现更快路线')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .fontColor('#ffffff')
    }
    .width('100%')
    .margin({ bottom: 16 })

    // 原因
    Text(result.reason)
      .fontSize(14)
      .fontColor('rgba(255,255,255,0.8)')
      .width('100%')
      .margin({ bottom: 16 })

    // 路线对比
    Row() {
      // 当前路线
      Column() {
        Text('当前路线')
          .fontSize(12)
          .fontColor('rgba(255,255,255,0.5)')
        Text(`${Math.round(result.originalRoute.totalDuration / 60)}分钟`)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor('#e76f51')
        Text(`${(result.originalRoute.totalDistance / 1000).toFixed(1)}公里`)
          .fontSize(12)
          .fontColor('rgba(255,255,255,0.5)')
          .margin({ top: 2 })
      }
      .layoutWeight(1)
      .padding(12)
      .borderRadius(8)
      .backgroundColor('rgba(231,111,81,0.1)')
      .border({ width: 1, color: 'rgba(231,111,81,0.3)', style: BorderStyle.Solid, radius: 8 })

      // VS
      Text('VS')
        .fontSize(14)
        .fontWeight(FontWeight.Bold)
        .fontColor('rgba(255,255,255,0.3)')
        .margin({ left: 8, right: 8 })

      // 推荐路线
      Column() {
        Text('推荐路线')
          .fontSize(12)
          .fontColor('#2d6a4f')
        Text(`${Math.round(result.newRoute.totalDuration / 60)}分钟`)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor('#2d6a4f')
        Text(`${(result.newRoute.totalDistance / 1000).toFixed(1)}公里`)
          .fontSize(12)
          .fontColor('rgba(255,255,255,0.5)')
          .margin({ top: 2 })
      }
      .layoutWeight(1)
      .padding(12)
      .borderRadius(8)
      .backgroundColor('rgba(45,106,79,0.1)')
      .border({ width: 1, color: 'rgba(45,106,79,0.3)', style: BorderStyle.Solid, radius: 8 })
    }
    .width('100%')
    .margin({ bottom: 16 })

    // 节省时间提示
    Text(`可节省约${Math.round(result.timeSaved / 60)}分钟`)
      .fontSize(14)
      .fontColor('#2d6a4f')
      .fontWeight(FontWeight.Bold)
      .margin({ bottom: 16 })

    // 操作按钮
    Row() {
      Button('继续原路线')
        .backgroundColor('rgba(255,255,255,0.1)')
        .fontColor('rgba(255,255,255,0.7)')
        .borderRadius(20)
        .layoutWeight(1)
        .onClick(() => onReject())

      Button('切换路线')
        .backgroundColor('#2d6a4f')
        .fontColor('#ffffff')
        .borderRadius(20)
        .layoutWeight(1)
        .margin({ left: 8 })
        .onClick(() => onAccept())
    }
    .width('100%')
  }
  .padding(20)
  .borderRadius(16)
  .backgroundColor('rgba(26,26,46,0.95)')
  .shadow({ radius: 20, color: 'rgba(0,0,0,0.5)', offsetY: 8 })
}

@Entry
@Component
struct TrafficReroutePage {
  @Local rerouteEngine: SmartRerouteEngine = new SmartRerouteEngine(new PathPlanningGraph());
  @Local showRerouteDialog: boolean = false;
  @Local rerouteResult: RerouteResult | null = null;

  aboutToAppear(): void {
    this.rerouteEngine.setCallbacks({
      onRerouteSuggested: (result: RerouteResult) => {
        this.rerouteResult = result;
        this.showRerouteDialog = true;
      },
      onETAUpdated: (newETA: number) => {
        console.info(`[TrafficReroute] ETA更新: ${Math.round(newETA / 60)}分钟`);
      }
    });
  }

  build() {
    Stack() {
      // 地图底层
      // MapComponent(...)

      Column() {
        // 路况图例
        TrafficLegend()

        Blank()

        // 重规划建议弹窗
        if (this.showRerouteDialog && this.rerouteResult) {
          RerouteSuggestionDialog(
            this.rerouteResult,
            () => {
              // 接受重规划
              this.rerouteEngine.applyReroute(this.rerouteResult!.newRoute);
              this.showRerouteDialog = false;
            },
            () => {
              // 拒绝重规划
              this.showRerouteDialog = false;
            }
          )
        }
      }
      .width('100%')
      .height('100%')
      .padding({ top: 48, left: 16, right: 16, bottom: 48 })
      .justifyContent(FlexAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#0a0a1a')
  }
}

四、踩坑与注意事项

4.1 WebSocket断线重连策略

4.2 路况数据时效性

路况数据有时效性，过期数据比没有数据更危险：

// 路况数据过期检查
private readonly TRAFFIC_DATA_TTL = 5 * 60 * 1000; // 5分钟

private isTrafficDataExpired(info: RoadTrafficInfo): boolean {
  return Date.now() - info.timestamp > this.TRAFFIC_DATA_TTL;
}

// 定期清理过期数据
private cleanupExpiredData(): void {
  for (const [roadId, info] of this.trafficCache) {
    if (this.isTrafficDataExpired(info)) {
      this.trafficCache.delete(roadId);
    }
  }
}

4.3 路况着色渲染性能

在地图上渲染大量路况折线时需注意性能：

• 分层渲染：只渲染当前视野范围内的路况
• 简化折线：远距离缩放时简化折线点数（Douglas-Peucker算法）
• 颜色批处理：相同颜色的路段合并为一个Polyline，减少绘制调用
• 缓存策略：路况未变化的路段不重新绘制

4.4 重规划的用户体验

频繁弹出重规划建议会让用户厌烦，需注意：

1. 冷却期：两次重规划建议至少间隔3分钟
2. 用户偏好：记住用户的选择偏好（如总是拒绝某类建议则不再推送）
3. 渐进提示：小幅度时间节省用轻量提示，大幅度用弹窗
4. 静默重规划：当节省时间非常显著（>15分钟）时，可自动切换并通知

五、HarmonyOS 6适配

5.1 感知能力增强

HarmonyOS 6增强了情境感知能力，可结合日历、时间、习惯等信息预判路况需求：

// ContextAwareTrafficService.ets - 情境感知路况服务
import { calendarManager } from '@kit.CalendarKit';

export class ContextAwareTrafficService {
  /** 根据日历事件预加载路况 */
  async preloadTrafficForCalendarEvent(): Promise<void> {
    // 1. 读取日历中的下一个有地点的事件
    const upcomingEvent = await this.getNextEventWithLocation();
    if (!upcomingEvent) return;

    // 2. 计算出发时间（提前量）
    const departureTime = new Date(upcomingEvent.startTime - 30 * 60 * 1000); // 提前30分钟

    // 3. 预加载目的地周边路况
    const targetArea = {
      center: upcomingEvent.location,
      radius: 5000 // 5公里范围
    };

    // 4. 如果路况不佳，提前推送提醒
    const trafficCondition = await this.evaluateTraffic(targetArea, departureTime);
    if (trafficCondition.worstLevel === TrafficLevel.SEVERE) {
      this.sendEarlyWarning(upcomingEvent, trafficCondition);
    }
  }

  private async getNextEventWithLocation(): Promise<CalendarEvent | null> {
    // 实现省略
    return null;
  }

  private async evaluateTraffic(area: object, time: Date): Promise<object> {
    // 实现省略
    return { worstLevel: TrafficLevel.SMOOTH };
  }

  private sendEarlyWarning(event: object, traffic: object): void {
    // 发送通知提醒
  }
}

5.2 分布式路况共享

HarmonyOS 6的分布式能力允许多设备共享路况数据：

// DistributedTrafficShare.ets - 分布式路况共享
import { distributedKVStore } from '@kit.ArkData';

export class DistributedTrafficShare {
  private kvStore: distributedKVStore.SingleKVStore | null = null;

  /** 上报本地观察到的路况 */
  async reportLocalTraffic(info: RoadTrafficInfo): Promise<void> {
    if (!this.kvStore) return;
    const key = `traffic_${info.roadId}`;
    await this.kvStore.put(key, JSON.stringify(info));
  }

  /** 监听其他设备上报的路况 */
  onRemoteTrafficUpdate(callback: (info: RoadTrafficInfo) => void): void {
    if (!this.kvStore) return;
    this.kvStore.on('dataChange', distributedKVStore.SubscribeType.SUBSCRIBE_TYPE_REMOTE,
      (data) => {
        for (const entry of data.updateEntries) {
          if (entry.key.startsWith('traffic_')) {
            const info = JSON.parse(entry.value.value as string) as RoadTrafficInfo;
            callback(info);
          }
        }
      });
  }
}

六、总结

本文系统讲解了HarmonyOS导航系统中实时路况与动态路径调整的完整方案：

实时路况是导航系统从"可用"到"好用"的关键跨越。在实际开发中，需要在数据时效性、推送频率、重规划阈值之间找到平衡点——太敏感会让用户频繁切换路线，太迟钝则错过最佳绕行时机。HarmonyOS 6的情境感知和分布式能力，为路况系统提供了更智能的数据获取和共享渠道，使导航体验从被动响应走向主动预判。