关于javascript:Leaflet-带箭头轨迹以及沿轨迹带方向的动态marker

后面写了篇文章，mapboxgl 实现带箭头轨迹线，介绍了如何基于 mapboxgl 实现相似高德地图导航轨迹成果。

近期有基于 Leaflet 实现轨迹回放的需要，于是钻研了下如何基于 leaflet 来实现。

下图是我基于 leaflet 实现的成果。

接下来分享一下在我基于 leaflet 实现该成果时一些思路以及踩到的坑。

轨迹线增加箭头成果

leaflet 无奈像 mapboxgl 似的间接通过款式实现轨迹箭头成果，须要通过援用 L.polylineDecorator 扩大实现。外围代码如下。

留神：此处增加箭头图层应在轨迹线和实时轨迹线之后，不然箭头会被笼罩。

沿轨迹线带方向动静 marker

实现该成果首先想到的是相似之前在用 mapboxgl 实现的思路，将线打断，而后通过 requestAnimationFrame 循环更新 marker 的地位和角度实现；这种形式最终能够实现动态效果，然而晦涩度差了一些，会有卡顿的景象。

为了失去更晦涩的成果，又翻看 Leaflet Plugins，搜寻 animate 关键字，发现了 Leaflet.AnimatedMarker，动画成果挺晦涩的，于是拉取代码钻研了一下。

该插件次要是应用 CSS3 动画来实现 marker 在线段间的挪动，所以成果比拟晦涩。

然而该插件并未思考 marker 角度的问题，而且在做地图缩放的时候会有 marker 偏移轨迹的问题。查找相干材料时，发现有人也尝试解决此问题 leaflet-moving-marker。

但这里对于轨迹线的动静绘制并未思考。

参考 Leaflet.AnimatedMarker、leaflet-moving-marker 中外围代码并思考咱们要实现的成果，最终解决了角度问题以及轨迹线动静绘制问题。

另外，在播放过程中以后后两个点位角度变动超过 180 度时，会呈现 marker 旋转的问题。

通过如下代码咱们解决了此问题。

咱们把代码从新封装，简略调用即可实现了文章结尾的轨迹带箭头以及沿轨迹线带方向的动静marker。

留神：在动静播放的过程中缩放地图，标记点因为播放提早，有时依然会呈现偏离轨迹线的问题，目前该问题暂未解决，后续解决后更新。

总结

1. 应用用 L.polylineDecorator 插件能够实现轨迹带箭头成果。
2. Leaflet.AnimatedMarker插件能够更晦涩的实现 marker 沿线播放，然而没有思考 marker 角度和轨迹线的动静绘制。
3. 参考 Leaflet.AnimatedMarker、leaflet-moving-marker 中外围代码，解决角度问题以及轨迹线动静绘制等问题。
4. 将代码从新封装成插件，不便调用。

在线示例

在线示例：http://gisarmory.xyz/blog/index.html?demo=LeafletRouteAnimate

示例代码地址：http://gisarmory.xyz/blog/index.html?source=LeafletRouteAnimate

插件地址：http://gisarmory.xyz/blog/index.html?source=LeafletAnimatedMarker

原文地址：http://gisarmory.xyz/blog/index.html?blog=LeafletRouteAnimate。

关注《GIS 兵器库》，第一工夫取得更多高质量 GIS 文章。

本文章采纳 常识共享署名 - 非商业性应用 - 雷同形式共享 4.0 国内许可协定 进行许可。欢送转载、应用、从新公布，但务必保留文章署名《GIS 兵器库》（蕴含链接：http://gisarmory.xyz/blog/），不得用于商业目标，基于本文批改后的作品务必以雷同的许可公布。