Through the learning of leaflet and its plug-ins, we learned that the use of Leaflet.Path.DashFlowplug-ins can achieve dynamic display of trajectories, dynamic display of pipeline flow, dynamic display of river flow, etc., to achieve the effect of enhanced visualization. The plug-in is very simple to use, just add dashArrayand dashSpeedparameters when adding a line normally . The core code is as follows:
Note that when it
dashSpeedis negative, the line flows in a positive direction.
The effect is as follows:
But in the process of using it, it was discovered that the plug-in has a drawback, that is, when the Canvasmap is drawn using the method (initialized map preferCanvasparameter is true), the dynamic effect is not available. How to solve this problem?
Through the study Leaflet.Path.DashFlowof the leafletsource code and the source code, it is found that the effect of the dynamic line is mainly achieved by dynamically refreshing dashOffsetthe value of the parameter to change the line style.
L.SVGIn _updateStyletime, update the dashOffsetparameters, but L.Canvasat _updateStylethe time, and did not update dashOffsetparameters. This is Canvasthe reason why there is no dynamic effect when the mode is drawn.
L.SVG：
L.Canvas：
As a result, we have found a solution, that is, in L.Canvasthe _updateStylemethod, refer to L.SVGthe processing method, and add dashOffsetthe control of the parameters. The core code is as follows:
For ease of use, we will L.Path.DashFlowplug reseal, we refer to this plug-in to Canvasand SVGunder are two ways to use this plug-in.
to sum up
- Use
Leaflet.Path.DashFlowplug-ins to achieve dynamic line effects such as trajectory dynamic display and pipeline flow dynamic display. - When the default plug-in is used
Canvasto draw a map (initialized mappreferCanvasparameter istrue), the dynamic effect is not available. - By modifying the
L.Canvasmiddle code, theCanvasdynamic line effect can be realized in the mode. - The
L.Path.DashFlowplug reseal, reference plug can inCanvasandSVGthe line dynamic effects in two ways.
Online example
Original address: http://gisarmory.xyz/blog/index.html?blog=LeafletPathDashFlow .
Pay attention to the " GIS Weapon Library " public account and get more high-quality GIS articles in the first time.
This article is licensed under the Creative Commons Attribution-Non-Commercial Use-Same Method Sharing 4.0 International License Agreement . Welcome to reprint, use, and republish, but be sure to keep the article's signature "GIS Weapon Library" (including link: http://gisarmory.xyz/blog/ ), and it must not be used for commercial purposes. The modified works based on this article must be the same License issuance.