2017-8-20
前言
又到了周六，打完球，吃完饭，闲来无事，便把这周干的事情总结一下，顺便写个博客，分享给大家。
本来说好这周研究三维GIS的，但是看完官方文档发现只有最新的100版本推出了三维GIS，在加上小组长临时让我在2DGIS上研究一下轨迹回放，经过多次改动，最终在周四完成了这个功能，然后周五摸了一天的鱼（心里绞痛）。
整个功能通过你给的点的集合（小组长要求每个点相隔十分钟，当然，你们可以随便间隔），在地图上一步一步通过动画绘制出路线，每次到达一个点时，会显示出在这个点的时间，如果前后2个点没有太大的变化（也就是原地不动），每次会暂停一秒，然后继续绘制。
一些ARCGIS基础的开发，我就不说了，源码我也上传到GItHub上了，有兴趣的童鞋可以去看看。
好了，闲话就扯到这，开始吧。
效果实现
源码在这里：
https://github.com/Hyyzt/DrawTrack/tree/master
让我们先看看效果图
从动图中我们可以看到3个效果，下面我们依次分析下怎么实现。
首先轨迹回放的动画，是通过handler发送消息绘制Polyline来实现的，将所有的点分段绘制，正在走的为一种颜色，走完的为另一种颜色，没2个点为一段动画，通过你要求的所有的动画时间，计算每一段动画的绘制速度（100毫秒），每当发送一个消息（每100毫秒发送一次），便增加polyline.lineto()的坐标，以实现线移动的效果。
每一段动画中一共有2个polyline，第一个是正在走的polyline（临时线段），没100毫秒画一次（根据计算出的速度），当每一段动画结束时，移除第一个polyline,绘制第二个动画结束的polyline（最终线段），这样就实现了我们轨迹回访时得绘制动画。还有一个就是移动的图标，我们通过PictureMarkerSymbol来构建自己的移动图标，同样通过handler发送消息，根据速度增加坐标，每发送一次，移除上一个图片，重新绘制，实现移动的效果。
显示这个点的时间，无非就是判断一下这个点的经纬度时候是否和增加后的经纬度一致，之后再弹出一个显示框就可以了。
以上就是我们实现的思路了，下面我们来看看代码和难点。
代码
在代码之前，要说几个MapView的绘制时的特性。
- 我们绘制时，无论是线路还是图标，我们都是通过底图的投影坐标绘制的，所以我们需要将经纬度坐标转换为底图的投影坐标，否则无论你的点在哪里，都只会绘制在一个地方。
要将WGS-84转换为投影坐标，我们可以通过
Point mapPoint = (Point) GeometryEngine.project(wgsPoint ,SpatialReference.create(4326),map.getSpatialReference());
但有时候（没错，我就是那个但是），mapview是拿不到SpatialReference的，所以我们需要通过查阅自己的SpatialReference来转换投影坐标。
Point mapPoint = (Point) GeometryEngine.project(wgsPoint ,SpatialReference.create(4326),SpatialReference.create(你的投影坐标系参数));
每次的绘制时的点都必须转换，否则会出现上面的错误。
我们传入的数据格式是一个Point（ArcGIS）和一个表示时间的字符串的集合，通过下列方式构造，构造完成后加入集合。
new Data("2017-08-17 13:56:00", new Point(116.37489, 40.06644))；
-
线和图片的移动时的动画
之前说过无论是线还是图片的动画，都是通过handler每100毫秒发送一个消息，然后动过重绘来实现的动画，而这2个动画是同时完成的，所以使用一个handler来实现就可以了。
Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
time++;//每一段动画绘制了多少秒
draw();
}
};
private void draw() {
if (!isPause) {//是否暂停
if (index >= pointList.size() - 1)
return;
if (Math.abs(pointList.get(index).getX() - pointList.get(index + 1).getX()) < precision
&& Math.abs(pointList.get(index).getY() - pointList.get(index + 1).getY()) < precision) {
//前一个点和后一个点没有变化，原地跳动
index++;
myCallOut.show(wgs2(pointList.get(index)), list.get(index).data);
time = 0;
ClickList.add(pointList.get(index));
drawLines(index);
handler.sendEmptyMessageDelayed(0, 1000);
} else {
if (Math.abs(point.getX() - pointList.get(index + 1).getX()) < 0.000001
&& Math.abs(point.getY() - pointList.get(index + 1).getY()) < 0.000001) {
//上一段动画完成
showResult(pointList.get(index), pointList.get(index + 1));
index++;
myCallOut.show(wgs2(pointList.get(index)), list.get(index).data);
time = 0;
ClickList.add(pointList.get(index))；
setOnClickListener();//添加点击事件的监听
drawPoint(index);//画点
if (index == pointList.size() - 1) {
//路程结束
Toast.makeText(mainActivity, "路程结束", Toast.LENGTH_SHORT).show();
onDraw.onFinish();//提供给外部的接口
return;
}
}
drawLines(index);
handler.sendEmptyMessageDelayed(0, 100);
}
}
}
-
在每一段动画结束后，移除之前的线段
//画动画的线，在每一段完成后，移除 public void drawLines(int index) { carLayer.removeAll(); //计算每100毫秒的速度 speedX = (pointList.get(index + 1).getX() - pointList.get(index).getX()) / a; speedY = (pointList.get(index + 1).getY() - pointList.get(index).getY()) / a; Log.e("TAG", speedX + "," + speedY); SimpleLineSymbol lineSymbol = new SimpleLineSymbol(color1, 5, SimpleLineSymbol.STYLE.SOLID); point = new Point(pointList.get(index).getX(), pointList.get(index).getY()); Log.e("TAG", "drawLines: " + point.toString()); point.setX(point.getX() + speedX * time); point.setY(point.getY() + speedY * time); if (isFellow) {//是否开启跟随模式 mMapView.centerAt(wgs2(point), true); } carGraphic = new Graphic(wgs2(point), car); Polyline polyline = new Polyline(); polyline.startPath(wgs2(pointList.get(index))); Log.e("TAG1", pointList.get(index).toString()); polyline.lineTo(wgs2(point)); Log.e("Po", "drawLines: " + point.toString()); Graphic graphic = new Graphic(polyline, lineSymbol); drawLayer.addGraphic(graphic); carLayer.addGraphic(carGraphic);}
-
展示最终的结果
private void showResult(Point start, Point end) { drawLayer.removeAll();//移除之前的临时线段 SimpleLineSymbol lineSymbol = new SimpleLineSymbol(color2, 5, SimpleLineSymbol.STYLE.SOLID); Polyline polyline = new Polyline(); polyline.startPath(wgs2(start)); polyline.lineTo(wgs2(end)); Graphic graphic = new Graphic(polyline, lineSymbol); resultLayer.addGraphic(graphic); } -
设置点击事件
public void setOnClickListener() { mMapView.setOnSingleTapListener(new OnSingleTapListener() { @Override public void onSingleTap(float v, float v1) { Point clickPoint = mMapView.toMapPoint(v, v1); Point wgsPoint = (Point) GeometryEngine.project(clickPoint, spatialReference, SpatialReference.create(4326)); for (int i = 0; i < ClickList.size(); i++) { Point p = ClickList.get(i); if (Math.abs(p.getX() - wgsPoint.getX()) < 0.001 && Math.abs(p.getY() - wgsPoint.getY()) < 0.001) { String timeInterval = getTimeInterval(i);//计算前后2个点不动时的时间间隔 myCallOut.show(wgs2(ClickList.get(i)), timeInterval); break; } } } }); } //计算时间间隔 private String getTimeInterval(int index) { //通过栈来获取时间间隔，每次判断时，当前点先入栈，若后一个点不相同，则清空栈，若相同，则将后一个点入栈，随后继续判断，当有一个点与前一个点不同时，拿到栈顶，清空整个栈，这样就拿到了整个时间间隔。 String startTime = list.get(index).data; String endTime; //开始遍历 Stack<Data> stack = new Stack<>(); stack.add(list.get(index)); for (int i = index; i < list.size() - 1; i++) { if (Math.abs(pointList.get(i).getX() - pointList.get(i + 1).getX()) < 0.0001 && Math.abs(pointList.get(i).getY() - pointList.get(i + 1).getY()) < 0.0001) { //前后两个点相同 stack.add(list.get(i + 1)); } else { //前后2个点不同 break; } } if (stack.size() > 1) { endTime = stack.pop().data; stack.removeAllElements(); return startTime + "---" + endTime; } else { return startTime; } }
这样和逻辑相关的东西就结束了，至于弹出时间的文本框，过于简单也就不多说了，大家可以去源码中查看。
使用
根据小组长的要求，要我将整个过程集成，只暴露出几个方法供他使用（！！！），于是变成了最终版本，只需要拷贝2个类到你的项目，在初始化一下然后start就可以使用了。2个类是：
- MoveHelper，处理整个逻辑和动画的绘制
- MyCallOut，弹出的文本框
当你将2个类拷贝后，你直接进行初始化
//mapView一定要初始化结束在传入进去
//初始化MoveHelper时的参数 Context,MapView,List<Bean>
moveHelper = new MoveHelper(this, mMapView, list);
//移动时的图标(***必须设置),正在移动时轨迹的颜色，移动结束后轨迹的颜色
moveHelper.setIconAndColor(R.drawable.point, Color.YELLOW, Color.GRAY);
//判断是否移动的精度，默认0.0001
moveHelper.setPrecision(0.0001);
//是否跟随，默认false
moveHelper.setFellow(false);
//设置整个动画的时间，***必须设置
moveHelper.setTime(40);
//设置底图的空间参考,默认为3857,若参数和底图不一致，绘制会出现偏差
moveHelper.setSpatialReference(SpatialReference.create(3857));
//在整个动画结束后的逻辑，在OnFinish()里完成
moveHelper.setOnDraw(new MoveHelper.onDraw() {
@Override
public void onFinish() {
}
});
//注意：开始动画时，你必须要在之前初始化所有的必要参数，如：动画时间，移动时的图标等等。
moveHelper.start();//开始动画
moveHelper.pause();//暂停动画
这样就可以开始自己的动画了。
后记
可能讲的不是很清楚，望大家多见谅。（滑稽.jpg）但是功能和源码都已经实现了，可以直接去看源码，注释的也很清楚，也可以直接拿去使用。
到这也就基本结束了，下次见。
