Through to leaflet And its plug-in learning , We learned to use
Leaflet.Path.DashFlow The plug-in can realize dynamic display of trajectory 、 Dynamic display of pipeline flow direction 、 Dynamic display of river flow , To enhance the visual display effect . The plug-in is very simple to use , Just add lines normally , Join in
dashSpeed Parameters can be . The core code is as follows ：
Be careful , stay
dashSpeedWhen it is negative , The line is a positive flow .
The effect is as follows ：
But in the process of using , There is a drawback to the plug-in , It's when you use
Canvas How to map （ Initialize map
preferCanvas Parameter is
true） when , Dynamic effects are not available . How to solve this problem ？
Leaflet.Path.DashFlow as well as
leaflet Source code research , It is found that the effect of dynamic line is mainly through dynamic refresh
dashOffset The value of the parameter , To change the style of a line .
_updateStyle When , Updated
dashOffset Parameters , however
_updateStyle when , No updates
dashOffset Parameters . This is in
Canvas The reason why there is no dynamic effect when drawing with .
thus , We found a solution , That is to say
_updateStyle In the method , Reference resources
L.SVG Treatment mode , Add pair
dashOffset Parameter control . The core code is as follows ：
For ease of use , We will
L.Path.DashFlow Plug in repackaging , This plug-in is cited , Can be in
SVG Use this plug-in in in two ways .
Leaflet.Path.DashFlowThe plug-in can realize dynamic display of trajectory 、 Dynamic display of pipeline flow direction, etc .
- The default plug-in uses
CanvasHow to map （ Initialize map
true） when , Dynamic effects are not available .
- By modifying the
L.CanvasIn the code , Can be in
CanvasMode to achieve dynamic line effect .
L.Path.DashFlowPlug in repackaging , Reference plug-ins , Can be in
SVGTwo ways to achieve dynamic line effect .
[ Online example ](
[ Complete code ](
Original address ：http://gisarmory.xyz/blog/index.html?blog=LeafletPathDashFlow.
Focus on 《GIS Zeughaus 》 official account , The first time to get more high quality GIS article .
This article adopts Creative Commons signature - Noncommercial use - Share in the same way 4.0 International licensing agreement Licensing . Welcome to reprint 、 Use 、 Re release , But be sure to keep the signature of the article 《GIS Zeughaus 》（ Include links ： http://gisarmory.xyz/blog/）, Not for commercial purposes , Based on this revised work must be released with the same license .