仿滴滴打车的平滑移动附近车辆效果实现全流程,基于高德地图

源码地址:https://github.com/zyktojo/AmapSmoothMarker

欢迎Star~~


开端:

打开滴滴打车APP,会发现地图上的车辆显示的十分形象,车辆会在路上平滑的加减速,转向停车~

有种即时战略的感觉,看起来挺有趣:

为了研究这个效果如何实现,我开始了探索之旅:


一.探索阶段:

1.旧版平滑移动

首先找到的是百度“高德地图平滑移动”结果里的这个文:

http://lbs.amap.com/smart/transportation/skill/move/

实现方式是开启子线程,不断执行绘制-销毁图标marker方法来实现看起来在不断向前移动的动画:



于是下载了这个DEMO,跑起来,发现确实移动效果不错

但是!!

问题是这个实现方式很难支持多点同时移动

经过实践发现使用这个方法同时操纵多marker时,很大概率只能成功移动最后操作的那个marker,而之前的所有marker都一动不动

努力改造两天之后,依然没有成功保证所有该动的marker都动起来,因此决定另寻他路


2.新版移动

运气还不错,在高德官方文档里找到了17年刚刚发布的新文档:

http://lbs.amap.com/api/android-sdk/guide/draw-on-map/smooth-move



简单浏览了一下这个新文档和DEMO,发现这个实现方式明显封装更良好,也更能保证线程和内存安全


二.开始实现

1.下载最新版Jar包:4.1.3

要想实现这个,必须使用最新版的高德地图SDK,即4.1.3以上版本

在Gradle修改版本,刷新Gradle,搞定

2.会移动的Mark类:SmoothMoveMarker

先看看官方实现的逻辑代码:


// 获取轨迹坐标点
List<LatLng> points = readLatLngs();
LatLngBounds bounds = new LatLngBounds(points.get(0), points.get(points.size() - 2));
mAMap.animateCamera(CameraUpdateFactory.newLatLngBounds(bounds, 50));

SmoothMoveMarker smoothMarker = new SmoothMoveMarker(mAMap);
// 设置滑动的图标
smoothMarker.setDescriptor(BitmapDescriptorFactory.fromResource(R.drawable.icon_car));

LatLng drivePoint = points.get(0);
Pair<Integer, LatLng> pair = SpatialRelationUtil.calShortestDistancePoint(points, drivePoint);
points.set(pair.first, drivePoint);
List<LatLng> subList = points.subList(pair.first, points.size());

// 设置滑动的轨迹左边点
smoothMarker.setPoints(subList);
// 设置滑动的总时间
smoothMarker.setTotalDuration(40);
// 开始滑动
smoothMarker.startSmoothMove();


发现高德新增了一个支持移动的Marker类:SmoothMoveMarker

只要放入轨迹,设定好滑动时间,他就会愉快的滑动起来啦~


3.初步实现多Marker移动

阅读高德demo源码,发现他封装了两个方法来实现移动,一个是移动,另一个是读取路线坐标值:


//平滑移动
public void movePoint() {
    // 获取轨迹坐标点
    List<LatLng> points = readLatLngs();
    LatLngBounds bounds = new LatLngBounds(points.get(0), points.get(points.size() - 2));
    aMap.animateCamera(CameraUpdateFactory.newLatLngBounds(bounds, 50));

    SmoothMoveMarker smoothMarker = new SmoothMoveMarker(aMap);

    // 设置滑动的图标
    smoothMarker.setDescriptor(BitmapDescriptorFactory.fromResource(R.drawable.car_up));
    LatLng drivePoint = points.get(0);
    Pair<Integer, LatLng> pair = SpatialRelationUtil.calShortestDistancePoint(points, drivePoint);
    points.set(pair.first, drivePoint);
    List<LatLng> subList = points.subList(pair.first, points.size());

    // 设置滑动的轨迹左边点
    smoothMarker.setPoints(subList);
    // 设置滑动的总时间
    smoothMarker.setTotalDuration(10);
    // 开始滑动
    smoothMarker.startSmoothMove();
}
//获取路线
private List<LatLng> readLatLngs() {
    List<LatLng> points = new ArrayList<LatLng>();
    for (int i = 0; i < coords.length; i += 2) {
        points.add(new LatLng(coords[i + 1], coords[i]));
    }
    return points;

}

