简介通过对leaflet以及其插件的学习，我们了解到使用Leaflet.Path.DashFlow插件可实现轨迹动态展示、管道流向动态展示、河流流向动态展示等，达到增强可视化展示的效果。但是在使用的过程中，发现该插件有个弊端，就是当使用Canvas方式绘制地图（初始化地图preferCanvas参数为true）时，动态效果不可用。通过对Leaflet.Path.DashFlow以及leaflet源码的研究，发现动态线的效果主要通过动态刷新dashOffset参数的值，以改变线的样式来实现。L.SVG在 updateStyle的时候，更新了dashOffset参数，但是L.Canvas在 updateStyle时，并没有更新dashOffset属性。由此，我们找到了解决思路，即在L.Canvas的_updateStyle方法中，参考L.SVG的处理方式，添加对dashOffset参数的控制。为方便使用，我们将L.Path.DashFlow插件重新封装，大家引用这个插件，即可在Canvas和SVG两种方式下使用此插件。用法该插件使用方式非常简单，只需在正常添加线的时候，加入dashArray和dashSpeed参数即可。示例  <link rel="stylesheet" href="./lib/leaflet.css" /> <script src="./lib/leaflet.js"></script>  <script type="text/javascript" src='../Leaflet.PathDashFlow.js'></script> // 初始化地图 var map = L.map('map', { center: [39.924317, 116.390619], zoom: 14, preferCanvas: true // 使用canvas模式渲染矢量图形 }); // 添加底图 var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map); var latlngs = [ [39.898457, 116.391844], [39.898595, 116.377947], [39.898341, 116.368001], [39.898063, 116.357144], [39.899095, 116.351934], [39.905871, 116.350670], [39.922329, 116.349800], [39.931017, 116.349671], [39.939104, 116.349225], [39.942233, 116.349910], [39.947263, 116.366892], [39.947568, 116.387537], [39.947764, 116.401988], [39.947929, 116.410824], [39.947558, 116.426740], [39.939700, 116.427338], [39.932404, 116.427919], [39.923109, 116.428377], [39.907094, 116.429583], [39.906858, 116.414040], [39.906622, 116.405321], [39.906324, 116.394954], [39.906308, 116.391264], [39.916611, 116.390748] ]; //添加动态线 var path = L.polyline(latlngs, { weight: 5, dashArray: '15,15', dashSpeed: -30 }).addTo(map); Leaflet.PathDashFlow.js // @class PolyLine L.Path.mergeOptions({ // @option dashSpeed: Number // The speed of the dash array, in pixels per second dashSpeed: 0 }); var _originalBeforeAdd = L.Path.prototype.beforeAdd; L.Path.include({ beforeAdd: function(map) { _originalBeforeAdd.bind(this)(map); if (this.options.dashSpeed) { this._lastDashFrame = performance.now(); this._dashFrame = L.Util.requestAnimFrame(this._onDashFrame.bind(this)); } }, _onDashFrame: function() { if (!this._renderer) { return; } var now = performance.now(); var dashOffsetDelta = (now - this._lastDashFrame) * this.options.dashSpeed / 1000; this.options.dashOffset = Number(this.options.dashOffset || 0) + dashOffsetDelta; this._renderer._updateStyle(this); this._lastDashFrame = performance.now(); this._dashFrame = L.Util.requestAnimFrame(this._onDashFrame.bind(this)); }, _offDashFrame: function() { L.Util.cancelAnimFrame(this._dashFrame); }, onRemove: function() { this._renderer._removePath(this); this._offDashFrame(); } }); // 针对Canvas添加dashOffset参数，解决Canvas下无法实现动态线问题 L.Canvas.include({ _updateDashArray: function(layer) { if (typeof layer.options.dashArray === 'string') { var parts = layer.options.dashArray.split(/[, ]+/), dashArray = [], dashValue, i; for (i = 0; i < parts.length; i++) { dashValue = Number(parts[i]); // Ignore dash array containing invalid lengths if (isNaN(dashValue)) { return; } dashArray.push(dashValue); } layer.options._dashArray = dashArray; } else { layer.options._dashArray = layer.options.dashArray; } if (layer.options.dashOffset) { layer.options._dashOffset = layer.options.dashOffset; } }, _fillStroke: function(ctx, layer) { var options = layer.options; if (options.fill) { ctx.globalAlpha = options.fillOpacity; ctx.fillStyle = options.fillColor || options.color; ctx.fill(options.fillRule || 'evenodd'); } if (options.stroke && options.weight !== 0) { if (ctx.setLineDash) { ctx.setLineDash(layer.options && layer.options._dashArray || []); } if (layer.options._dashOffset) { ctx.lineDashOffset = layer.options._dashOffset; } ctx.globalAlpha = options.opacity; ctx.lineWidth = options.weight; ctx.strokeStyle = options.color; ctx.lineCap = options.lineCap; ctx.lineJoin = options.lineJoin; ctx.stroke(); } }, })

支持Canvas的Leaflet.Path.DashFlow动态流向线

vip168

简介
通过对leaflet以及其插件的学习，我们了解到使用Leaflet.Path.DashFlow插件可实现轨迹动态展示、管道流向动态展示、河流流向动态展示等，达到增强可视化展示的效果。
但是在使用的过程中，发现该插件有个弊端，就是当使用Canvas方式绘制地图（初始化地图preferCanvas参数为true）时，动态效果不可用。
通过对Leaflet.Path.DashFlow以及leaflet源码的研究，发现动态线的效果主要通过动态刷新dashOffset参数的值，以改变线的样式来实现。L.SVG在updateStyle的时候，更新了dashOffset参数，但是L.Canvas在updateStyle时，并没有更新dashOffset属性。
由此，我们找到了解决思路，即在L.Canvas的_updateStyle方法中，参考L.SVG的处理方式，添加对dashOffset参数的控制。
为方便使用，我们将L.Path.DashFlow插件重新封装，大家引用这个插件，即可在Canvas和SVG两种方式下使用此插件。

用法
该插件使用方式非常简单，只需在正常添加线的时候，加入dashArray和dashSpeed参数即可。

示例

 <!-- 引入leafletapi -->
    <link rel="stylesheet" href="./lib/leaflet.css" />
    <script src="./lib/leaflet.js"></script>

<!-- 引入图层组显示隐藏插件 -->
<script type="text/javascript" src='../Leaflet.PathDashFlow.js'></script>