CN110807074A - 一种基于地图js技术实现轨迹动态播放的方法 - Google Patents

Abstract

一种基于地图JS技术实现轨迹动态播放的方法，包括以下步骤：步骤一、画轨迹线：基于后台提供的数据绘制路线图，生成轨迹线路；步骤二、标注点：在地图轨迹线路上添加标注点，然后用特殊样式区分一些特殊点；步骤三、实现匀速播放：增加轨迹播放功能，分割定位点实现匀速播放、暂停流畅操作；步骤四、在实现了播放的基础上，快进一个或多个位置点，暂停并展示当前位置点数据，如已到达终点，则重新从起点开始；本发明提供了一种基于地图JS技术实现轨迹动态播放的方法。该方法既能满足用户一个良好的交互体验，又能对定位轨迹进行细致的数据分析，可以直观准确的提供给用户所需要的重点信息。

Description

一种基于地图JS技术实现轨迹动态播放的方法

技术领域

本发明涉属于互联网web前端开发领域，具体的说是一种基于地图JS技术实现轨迹动态播放的方法。

背景技术

在现实生活中，有些场景需要通过互联网手段根据定位轨迹来进行一些数据分析。比如通过人员定位获取的轨迹数据中，可以对定位时间、地理位置、停留时长、下一个位置点的距离等进行详细分析，这是一种非常有价值的数据分析。另外在这个过程中，网页同用户之间需要构建一个良好的交互环境。现有技术基本都是简单的实现轨迹的匀速播放，存在以下不足：

1、如果对轨迹的回放过程要求更高，想去得到某些位置点的详细定位数据，只做简单的匀速播放是不能满足的。

2、只匀速播放，不关注轨迹的真实距离，容易导致播放时间过长。

3、简单的轨迹回放，达不到良好的用户体验效果。

发明内容

为了解决现有技术问题的不足，本发明提供了一种基于地图JS技术实现轨迹动态播放的方法。该方法既能满足用户一个良好的交互体验，又能对定位轨迹进行细致的数据分析，可以直观准确的提供给用户所需要的重点信息。

为了实现上述目的，本发明采用的技术方案为，包括如下步骤，

一种基于地图JS技术实现轨迹动态播放的方法，包括以下步骤：

步骤一、画轨迹线：基于后台提供的数据绘制路线图，生成轨迹线路；

步骤二、标注点：在地图轨迹线路上添加标注点，然后用特殊样式区分一些特殊点；

步骤三、实现匀速播放：增加轨迹播放功能，分割定位点实现匀速播放、暂停流畅操作；

步骤四、在实现了播放的基础上，快进一个或多个位置点，暂停并展示当前位置点数据，如已到达终点，则重新从起点开始；

步骤五、后退一个或多个位置点，暂停并展示当前位置点数据；如在起点，则不能执行此操作；

步骤六、通过暂停、快进、后退的操作方式，展示定位时间、停留时长、事件位置，即完成整个轨迹回放流程。

为了进一步实现本发明，还可以采用以下技术方案：所述的步骤一中的数据为一定格式规则的JSON数据，包含查询时间内的起始时间、查询时间内所有定位的经纬度及在此段时间内发生的事件。所述的步骤一中的路线图是通过polyline 方法绘制。所述的步骤二中的特殊样式是不同的颜色。所述的步骤三中速度是通过轨迹整体的长度，以及地图当前级别，计算得出速度；得出速度之后，将两个轨迹点之间做均匀分割，基于两个点的经纬度求出距离，除以步长得到总分割数。

本发明的有益效果为：本发明既能满足用户一个良好的交互体验，又能对定位轨迹进行细致的数据分析，以一种可暂停、前进、后退的播放轨迹的方式，通过展示定位时间、停留时长、具体位置点等数据，更直观准确的提供给用户所需要的重点信息。

附图说明

图1为本发明流程图；

图2为本发明实施例在轨迹上添加标注点示意图；

图3为本发明实施例效果示意图。

具体实施方式

下面将结合本发明实施例，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

一种基于地图JS技术实现轨迹动态播放的方法，如图1所示，其步骤如下：

步骤一、画轨迹线：基于后台提供的数据绘制路线图，生成轨迹线路；要在界面上描绘出一条轨迹线路，后台要先提供一定格式规则的JSON数据，数据的获取是通过手机定位上传至后台。这些数据包括查询时间内的起始时间、查询时间内所有定位的经纬度、在此段时间内有多少事件发生。其次通过地图的相关接口实例化地图，并开启滚轮地图缩放。根据这些数据，通过polyline方法绘制完成整条轨迹。图2即查询时间内的完整线路，线条颜色#28B5F5，宽度4px，透明度90％。调整地图的缩放级别，使轨迹路线的轮廓能完全展示，调整到最佳视野。

