支持Canvas的Leaflet.Path.DashFlow动态流向线

通过对leaflet以及其插件的学习,我们了解到使用Leaflet.Path.DashFlow插件可实现轨迹动态展示、管道流向动态展示、河流流向动态展示等,达到增强可视化展示的效果。该插件使用方式非常简单,只需在正常添加线的时候,加入dashArraydashSpeed参数即可。核心代码如下:

202010100101

注意,在 dashSpeed为负时,线是正向流动。

效果如下:

但是在使用的过程中,发现该插件有个弊端,就是当使用Canvas方式绘制地图(初始化地图preferCanvas参数为true)时,动态效果不可用。那要如何解决这个问题呢?

通过对Leaflet.Path.DashFlow以及leaflet源码的研究,发现动态线的效果主要是通过动态刷新dashOffset参数的值,以改变线的样式来实现。

支持Canvas的Leaflet.Path.DashFlow动态流向线_第1张图片

L.SVG_updateStyle的时候,更新了dashOffset参数,但是L.Canvas_updateStyle时,并没有更新dashOffset参数。这即是在Canvas方式绘制时没有动态效果的原因。

L.SVG:

支持Canvas的Leaflet.Path.DashFlow动态流向线_第2张图片

L.Canvas:

支持Canvas的Leaflet.Path.DashFlow动态流向线_第3张图片

由此,我们找到了解决思路,即在L.Canvas_updateStyle方法中,参考L.SVG的处理方式,添加对dashOffset参数的控制。核心代码如下:

支持Canvas的Leaflet.Path.DashFlow动态流向线_第4张图片

为方便使用,我们将L.Path.DashFlow插件重新封装,大家引用这个插件,即可在CanvasSVG两种方式下使用此插件。

总结

  1. 使用Leaflet.Path.DashFlow插件可实现轨迹动态展示、管道流向动态展示等动态线效果。
  2. 默认插件在使用Canvas方式绘制地图(初始化地图preferCanvas参数为true)时,动态效果不可用。
  3. 通过修改L.Canvas中代码,即可在Canvas方式时实现动态线效果。
  4. L.Path.DashFlow插件重新封装,引用插件,即可在CanvasSVG两种方式下实现动态线效果。

在线示例

[在线示例](
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/),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。

你可能感兴趣的:(leaflet,gis,javascript)