運動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);
        }
    }
複製代碼

以上處理後，高德地圖繪製時會給出漸變的運動軌跡。

如下是我隨意設置的色值，能夠看出漸變的效果：