目前需要做这样一个需求,后台返回一堆打点数据,要求Android端实现轨迹回放功能,带动画的那种,百度了很多,没有发现实际能用上的,于是自己做了一个,先上图,看是否是你需要的功能。
思路
很多个点,在地图上绘制,需要一个一个点来绘制,首先把那些点数据放在一个集合里面,这是总共完成绘制的线段,还有两点之间的动画,需要分割成多个点,成一个集合,这是运动的线段。设置一个计时器,每隔50ms执行一次,也就是绘制一次线段,达到两个点之间的动画,当两点之间的动画完成,切换到下两个点之间的动画,并把之前的线段remove,把绘制完成的点添加到总线段标点,重新绘制总线段一次,依次循环,就是这样绘制。
做法
1.首先定义个集合存储后台返回过来的点,这里称之为大线条集合
2.再定义一个集合存储两点之间切割点,这里称之为小线段集合
3.定义一个计时器,来循环控制运动效果
4.集合初始化完成,添加一个点到大线条集合,大线条开始绘制需要2个点以上才可以绘制 > 线段切割把第一个点和第二个点分割成若干个小点,定义大线段小线段索引index变量,小线段集合添加第一个点,计时器启动,小线段开始每隔50毫秒绘制一次,第一次计时器执行绘制小线段小线段集合0和1的下表,绘制完毕,remove小线段集合索引为1,index++,继续绘制0和2的下标小线段,依次论推,index索引到达小线段集合顶峰,第一段线绘制完毕,大线段集合加一个大点,绘制一次,继续下一轮的小线段绘制
代码
2点之间线段分割方法
/**
* 根据两个点,切割成数个小点
*
* @param local1
* @param local2
*/
private List<LatLng> addLatLng(LocalBean local1, LocalBean local2) {
final Double a_x = Double.parseDouble(local1.getBaidu().split(",")[0]);
final Double a_y = Double.parseDouble(local1.getBaidu().split(",")[1]);
final Double b_x = Double.parseDouble(local2.getBaidu().split(",")[0]);
final Double b_y = Double.parseDouble(local2.getBaidu().split(",")[1]);
final Double distance = DistanceUtil.getDistance(new LatLng(a_x, a_y), new LatLng(b_x, b_y));
final Double partX = Math.abs(a_x - b_x) / distance;
final Double partY = Math.abs(a_y - b_y) / distance;
final List<LatLng> list = new ArrayList<>();
for (int i = 0; i < distance; i++) {
//每隔5米切割一个点
if (i % 5 == 0) {
Double x;
if (a_x < b_x) x = a_x + partX * i;
else if (a_x > b_x) x = a_x - partX * i;
else x = a_x;
Double y;
if (a_y < b_y) y = a_y + partY * i;
else if (a_y > b_y) y = a_y - partY * i;
else y = a_y;
list.add(new LatLng(x, y));
}
}
list.add(getLatLng(local2));
return list;
}
逻辑
/**
* 循环绘制线段
* @param latLng
* @param color_index
*/
private void cav(final List<LatLng> latLng, final int color_index) {
cav_polyline=null;//小线段
timer = new Timer();
final List<Integer> list_cav_int = new ArrayList<>();
list_cav = new ArrayList<>();
if (latLng.size() != 0)
list_cav.add(latLng.get(0));//添加小线段颜色
//添加小线段起点
list_cav_int.add(color_index);
TimerTask task = new TimerTask() {
@Override
public void run() {
//当小线段的索引值达到 最大线段的数量,或者小线段==0的时候
if (cav_index == latLng.size() || latLng.size() == 0) {
timer.cancel();
cav_index = 0;
if (index != runPoints.size() - 1) {
index++;
options.add(runPoints.get(index));
list_cav = new ArrayList<>();
list_int.add(Integer.parseInt(runLocal.get(index).getSource()));
//mBaiduMap.clear();
//mBaiduMap.setMapStatus(MapStatusUpdateFactory.newLatLng(runPoints.get(index)));//定位显示到初始地点
if (polyline != null) polyline.remove();
polyline = (Polyline) mBaiduMap.addOverlay(new PolylineOptions().width(10).points(options).dottedLine(true).customTextureList(runBitmap).textureIndex(list_int));//画线
//大线段索引没有达到最大值继续绘制
if (index != runLocal.size()-1 ) {
cav(addLatLng(runLocal.get(index), runLocal.get(index + 1)), Integer.parseInt(runLocal.get(index + 1).getSource()));
//移除小线段
if (cav_polyline!=null) cav_polyline.remove();
} else {
Message message2 = new Message();
Bundle bundle2 = new Bundle();
bundle2.putString("type", "2");
message2.setData(bundle2);
myHandler.sendMessage(message2);
}
}
} else {
list_cav.add(latLng.get(cav_index));
if (cav_index < latLng.size() - 1) {
Point pt = mBaiduMap.getMapStatus().targetScreen;
Point point = mBaiduMap.getProjection().toScreenLocation(latLng.get(cav_index + 1));
//判断轨迹是否在可视范围内,否则定位点到可见视图中心
if (point.x < 0 || point.x > pt.x * 2 || point.y < 0 || point.y > pt.y * 2) {
Message message = new Message();
Bundle bundle = new Bundle();
bundle.putString("type", "4");
bundle.putDouble("lat", latLng.get(cav_index + 1).latitude);
bundle.putDouble("lng", latLng.get(cav_index + 1).longitude);
message.setData(bundle);
myHandler.sendMessage(message);
}
}
marker.setPosition(latLng.get(cav_index));
//绘制小线段
if (cav_polyline == null) {
cav_polyline = (Polyline) mBaiduMap.addOverlay(new PolylineOptions().width(10).points(list_cav).dottedLine(true).customTextureList(runBitmap).textureIndex(list_cav_int));//画线
} else {
cav_polyline.setPoints(list_cav);
}
//小线段为直线,只需要2点即可
list_cav.remove(1);
cav_index++;
}
}
};
timer.schedule(task, 0, timeSize);
}
代码已开源 GitHub