web 技术分享| 【高德地图】实现自定义的轨迹回放
实现(轨迹回放)方式有两种:
第一种是使用
JS API
和AMap.PolyLine
(折线)等图形配合实现。第二种是使用
JS API
和AMapUI 组件库
配合使用,利用PathSimplifier
(轨迹展示组件)绘制出行动轨迹。
方案选择
以上两种实现方式我们可以根据两个因素 来决定哪一种更加适合自己:节点数量 的多少、排布的密集度 。
前者适合节点数量较少,排布比较稀松,例如,出租车轨迹回放,出租车行驶速度快,周期上报的时间也会相对较长。后者更加针对节点数量巨大、排布密集的路径,按秒记录位置的飞机行进轨迹,精细的地理边界等等。
实现流程
无论选择两种方式,我们都需要先收集到客户端上报的信息,这些信息可以自定义,通常我们会包含:经纬度、速度、逆编码之后的地理位置、方向、海拔 等基本地理信息,同时我们也可以加入一些自定义 的信息,例如:人员信息(头像昵称等)、出行信息(订单等)。
实现的流程:
客户端按(时间)周期上报地理信息以及自定义信息。
服务端按时间轴存储客户上报的信息。
按(时间等)条件查询出用户的轨迹,并通过简化算法去除一部分节点(例如,节点距离十分微小、或者多个点都在同一条直线、3 点之间,其中一点略有偏差无法绘制成直线等等),最终获得适合绘制的路径(数组)。
根据路径去绘制用户的行动轨迹。
路径简化算法(可选)
客户端上报的数据是按时间周期上报的,也就是说每个时间都对应了一个经纬度,经纬度在地图上就是一个又一个点,将这些点连接时,我们会得到 N 多条折线,为了绘制的轨迹更加美观,行动路线更加明确平滑,通常我们需要一个算法来简化折线。
例如:
A
点和B
点,两者距离不到1
像素,则可以去掉B
点,只留A
点。A
,B
,C
三点在一条直线上,或者,B
点仅仅稍微偏离A
点和C
点构成的线段,那么B
点就可以去掉。
这里官方也推荐了一种算法库 simplify.js
供大家参考,这里不做过多的阐述。
实现示例
车辆轨迹回放
这里我们使用第一种方式来实现 - 利用 JS API
和 AMap.PolyLine
。
实现原理:
在地图上绘制车辆标记(
AMap.Marker
)。利用
AMap.PolyLine
绘制出两条轨迹:历史轨迹和驾驶途径过的轨迹,以颜色区分。按照一定的速度使车辆前进,并监听
Maker
移动的事件,在事件回调中,将车辆(Marker
)位置设置为地图中心点,给使用者视觉主观上一种车辆在前进的感觉,同时延长驾驶途径过的轨迹。对于实现场景比较复杂的,需要进行自定义处理的比如:
查看每个节点的数据,我们可以把每个节点给绘制出来,节点被点击时显示该节点的数据。
移动倍速播放,首先按上报的时间间隔来播放,选择倍速之后,改变
MarKer
移动的duration
。其他自定义。
自定义 API
我们可以让车辆:
开始移动
暂停移动
恢复移动
停止移动
代码示例
参考链接:https://lbs.amap.com/demo/jsapi-v2/example/marker/replaying-historical-running-data
飞机航班的轨迹回放
使用 JS API
和 AMapUI 组件库
配合使用,利用 PathSimplifier
(轨迹展示组件)绘制出行动轨迹,这种方案比较简单,只需要进行一些配置即可,例如说方案一中的倍速播放就需要计算,同时还存在不能动态改变倍速的弊端,但是方案二却不会存在。
实现原理:
在地图上绘制飞机标记(
AMap.Marker
)。利用
AMap.PolyLine
绘制出两条轨迹:历史轨迹和驾驶途径过的轨迹,以颜色区分。配置轨迹的颜色,动画的速度等等。
对于实现场景比较复杂的,需要进行自定义处理的,可以在
PathSimplifier
提供的回调中进行配置及处理。
示例代码
参考链接:https://lbs.amap.com/demo/amap-ui/demos/amap-ui-pathsimplifier/index
版权声明: 本文为 InfoQ 作者【anyRTC开发者】的原创文章。
原文链接:【http://xie.infoq.cn/article/a2463e12d577f2ff2c30fa2de】。文章转载请联系作者。
评论