HarmonyOS运动开发：如何绘制运动速度轨迹

前言

在户外运动应用中，绘制运动速度轨迹不仅可以直观地展示用户的运动路线，还能通过颜色变化反映速度的变化，帮助用户更好地了解自己的运动状态。然而，如何在鸿蒙系统中实现这一功能呢？本文将结合实际开发经验，深入解析从数据处理到地图绘制的全过程，带你一步步掌握如何绘制运动速度轨迹。

一、核心工具：轨迹颜色与优化

绘制运动速度轨迹的关键在于两个工具类：PathGradientTool和PathSmoothTool。这两个工具类分别用于处理轨迹的颜色和优化轨迹的平滑度。

1.轨迹颜色工具类：PathGradientTool

PathGradientTool的作用是根据运动速度为轨迹点分配颜色。速度越快，颜色越接近青色；速度越慢，颜色越接近红色。以下是PathGradientTool的核心逻辑：

export class PathGradientTool {   /**    * 获取路径染色数组    * @param points 路径点数据    * @param colorInterval 取色间隔，单位m，范围20-2000，多长距离设置一次颜色    * @returns 路径染色数组    */   static getPathColors(points: RunPoint[], colorInterval: number): string[] | null {     if (!points || points.length < 2) {       return null;     }      let interval = Math.max(20, Math.min(2000, colorInterval));     const pointsSize = points.length;     const speedList: number[] = [];     const colorList: string[] = [];     let index = 0;     let lastDistance = 0;     let lastTime = 0;     let maxSpeed = 0;     let minSpeed = 0;      // 第一遍遍历：收集速度数据     points.forEach(point => {       index++;       if (point.totalDistance - lastDistance > interval) {         let currentSpeed = 0;         if (point.netDuration - lastTime > 0) {           currentSpeed = (point.netDistance - lastDistance) / (point.netDuration - lastTime);         }         maxSpeed = Math.max(maxSpeed, currentSpeed);         minSpeed = minSpeed === 0 ? currentSpeed : Math.min(minSpeed, currentSpeed);         lastDistance = point.netDistance;         lastTime = point.netDuration;          // 为每个间隔内的点添加相同的速度         for (let i = 0; i < index; i++) {           speedList.push(currentSpeed);         }         // 添加屏障         speedList.push(Number.MAX_VALUE);         index = 0;       }     });      // 处理剩余点     if (index > 0) {       const lastPoint = points[points.length - 1];       let currentSpeed = 0;       if (lastPoint.netDuration - lastTime > 0) {         currentSpeed = (lastPoint.netDistance - lastDistance) / (lastPoint.netDuration - lastTime);       }       for (let i = 0; i < index; i++) {         speedList.push(currentSpeed);       }     }      // 确保速度列表长度与点数一致     if (speedList.length !== points.length) {       // 调整速度列表长度       if (speedList.length > points.length) {         speedList.length = points.length;       } else {         const lastSpeed = speedList.length > 0 ? speedList[speedList.length - 1] : 0;         while (speedList.length < points.length) {           speedList.push(lastSpeed);         }       }     }      // 生成颜色列表     let lastColor = '';     let hasBarrier = false;     for (let i = 0; i < speedList.length; i++) {       const speed = speedList[i];       if (speed === Number.MAX_VALUE) {         hasBarrier = true;         continue;       }        const color = PathGradientTool.getAgrSpeedColorHashMap(speed, maxSpeed, minSpeed);       if (hasBarrier) {         hasBarrier = false;         if (color.toUpperCase() === lastColor.toUpperCase()) {           colorList.push(PathGradientTool.getBarrierColor(color));           continue;         }       }       colorList.push(color);       lastColor = color;     }      // 确保颜色列表长度与点数一致     if (colorList.length !== points.length) {       if (colorList.length > points.length) {         colorList.length = points.length;       } else {         const lastColor = colorList.length > 0 ? colorList[colorList.length - 1] : '#FF3032';         while (colorList.length < points.length) {           colorList.push(lastColor);         }       }     }      return colorList;   }    /**    * 根据速度定义不同的颜色区间来绘制轨迹    * @param speed 速度    * @param maxSpeed 最大速度    * @param minSpeed 最小速度    * @returns 颜色值    */   private static getAgrSpeedColorHashMap(speed: number, maxSpeed: number, minSpeed: number): string {     const range = maxSpeed - minSpeed;     if (speed <= minSpeed + range * 0.2) { // 0-20%区间配速       return '#FF3032';     } else if (speed <= minSpeed + range * 0.4) { // 20%-40%区间配速       return '#FA7B22';     } else if (speed <= minSpeed + range * 0.6) { // 40%-60%区间配速       return '#F5BE14';     } else if (speed <= minSpeed + range * 0.8) { // 60%-80%区间配速       return '#7AC36C';     } else { // 80%-100%区间配速       return '#00C8C3';     }   } } 

2.轨迹优化工具类：PathSmoothTool

PathSmoothTool的作用是优化轨迹的平滑度，减少轨迹点的噪声和冗余。以下是PathSmoothTool的核心逻辑：

export class PathSmoothTool {   private mIntensity: number = 3;   private mThreshhold: number = 0.01;   private mNoiseThreshhold: number = 10;    /**    * 轨迹平滑优化    * @param originlist 原始轨迹list,list.size大于2    * @returns 优化后轨迹list    */   pathOptimize(originlist: RunLatLng[]): RunLatLng[] {     const list = this.removeNoisePoint(originlist); // 去噪     const afterList = this.kalmanFilterPath(list, this.mIntensity); // 滤波     const pathoptimizeList = this.reducerVerticalThreshold(afterList, this.mThreshhold); // 抽稀     return pathoptimizeList;   }    /**    * 轨迹线路滤波    * @param originlist 原始轨迹list,list.size大于2    * @returns 滤波处理后的轨迹list    */   kalmanFilterPath(originlist: RunLatLng[], intensity: number = this.mIntensity): RunLatLng[] {     const kalmanFilterList: RunLatLng[] = [];     if (!originlist || originlist.length <= 2) return kalmanFilterList;      this.initial(); // 初始化滤波参数     let lastLoc = originlist[0];     kalmanFilterList.push(lastLoc);      for (let i = 1; i < originlist.length; i++) {       const curLoc = originlist[i];       const latLng = this.kalmanFilterPoint(lastLoc, curLoc, intensity);       if (latLng) {         kalmanFilterList.push(latLng);         lastLoc = latLng;       }     }     return kalmanFilterList;   }    /**    * 单点滤波    * @param lastLoc 上次定位点坐标    * @param curLoc 本次定位点坐标    * @returns 滤波后本次定位点坐标值    */   kalmanFilterPoint(lastLoc: RunLatLng, curLoc: RunLatLng, intensity: number = this.mIntensity): RunLatLng | null {     if (this.pdelt_x === 0 || this.pdelt_y === 0) {       this.initial();     }      if (!lastLoc || !curLoc) return null;      intensity = Math.max(1, Math.min(5, intensity));     let filteredLoc = curLoc;      for (let j = 0; j < intensity; j++) {       filteredLoc = this.kalmanFilter(lastLoc.longitude, filteredLoc.longitude, lastLoc.latitude, filteredLoc.latitude);     }      return filteredLoc;   }    轨迹抽稀  • @param inPoints 待抽稀的轨迹list  • @param threshHold 阈值  • @returns 抽稀后的轨迹list / private reducerVerticalThreshold(inPoints:RunLatLng[],threshHold:number):RunLatLng[]{ if(!inPoints||inPoints.length<=2)return inPoints||[];       const ret: RunLatLng[] = [];     for (let i = 0; i < inPoints.length; i++) {       const pre = this.getLastLocation(ret);       const cur = inPoints[i];        if (!pre || i === inPoints.length - 1) {         ret.push(cur);         continue;       }        const next = inPoints[i + 1];       const distance = this.calculateDistanceFromPoint(cur, pre, next);       if (distance > threshHold) {         ret.push(cur);       }     }     return ret;  }  /  • 轨迹去噪  • @param inPoints 原始轨迹list  • @returns 去噪后的轨迹list / removeNoisePoint(inPoints:RunLatLng[]):RunLatLng[]{ if(!inPoints||inPoints.length<=2)return inPoints||[];       const ret: RunLatLng[] = [];     for (let i = 0; i < inPoints.length; i++) {       const pre = this.getLastLocation(ret);       const cur = inPoints[i];        if (!pre || i === inPoints.length - 1) {         ret.push(cur);         continue;       }        const next = inPoints[i + 1];       const distance = this.calculateDistanceFromPoint(cur, pre, next);       if (distance < this.mNoiseThreshhold) {         ret.push(cur);       }     }     return ret;  }  /  • 获取最后一个位置点 / private getLastLocation(points:RunLatLng[]):RunLatLng|null{ if(!points||points.length===0)return null; return points[points.length-1]; }  /  • 计算点到线的垂直距离 / private calculateDistanceFromPoint(p:RunLatLng,lineBegin:RunLatLng,lineEnd:RunLatLng):number{ const A=p.longitude-lineBegin.longitude; const B=p.latitude-lineBegin.latitude; const C=lineEnd.longitude-lineBegin.longitude; const D=lineEnd.latitude-lineBegin.latitude; const dot=A * C+B * D; const len_sq=C * C+D * D; const param=dot/len_sq;       let xx: number, yy: number;     if (param < 0 || (lineBegin.longitude === lineEnd.longitude && lineBegin.latitude === lineEnd.latitude)) {       xx = lineBegin.longitude;       yy = lineBegin.latitude;     } else if (param > 1) {       xx = lineEnd.longitude;       yy = lineEnd.latitude;     } else {       xx = lineBegin.longitude + param * C;       yy = lineBegin.latitude + param * D;     }      const point = new RunLatLng(yy, xx);     return this.calculateLineDistance(p, point);  }  /  • 计算两点之间的距离 / private calculateLineDistance(point1:RunLatLng,point2:RunLatLng):number{ const EARTH_RADIUS=6378137.0; const lat1=this.rad(point1.latitude); const lat2=this.rad(point2.latitude); const a=lat1-lat2; const b=this.rad(point1.longitude)-this.rad(point2.longitude); const s=2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2)+ Math.cos(lat1) * Math.cos(lat2) * Math.pow(Math.sin(b/2),2))); return s * EARTH_RADIUS; }  /  • 角度转弧度 / private rad(d:number):number{ return d * Math.PI/180.0; }  /  • 轨迹抽稀（同时处理源数据）  • @param inPoints 待抽稀的轨迹list  • @param sourcePoints 源数据list，与inPoints一一对应  • @param threshHold 阈值  • @returns 包含抽稀后的轨迹list和对应的源数据list / reducerVerticalThresholdWithSource(inPoints:RunLatLng[],sourcePoints:T[],threshHold:number=this.mThreshhold):PointSource{ if(!inPoints||!sourcePoints||inPoints.length<=2||inPoints.length!==sourcePoints.length){ return{points:inPoints||[],sources:sourcePoints||[]}; }       const retPoints: RunLatLng[] = [];     const retSources: T[] = [];      for (let i = 0; i < inPoints.length; i++) {       const pre = this.getLastLocation(retPoints);       const cur = inPoints[i];        if (!pre || i === inPoints.length - 1) {         retPoints.push(cur);         retSources.push(sourcePoints[i]);         continue;       }        const next = inPoints[i + 1];       const distance = this.calculateDistanceFromPoint(cur, pre, next);       if (distance > threshHold) {         retPoints.push(cur);         retSources.push(sourcePoints[i]);       }     }      return { points: retPoints, sources: retSources };  } }  

二、绘制运动速度轨迹

有了上述两个工具类后，我们就可以开始绘制运动速度轨迹了。以下是绘制轨迹的完整流程：

1.准备轨迹点数据

首先，将原始轨迹点数据转换为RunLatLng数组，以便后续处理：

// 将轨迹点转换为 RunLatLng 数组进行优化 let tempTrackPoints = this.record!.points.map(point => new RunLatLng(point.latitude, point.longitude)); 

2.优化轨迹点

使用PathSmoothTool对轨迹点进行优化，包括去噪、滤波和抽稀，为保证源数据正确，我这里只做了抽稀：

// 轨迹优化 const pathSmoothTool = new PathSmoothTool(); const optimizedPoints = pathSmoothTool.reducerVerticalThresholdWithSource<RunPoint>(tempTrackPoints, this.record!.points); 

3.转换为地图显示格式

将优化后的轨迹点转换为地图所需的LatLng格式：

// 将优化后的点转换为 LatLng 数组用于地图显示 this.trackPoints = optimizedPoints.points.map(point => new LatLng(point.latitude, point.longitude)); 

4.获取轨迹颜色数组

使用PathGradientTool根据速度为轨迹点生成颜色数组：

// 获取轨迹颜色数组 const colors = PathGradientTool.getPathColors(optimizedPoints.sources, 100); 

5.绘制轨迹线

将轨迹点和颜色数组传递给地图组件，绘制轨迹线：

if (this.trackPoints.length > 0) {   // 设置地图中心点为第一个点   this.mapController.setMapCenter({     lat: this.trackPoints[0].lat,     lng: this.trackPoints[0].lng   }, 15);    // 创建轨迹线   this.polyline = new Polyline({     points: this.trackPoints,     width: 5,     join: SysEnum.LineJoinType.ROUND,     cap: SysEnum.LineCapType.ROUND,     isGradient: true,     colorList: colors   });    // 将轨迹线添加到地图上   this.mapController.addOverlay(this.polyline); } 

三、代码核心点梳理

1.轨迹颜色计算

PathGradientTool根据速度区间为轨迹点分配颜色。速度越快，颜色越接近青色；速度越慢，颜色越接近红色。颜色的渐变通过getGradient方法实现。

2.轨迹优化

PathSmoothTool通过卡尔曼滤波算法对轨迹点进行滤波，减少噪声和冗余点。轨迹抽稀通过垂直距离阈值实现，减少轨迹点数量，提高绘制性能。

3.地图绘制

使用百度地图组件（如Polyline）绘制轨迹线，并通过colorList实现颜色渐变效果。地图中心点设置为轨迹的起点，确保轨迹完整显示。

四、总结与展望

通过上述步骤，我们成功实现了运动速度轨迹的绘制。轨迹颜色反映了速度变化，优化后的轨迹更加平滑且性能更优。