关于leaflet:支持Canvas的LeafletPathDashFlow动态流向线

通过对 leaflet 以及其插件的学习，咱们理解到应用 Leaflet.Path.DashFlow 插件可实现轨迹动静展现、管道流向动静展现、河流流向动静展现等，达到加强可视化展现的成果。该插件应用形式非常简单，只需在失常增加线的时候，退出 dashArray 和dashSpeed参数即可。外围代码如下：

留神，在 dashSpeed 为负时，线是正向流动。

成果如下：

然而在应用的过程中，发现该插件有个弊病，就是当应用 Canvas 形式绘制地图（初始化地图 preferCanvas 参数为true）时，动态效果不可用。那要如何解决这个问题呢？

通过对 Leaflet.Path.DashFlow 以及 leaflet 源码的钻研，发现动静线的成果次要是通过动静刷新 dashOffset 参数的值，以扭转线的款式来实现。

L.SVG在 _updateStyle 的时候，更新了 dashOffset 参数，然而 L.Canvas 在_updateStyle时，并没有更新 dashOffset 参数。这即是在 Canvas 形式绘制时没有动态效果的起因。

L.SVG：

L.Canvas：

由此，咱们找到了解决思路，即在 L.Canvas 的_updateStyle办法中，参考 L.SVG 的解决形式，增加对 dashOffset 参数的管制。外围代码如下：

为方便使用，咱们将 L.Path.DashFlow 插件从新封装，大家援用这个插件，即可在 Canvas 和SVG两种形式下应用此插件。

总结

1. 应用 Leaflet.Path.DashFlow 插件可实现轨迹动静展现、管道流向动静展现等动静线成果。
2. 默认插件在应用 Canvas 形式绘制地图（初始化地图 preferCanvas 参数为true）时，动态效果不可用。
3. 通过批改 L.Canvas 中代码，即可在 Canvas 形式时实现动静线成果。
4. 将 L.Path.DashFlow 插件从新封装，援用插件，即可在 Canvas 和SVG两种形式下实现动静线成果。

在线示例

[在线示例](
http://gisarmory.xyz/blog/ind…

[残缺代码](
http://gisarmory.xyz/blog/ind…

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

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

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