步骤二、标注点：在地图轨迹线路上添加标注点，然后用特殊样式区分一些特殊点；在轨迹上添加标注点，一是这条轨迹的起点和终点，二是隐形的标注普通点，在需要的时候凸显。三是用不同的样式标注特殊点，每个点的结束时间和起始时间的差即为停留时长，若停留时长超过十分钟，用特殊样式标注，如采用不同的颜色进行区分；若此位置点发生过事件，则标注为另一种样式。以上两个步骤得到图2。如图2所示，起点终点的标注、以及停留时间过长的标注(起点旁边的原点)、图2中的数字4代表在这个时间段内，发生了四次事件(例如打电话4次)、普通点隐形标注(在需要的时候凸显)。其中停留时间过长的标注是通过每个定位点的结束时间和起始时间差计算出来的，若停留时长超过十分钟，即为停留时间过长，用特殊圆点凸显。

步骤三、实现匀速播放：增加轨迹播放功能，分割定位点实现匀速播放、暂停流畅操作；在以上两个步骤完成的基础上，添加整条轨迹播放功能，如图三下边三个图标所示，分别代表播放过程中可以前进、播放/暂停、后退。方向箭头的图标代表动态播放。其中播放的速度，通过轨迹整体的长度，以及地图当前级别，计算出适宜的速度并取整。知道速度之后，需要将两个轨迹点之间做均匀分割，基于两个点的经纬度求出距离，除以步长得到总分割数。播放过程中，如果两个点之间不需要分割，也就是分割数为0的情况下，过渡到下一个定位点并描线。如果两点之间分割数大于0，则按照计算的速度对分割点两点之间正常描线。如果两点之间当前帧数大于总的分割数，则说明已经完成移动，过渡到下一个定位点并描线。一种特殊情况是暂停之后继续播放，需要记录点击暂停时刻的帧数，再开始播放时将此帧数传值过去，按照原逻辑进行。

步骤四、在实现了播放的基础上，快进一个或多个位置点，暂停并展示当前位置点数据，如已到达终点，则重新从起点开始；在实现了流畅播放的基础上，点击图3下方“快进”图标，快进一个或多个位置点，若存在覆盖信息(像如图3中的停留时长悬浮框)，先取消。操作时若发生在两个轨迹点之间，需要取消两个点之间的分割描线(无用数据占用)，重新对两个轨迹点直接描线，取消定时器，改变状态为暂停并通过label的方式展示当前点的详细数据(定位时间、停留时长、事件量)。若已经到达终点，继续操作则重新从起点开始。

步骤五、后退一个或多个位置点，暂停并展示当前位置点数据；如在起点，则不能执行此操作；跟步骤四类似，点击图3下方“后退”图标后退一个或多个位置点，若存在覆盖信息，先取消覆盖物。与快进不同的是，若操作时发生在两个点之间，后退只需要取消两个点之间的分割描线，不需要做其他操作，同样是改变状态为暂停并通过悬浮框的方式展示当前点的详细数据以便于用户直观的分析。若已经后退到起点，则不需要执行后退功能代码。

步骤六、如图3所示，经过以上步骤之后，地图视野上整条轨迹的回放方式包括暂停、快进、后退三种操作，通过这三种操作能很直观的展示点的定位时间、停留时长、事件情况，以便用户进行细致的数据分析。

最后应说明的是：以上所述仅为本发明的优选实施例而已，并不用于限制本发明，尽管参照前述实施例对本发明进行了详细的说明，对于本领域的技术人员来说，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换,凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (5)

1.一种基于地图JS技术实现轨迹动态播放的方法，其特征在于，包括以下步骤：

步骤一、画轨迹线：基于后台提供的数据绘制路线图，生成轨迹线路；

步骤二、标注点：在地图轨迹线路上添加标注点，然后用特殊样式区分一些特殊点；

步骤三、实现匀速播放：增加轨迹播放功能，分割定位点实现匀速播放、暂停流畅操作；

步骤四、在实现了播放的基础上，快进一个或多个位置点，暂停并展示当前位置点数据，如已到达终点，则重新从起点开始；

步骤五、后退一个或多个位置点，暂停并展示当前位置点数据；如在起点，则不能执行此操作；

步骤六、通过暂停、快进、后退的操作方式，展示定位时间、停留时长、事件位置，即完成整个轨迹回放流程。

2.根据权利要求1所述的一种基于地图JS技术实现轨迹动态播放的方法，其特征在于：所述的步骤一中的数据为一定格式规则的JSON数据，包含查询时间内的起始时间、查询时间内所有定位的经纬度及在此段时间内发生的事件。

3.根据权利要求1所述的一种基于地图JS技术实现轨迹动态播放的方法，其特征在于：所述的步骤一中的路线图是通过polyline方法绘制。

4.根据权利要求1所述的一种基于地图JS技术实现轨迹动态播放的方法，其特征在于：所述的步骤二中的特殊样式是不同的颜色。

5.根据权利要求1所述的一种基于地图JS技术实现轨迹动态播放的方法，其特征在于：所述的步骤三中速度是通过轨迹整体的长度，以及地图当前级别，计算得出；得出速度之后，将两个轨迹点之间做均匀分割，基于两个点的经纬度求出距离，除以步长得到总分割数。

Images