仿滴滴打车的平滑移动附近车辆效果实现全流程,基于高德地图
源码地址:https://github.com/zyktojo/AmapSmoothMarker欢迎Star~~开端:打开滴滴打车APP,会发现地图上的车辆显示的十分形象,车辆会在路上平滑的加减速,转向停车~有种即时战略的感觉,看起来挺有趣:为了研究这个效果如何实现,我开始了探索之旅:一.探索阶段:1.旧版平滑移动首先找到的是百度“高德地图平滑移动”结果里的这个文:http://lbs.amap.
源码地址: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));
大功告成~
效果展示:
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)