在物流行业地图开发中,如何实现车辆轨迹回放?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在物流行业地图开发中,如何实现车辆轨迹回放?相关的知识,希望对你有一定的参考价值。

参考技术A 随着共享经济的发展,网约车也在逐步的发展壮大,在诸如专车、顺风车网约车行业的程序员开发从业人员需要做到的一个功能是车辆的轨迹回放,实现这个功能并不难,接下来就具体的操作下吧!

几点tips:

1、首先因为是Web网页端的功能,所以需要用到的是地图模块的API,可以选择百度地图或者腾讯地图。

2、由于需要位置信息,所以地图需要支持点到点的路线绘制功能。

3、关键点:需要一个小车,并且小车是可以根据不同的方向而改变车头朝向。

因为前两点功能百度地图API可以满足,但是第三点,腾讯地图LBS,更新了新版本的接口,图标可以自动根据方向改变朝向。所以选择腾讯地址,减少开放量,另外就是直接API支持,减少了很多的BUG。

1、在腾讯位置服务中注册为开发者:

2、在控制台配置Key

配置完成之后,就可以通过开发文档-web前端-javascript-API来获取腾讯位置服务的LBS组件

第一步:画页面,初始化地图:

把key中的XXXXXXXXXXX更换为我们刚才在腾讯地图LBS后台获取的key。

效果如图所示:

第二步:画路线,并根据路线模拟运行

这里需要注意的是,如果路线比较复杂,尽可能的使用分钟级,甚至秒级的坐标,这样绘制的轨迹也会更精准。速度的展示,需要后台在记录坐标的时候计算好,并实时反馈。

另外需要后台配合的是:

1、把汽车的轨迹坐标,按照秒级/分钟级记录,同时记录下轨迹记录的时间。

2、把坐标绘制成轨迹,而不是仅仅设置起点和终点。

3、轨迹与轨迹之间用地图计算出来距离,然后除以时间计算出来速度。前端地图实时更新 marker.moveAlong中的car的速度。来达到轨迹回放跟实际车辆运行速度一致的目的。

总结:
使用腾讯位置服务API,是目前最简单的可以花轨迹+Mark图标跟随轨迹移动+Mark图标可以自适应转向的实现。

Vue中使用mapBox完成轨迹回放

参考技术A 1、在项目中安装相关依赖: npm i mapbox-gl -S npm install @turf/turf

2、下面只是一些实现步骤,有需要的朋友们可以自己套来实现一下功能(不喜勿喷,谢谢)

3、 我也是借鉴别人的, 源码 在这

以上是关于在物流行业地图开发中,如何实现车辆轨迹回放?的主要内容,如果未能解决你的问题,请参考以下文章

百度地图上如何实现轨迹回放

Vue中使用mapBox完成轨迹回放

GPS定位器的行车轨迹回放可以查看多久之前的?

android百度地图如何记录车辆行车轨迹

android 百度地图如何实现类似滴滴打车的功能,比如可以获取自己定位和车辆移动轨迹。

高德地图-轨迹回放