Анимация Ammap вдоль кривой не работает правильно
Я столкнулся с проблемой после выпуска 3.21.7 (улучшено рисование дуги), когда объект изображения не корректно анимируется вдоль изогнутой линии, линия выглядит намного лучше после этого обновления, но объект изображения не следует вдоль линии полной длины.
Вот пример на jsfiddle: https://jsfiddle.net/hh88euzd/6/
Вот код:
/**
* SVG path for target icon
*/
var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-
9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-
6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93
M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5
S12.5,7.067,12.5,9z";
/**
* SVG path for plane icon
*/
var planeSVG = "m2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34
0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47";
/**
* Create the map
*/
var map = AmCharts.makeChart( "chartdiv", {
"type": "map",
"theme": "light",
"dataProvider": {
"map": "worldLow",
"zoomLevel": 1.5,
"zoomLongitude": -55,
"zoomLatitude": 42,
"lines": [ {
"id": "line1",
"arc": -0.85,
"alpha": 0.3,
"latitudes": [ 43.8163, 48.8567, 43.8163 ],
"longitudes": [ -79.4287, 2.3510, -79.4287]
} ],
"images": [ {
"svgPath": targetSVG,
"title": "Paris",
"latitude": 48.8567,
"longitude": 2.3510
}, {
"svgPath": targetSVG,
"title": "Toronto",
"latitude": 43.8163,
"longitude": -79.4287
}, {
"svgPath": planeSVG,
"positionOnLine": 0,
"color": "#585869",
"animateAlongLine": true,
"lineId": "line1",
"flipDirection": true,
"loop": true,
"scale": 0.03,
"positionScale": 1.8
} ]
},
"areasSettings": {
"unlistedAreasColor": "#8dd9ef"
},
"imagesSettings": {
"color": "#585869",
"rollOverColor": "#585869",
"selectedColor": "#585869",
"pauseDuration": 0.2,
"animationDuration": 2.5,
"adjustAnimationSpeed": true
},
"linesSettings": {
"color": "#585869",
"alpha": 0.4
},
"export": {
"enabled": true
}
} );
Итак, мы видим 2 строки, но анимация использует только верхнюю строку,
Кто-нибудь знает, как это исправить?