Through the study of Leaflet and its plug-ins, we know that the leaflet.path. DashFlow plug-in can be used to realize the dynamic display of trajectory, pipeline flow direction and river flow direction, so as to enhance the effect of visual display. The plug-in is as simple as adding dashArray and dashSpeed parameters as you normally add lines. The core code is as follows:

Notice that when dashSpeed is negative, the line is flowing forward.

The effect is as follows:

However, in the process of using the plugin, it is found that there is a drawback, that is, when drawing a map in Canvas mode (the preferCanvas parameter of initialization is true), the dynamic effect is not available. So how do you solve this problem?

Through the study of leaflet.path. DashFlow and Leaflet source code, it is found that the effect of dynamic lines is mainly realized by dynamically refreshing the value of dashOffset parameter and changing the style of lines.

L. VG updated dashOffset parameters when _updateStyle was set, but L. canvas did not update dashOffset parameters when _updateStyle was set. This is why there are no dynamic effects when drawing in Canvas mode.

L.S VG:

L.C anvas:

Therefore, we found a solution, that is, in the _updateStyle method of L.Canvas, the control of dashOffset parameters was added referring to the processing method of L. VG. The core code is as follows:

For ease of use, we have repackaged the l.path. DashFlow plug-in. You can use it in Canvas and SVG by referring to it.

conclusion

  1. useLeaflet.Path.DashFlowThe plug-in can realize dynamic line effects such as trajectory dynamic display and pipeline flow dynamic display.
  2. The default plug-in is in useCanvasWay to draw a map (initialize the mappreferCanvasParameters fortrue), dynamic effects are not available.
  3. By modifying theL.CanvasIn the code, you canCanvasTo achieve dynamic line effect.
  4. willL.Path.DashFlowPlug-in reencapsulation, reference plug-in, can be inCanvasandSVGTwo ways to achieve dynamic line effect.

Online sample

Online sample

The complete code

The original address: gisarmory. Xyz/blog/index… .

Pay attention to “GIS Armory” public number, the first time to get more high-quality GIS articles.

This article is licensed under the Creative Commons Attribution – Noncommercial Use – Share alike 4.0 International License. You are welcome to reprint, use and republish the article under the name “GIS Armory” (including link: gisarmory. Xyz /blog/). It must not be used for commercial purposes, and all works based on this article must be published under the same license.