一般的运动型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);
}
}
以上处理后,高德地图绘制时会给出渐变的运动轨迹。
以下是我随意设置的色值,可以看出渐变的效果: