使用腾讯位置服务API完成车辆轨迹回放(模拟真实的速度和方向)
产品需求:
根据能够回放出来车辆的运行轨迹路线、运行方向和速度。
需求分析:
1、首先因为是Web网页端的功能,所以需要用到的是地图模块的API,可以选择百度地图或者腾讯地图。
【使用腾讯位置服务API完成车辆轨迹回放(模拟真实的速度和方向)】2、由于需要位置信息,所以地图需要支持点到点的路线绘制功能。
3、关键点:需要一个小车,并且小车是可以根据不同的方向而改变车头朝向。
因为前两点功能百度地图API可以满足,但是第三点,腾讯地图LBS,更新了新版本的接口,图标可以自动根据方向改变朝向。所以选择腾讯地址,减少开放量,另外就是直接API支持,减少了很多的BUG。
开发前的准备:
1、在腾讯位置服务中注册为开发者:
文章图片
2、在控制台配置Key
配置完成之后,就可以通过开发文档-web前端-JavaScript-API来获取腾讯位置服务的LBS组件
文章图片
开始开发:
第一步:画页面,初始化地图:
把key中的XXXXXXXXXXX更换为我们刚才在腾讯地图LBS后台获取的key。
marker轨迹回放-全局模式 - 锐客网 html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 100%;
}
效果如图所示:
文章图片
第二步:画路线,并根据路线模拟运行
这里需要注意的是,如果路线比较复杂,尽可能的使用分钟级,甚至秒级的坐标,这样绘制的轨迹也会更精准。速度的展示,需要后台在记录坐标的时候计算好,并实时反馈。
另外需要后台配合的是:
1、把汽车的轨迹坐标,按照秒级/分钟级记录,同时记录下轨迹记录的时间。
2、把坐标绘制成轨迹,而不是仅仅设置起点和终点。
3、轨迹与轨迹之间用地图计算出来距离,然后除以时间计算出来速度。前端地图实时更新 marker.moveAlong中的car的速度。来达到轨迹回放跟实际车辆运行速度一致的目的。
总结:
使用腾讯位置服务API,是目前最简单的可以花轨迹+Mark图标跟随轨迹移动+Mark图标可以自适应转向的实现。
推荐阅读
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件
- android|android studio中ndk的使用