ArcGIS轨迹回放

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个类是：

1. MoveHelper，处理整个逻辑和动画的绘制
2. 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）但是功能和源码都已经实现了，可以直接去看源码，注释的也很清楚，也可以直接拿去使用。

到这也就基本结束了，下次见。