当前位置:网站首页>Support for canvas Leaflet.Path.DashFlow Dynamic flow line

Support for canvas Leaflet.Path.DashFlow Dynamic flow line

2020-11-10 17:23:51 GIS weapon Depot

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 :

202010100101

Be careful , stay dashSpeed When it is negative , The line is a positive flow .

The effect is as follows :

202010100101

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 .

202010190101

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:

202011090102

L.Canvas:

202011100103

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 :

202010190104

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 ](
http://gisarmory.xyz/blog/ind...

[ Complete code ](
http://gisarmory.xyz/blog/ind...


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 .

版权声明
本文为[GIS weapon Depot]所创,转载请带上原文链接,感谢