Question

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

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

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

这是我的代码：

＆＃13;

 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);
            }

＆＃13;

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

Answer 1

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

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

你可以像这样使用它：

＆＃13;

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

＆＃13;

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

在偏移的Leaflet折线

1 个答案: