在偏移传单折线上添加动画箭头答案

【问题标题】：Adding an animated arrow on an offset Leaflet polyline在偏移传单折线上添加动画箭头
【发布时间】：2016-01-22 17:32:38
【问题描述】：

我有一个项目，其中包括可视化地图上各点之间的数据交换。我正在使用 Leaflet 从 GeoJson 文件中的坐标绘制折线，并使用 Leaflet.polylineDecorator (https://github.com/bbecquet/Leaflet.PolylineDecorator) 在折线上放置动画箭头。

问题是我需要在两个方向上可视化流。我开始向我的 Geojson 文件中添加另一个方向的折线，但问题是当我缩小时，两条折线是堆叠的。所以我发现 Leaflet.polylineOffset (https://github.com/bbecquet/Leaflet.PolylineOffset) 允许通过设置偏移选项来创建另一条折线。我想，我只需要做同样的事情就可以将动画箭头放在上面，但是当我这样做时，动画会受到原始折线的影响。实际上，偏移折线保持了原始坐标的坐标。

我想知道是否有办法将此动画应用于偏移折线。

这是我的代码：

 d3.json("data/trajetsFibreDCSigma.json",function (data){ // getting polylines' data from a json file to add them on the map
                L.geoJson(data, {
                style: function(feature){return {color : feature.properties.stroke,opacity: 1};}, // setting the style of the polylines
                onEachFeature: function(feature){
                            
                                // getting the coordinates of the polyline from the json file
                                var latlng = feature.geometry.coordinates;
                                var size = feature.geometry.coordinates.length;
                                var buffer;
                                
                                
                                
                                
                                // reversing the order of latitude and longitude in the array because a L.latLng object needs the latitude first and I have the opposite in my json file
                                for (i=0;i<size;i++)
                                {
                                    buffer = latlng[i][0];
                                    latlng[i][0] = latlng[i][1];
                                    latlng[i][1] = buffer;
                                }
                                
                                var polylineOffset = L.polyline(latlng,{offset: 5,color: 'blue',opacity: 1}).addTo(map); // putting an offset to the polyline 
                                
                                addArrow(latlng,feature);
                                addArrow(polylineOffset,feature);
                                




                
                 }
                                           
                }).addTo(map);
                   
                
            });
                          
            function addArrow(polyline,feature){ // function to add an arrow on the map
                
                var arrowHead = L.polylineDecorator(polyline).addTo(map); // creating an arrow which will be put on the polyline
                var arrowOffset = 0;
                                
                window.setInterval(function() { // creating an animation for the arrow to cross the polyline
                    arrowHead.setPatterns([
                            {offset: arrowOffset+'%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 10, polygon: false, 
                            pathOptions: {stroke: true,color: feature.properties.stroke,opacity: 1}})}
                                                          ]);
                    if(++arrowOffset > 100)
                            arrowOffset = 0;
                      }, 100);
            }

（如果我只是用偏移折线调用 addArrow，它会弹出原始折线）。

【问题讨论】：

标签： javascript d3.js leaflet

【解决方案1】：

我找到了获取偏移折线坐标的解决方案。

PolylineOffset 插件有一个返回偏移坐标的函数。

你可以这样使用它：

var pts = L.PolylineOffset.offsetLatLngs(latlng,10,map); // getting the coordinates from the offset polyline

其中 latlng 是原始坐标的数组 ; 10 是偏移量 ;地图是你的传单地图

【讨论】：