为了观察多点同时移动,决定把这个方法重复实现两次,两条路线不一样

那怎么设定不同的路线呢?

readLatLngs():这个方法读取了名为coords的集合

那么我们就先设定一个deuble[]集合

把路线经过点的各个坐标值放进去

第二次运行的时候再改变这个集合就OK了~

如下例,地图中心点是天安门,两辆车会从天安门西边,一个向南一个向北移动:


double[] newoords = {116.380729, 39.906443,
116.330776, 39.868508};
coords = newoords;
movePoint();
double[] newoords2 = {116.319618, 39.929614,
        116.437377, 39.906443};
coords = newoords2;
movePoint();

经过试验,可以良好的支持多点同时移动


——————————————基础实现部分到这里为止,接下来是具体业务开发相关————————————————


4.加入路线,刷新

搞定了基础实现,接下来就要考虑具体场景了

1.数据源:

由于司机端的数据源信息更新慢(每10秒报一轮GPS),方向信息缺乏(静止时没有方向数据)

考虑到这些原因,我决定把平滑移动的时间改为10秒:

// 设置滑动的总时间
smoothMarker.setTotalDuration(10);

查询附近车辆的接口,也改为每十秒钟循环一次,以达到与司机端发送信息的频率一致

carsHandler.postDelayed(this, 10000);

2.对照车辆ID

如何判断新得到的那些车,有哪几辆是与上次搜索时一样的呢?

首先,必须有车辆ID

看看接口文档,接口数据里除了经纬度之外还带了个car_id,果断拿来对照一下

具体实现时要考虑两种情况:

1.如果car_id相同:平滑移动marker

2.如果car_id不同:展示静态marker


5.问题:如何清除旧marker?

很简单,每次成功请求到新的附近车辆数据时,把AMap对象clear()一下就行咯

缺点是会有瞬间的地图闪动,那一瞬间地图上所有附加的图标点全部清空,不过时间很短不太容易察觉到


效果展示:



三.优化

1.第一次加载时的角度

在写完上述功能后,发现一个问题:

车辆第一次加载在地图上时,marker的角度全都是默认角度:0度,头朝上

这可不太友好,于是问了问司机端,能不能获取一下即时的车辆角度?

回答是:动的时候可以,静止之后不能

于是又问了服务端,能不能做一个“记录车辆最后一次报告的角度”功能

这个当然可以~

于是完美解决了第一次加载车辆marker时的角度问题


2.地图挪动时,太灵敏

解决了角度问题,又发现一个新的问题,就是“地图中心点改变时,如何即时刷新附近车辆?”

高德地图的API给出的监听方法是:

onCameraChangeFinish()

用来在地图被挪动后执行一些方法


之前一直把获取附近车辆的接口方法写在这里,因而造成了:

即使地图只挪了1米远,同样会发出一遍获取附近车辆的请求

这样造成的坏处是:

1.增加服务器负担

2.影响正常marker动画展示,因为前后两次请求如果小于10秒,那么请求到的坐标值是一样的,这样的话车辆就不会移动了

一个简单的解决方案是:

把“请求附近车辆”的方法放进界面onCreate()或者onResume()方法里,用Hnadler继承runnable接口的方式写一个循环执行的线程


这样解决了地图挪动太灵敏的问题,不过也造成了地图挪动后,新位置附近的车加载过慢的新问题

要解决这个也很简单,刚才说到的onCameraChangeFinish()方法,可以在这个方法里销毁一下刚才的Handler并且重新post()一遍就行啦~

哎不对,这岂不是跟刚开始的时候一样了嘛?

淡定,这一步还没做完,我们可以对比一下地图前后中心点的距离,当它大于某个长度后才进行搜索嘛~

这样每次地图挪动之后都会重新执行一下“加载附近车辆”的方法,同时又不用担心加载过于灵敏或者线程重复执行的问题啦


3.渐变展现

在快要完成这项功能的最后,我发现滴滴的车辆展示其实不是立马展示上去的,而是有一个渐隐动画

我决定也做一个类似的效果

用到了经典的安卓动画文件夹:anim

里面可以设定透明度:alpha:

还可以设定展示的时间during:


设定好参数之后呢,在java文件里加载也很方便,

让指定的marker对象:.startAnimation(animationutils.loadanimation(R.anim.xxx_xx));

大功告成~


效果展示:



评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值