运动App 绘制彩色的运动轨迹

一般的运动型App的运动轨迹会根据运动时点对应的速度，绘制彩色的运动轨迹，用户可以根据轨迹很具象地看出运动过程中速度的变化，以及速度的快慢。

笔者用的是高德地图，高德提供了对应的API，直接看代码：

{.....
 //创建PolylineOptions对象，用于添加轨迹点
 PolylineOptions polylineOptions = new PolylineOptions();
 //创建集合colorList记录对应Location点配速的色值。
 List<Integer> colorList = new ArrayList<>();
 List<LatLng> latLngList = new ArrayList<>();

    for (int i = 0; i < recordLocationList.size(); i++) {
      Location location = recordLocationList.get(i);
      //轨迹纠偏
      Gps gps = PositionUtil.gps84_To_Gcj02(location.latitude, location.longitude);
      LatLng latlng = new LatLng(gps.getWgLat(), gps.getWgLon());
      latLngList.add(latlng);
      colorList.add(colorList.size(), getColorFromSpeed(location.pace));
    }
		//轨迹优化处理(平滑、抽稀、降噪)
    PathSmoothTool pathSmoothTool = new PathSmoothTool();
    pathSmoothTool.setIntensity(7);
    pathSmoothTool.setThreshhold(1);
    latLngList = pathSmoothTool.pathOptimize(latLngList);

    for (int i = 0; i < latLngList.size() ; i++) {
      LatLng latLng = latLngList.get(i);
      if (i == 0){
        startLatLng = latLng;
      }
      if (i == latLngList.size() - 1){
        endLatLng = latLng;
      }
      polylineOptions.add(latLng);
      mOriginLatLngList.add(latLng);
    }

    polylineOptions.width(traceWidth)
      .useGradient(true)//设置允许轨迹色值渐变
      .colorValues(colorList)//设置渐变颜色色值List
      .zIndex(10);
    mAMap.addPolyline(polylineOptions);

    try {
      mAMap.moveCamera(CameraUpdateFactory.newLatLngBounds(getBounds(), 50));
    } catch (Exception e) {
      e.printStackTrace();
    }

    ..........
}  

    //根据配速获取不同的色值。
    private int getColorFromSpeed(int pace){
        int paceMin = pace/TimeDateUtil.TIME_MIN_INT;
        switch (paceMin){
            case 12:
                return ColorUtil.getResourcesColor(R.color.location_trace_pace_1);
            case 11:
                return ColorUtil.getResourcesColor(R.color.location_trace_pace_2);
            case 10:
                return ColorUtil.getResourcesColor(R.color.location_trace_pace_3);
            case 9:
                return ColorUtil.getResourcesColor(R.color.location_trace_pace_4);
            case 8:
                return ColorUtil.getResourcesColor(R.color.location_trace_pace_5);
            case 7:
                return ColorUtil.getResourcesColor(R.color.location_trace_pace_6);
            case 6:
                return ColorUtil.getResourcesColor(R.color.location_trace_pace_7);
            case 5:
                return ColorUtil.getResourcesColor(R.color.location_trace_pace_8);
            case 4:
                return ColorUtil.getResourcesColor(R.color.location_trace_pace_9);
            case 3:
                return ColorUtil.getResourcesColor(R.color.location_trace_pace_10);
            case 2:
                return ColorUtil.getResourcesColor(R.color.location_trace_pace_11);
            case 1:
                return ColorUtil.getResourcesColor(R.color.location_trace_pace_12);
                default:
                    return ColorUtil.getResourcesColor(R.color.location_trace_pace_def);
        }
    }

以上处理后，高德地图绘制时会给出渐变的运动轨迹。

以下是我随意设置的色值，可以看出渐变的效果：