Shulou(Shulou.com)05/31 Report--

This article mainly introduces how to support Canvas Leaflet.Path.DashFlow dynamic flow line, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor with you to understand.

Through the study of leaflet and its plug-ins, we know that using Leaflet.Path.DashFlow plug-ins can achieve dynamic display of trajectory, pipeline flow, river flow and so on, so as to enhance the effect of visual display. The plug-in is very easy to use, as long as you add dashArray and dashSpeed parameters when adding lines. The core code is as follows:

Note that when the dashSpeed is negative, the line flows in a positive direction.

The effect is as follows:

However, in the process of use, it is found that the plug-in has a disadvantage, that is, when using Canvas to draw the map (the initial map preferCanvas parameter is true), the dynamic effect is not available. So how to solve this problem?

Through the study of Leaflet.Path.DashFlow and leaflet source code, it is found that the effect of dynamic line is mainly achieved by dynamically refreshing the value of dashOffset parameters to change the style of the line.

L.SVG updates the dashOffset parameter when it is in _ updateStyle, but L.Canvas does not update the dashOffset parameter when it is in _ updateStyle. This is why there is no dynamic effect when drawing in Canvas mode.

L.SVG:

L.Canvas:

As a result, we find a solution, that is, in the _ updateStyle method of L.Canvas, we refer to the processing mode of L.SVG and add the control of dashOffset parameters. The core code is as follows:

For ease of use, we re-encapsulate the L.Path.DashFlow plug-in. If you refer to this plug-in, you can use it in both Canvas and SVG modes.

Summary

Dynamic line effects such as trajectory dynamic display and pipeline flow direction dynamic display can be realized by using Leaflet.Path.DashFlow plug-in.

Dynamic effects are not available when the default plug-in uses Canvas to draw a map (initialize the map preferCanvas parameter to true).

By modifying the code in L.Canvas, the dynamic line effect can be realized in Canvas mode.

Re-encapsulate the L.Path.DashFlow plug-in and reference the plug-in to achieve the dynamic line effect in both Canvas and SVG modes.

Thank you for reading this article carefully. I hope the article "how to realize the dynamic flow Line of Leaflet.Path.DashFlow supporting Canvas" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support it and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.