Leaflet that supports canvas Path. Dashflow dynamic flow direction line

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 dashArray and dashSpeed Parameters can be . The core code is as follows ：

Be careful , stay dashSpeed When 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 ？

Through to 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 .

L.SVG stay _updateStyle When , Updated dashOffset Parameters , however L.Canvas stay _updateStyle when , No updates dashOffset Parameters . This is in Canvas The reason why there is no dynamic effect when drawing with .

L.SVG：

L.Canvas：

thus , We found a solution , That is to say L.Canvas Of _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 Canvas and SVG Use this plug-in in in two ways .

summary

1. Use Leaflet.Path.DashFlow The plug-in can realize dynamic display of trajectory 、 Dynamic display of pipeline flow direction, etc .
2. The default plug-in uses Canvas How to map （ Initialize map preferCanvas Parameter is true） when , Dynamic effects are not available .
3. By modifying the L.Canvas In the code , Can be in Canvas Mode to achieve dynamic line effect .
4. take L.Path.DashFlow Plug in repackaging , Reference plug-ins , Can be in Canvas and SVG Two ways to achieve dynamic line effect .

Online example

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 .