Добавление анимированной стрелки на офсетную полилинию

Question

У меня есть проект, который заключается в визуализации обмена данными между точками на карте. Я использую 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 со смещенной ломаной, она появится на исходной).

Answer 1

Я нашел решение, чтобы получить координаты смещения полилинии.

Плагин PolylineOffset имеет функцию, которая возвращает координаты смещения.

Вы можете использовать это так:

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

где latlng - массив исходных координат; 10 - смещение; карта это ваша листовка карта