Android百度地图轨迹回放

目前需要做这样一个需求,后台返回一堆打点数据,要求Android端实现轨迹回放功能,带动画的那种,百度了很多,没有发现实际能用上的,于是自己做了一个,先上图,看是否是你需要的功能。

011a82ad-b861-46e9-87d0-d61eb0c67a22 (1).gif

思路

很多个点,在地图上绘制,需要一个一个点来绘制,首先把那些点数据放在一个集合里面,这是总共完成绘制的线段,还有两点之间的动画,需要分割成多个点,成一个集合,这是运动的线段。设置一个计时器,每隔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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容