资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

如何实现支持Canvas的Leaflet.Path.DashFlow动态流向线

这篇文章主要介绍了如何实现支持Canvas的Leaflet.Path.DashFlow动态流向线,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

目前创新互联已为上千余家的企业提供了网站建设、域名、网站空间网站托管、企业网站设计、遵化网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

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

如何实现支持Canvas的Leaflet.Path.DashFlow动态流向线

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

效果如下:

如何实现支持Canvas的Leaflet.Path.DashFlow动态流向线

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

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

如何实现支持Canvas的Leaflet.Path.DashFlow动态流向线

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

L.SVG:

如何实现支持Canvas的Leaflet.Path.DashFlow动态流向线

L.Canvas:

如何实现支持Canvas的Leaflet.Path.DashFlow动态流向线

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

如何实现支持Canvas的Leaflet.Path.DashFlow动态流向线

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

总结

  1. 使用Leaflet.Path.DashFlow插件可实现轨迹动态展示、管道流向动态展示等动态线效果。

  2. 默认插件在使用Canvas方式绘制地图(初始化地图preferCanvas参数为true)时,动态效果不可用。

  3. 通过修改L.Canvas中代码,即可在Canvas方式时实现动态线效果。

  4. L.Path.DashFlow插件重新封装,引用插件,即可在CanvasSVG两种方式下实现动态线效果。

感谢你能够认真阅读完这篇文章,希望小编分享的“如何实现支持Canvas的Leaflet.Path.DashFlow动态流向线”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


网页名称:如何实现支持Canvas的Leaflet.Path.DashFlow动态流向线
转载注明:http://cdkjz.cn/article/pehpdc.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220