Javascript 调用两个JS函数并同步它们（snakeAnim和动画标记）

当前正在尝试跟踪传单上的资产。其思想是绘制一条多段线，设置其动画，并设置标记随多段线移动的动画。多段线的脚本是来自IvanSanchez的脚本

动画标记的脚本是atogle

问题是，我相信他们有两种不同的速度。有没有帮助将这两个功能“合并”为一个？不幸的是，一个函数使用像素表示距离，另一个函数使用实际的物理距离

谢谢

<div><p> <button id = "start" onclick='snake();'>Start Animation</button></p></div>

var polylines = [];
var markers = [];

for (var i = 0;  i < route.length; i++) {
         polylines.push(L.polyline(route[i]));

            var marker = L.animatedMarker(L.polyline(route[i]).getLatLngs(), {
            icon: Tanker,
            autoStart: false,
            onEnd: function() {
            $(this._shadow).fadeOut();
            $(this._icon).fadeOut(3000, function(){
            map.removeLayer(this);
            });
            }
            });
    }
    var pathmat = L.featureGroup (polylines);

function snake() 
    {               

            pathmat.snakeIn();  
            }
            pathmat.on('snakestart snake snakeend', function(ev){
            console.log(ev.type);
            marker.start();
        });

启动动画

var多段线=[]；
var标记=[]；
对于（变量i=0；i

有趣的是，几个月前我也有同样的想法

我没有使用AnimatedMarker，但因为它在缩放时表现更好，并且可以给它一个持续时间数组以获得可变速度

在意识到你们谈论的同样的速度问题后，我提交给Snakeaim项目，询问是否可以设置动画持续时间而不是动画速度。一位开发人员回答我说这很难做到。蛇形动物不是这样设计的

然后我有了一个主意。使用其

addLatLng

方法可以非常轻松地逐步绘制多段线。我所要做的就是在每次移动标记移动时触发一个事件，在代码中获取该事件以将当前移动标记位置添加到多段线坐标。这就是结果

我对MovingMarker的修改如下。只需添加此

if

块即可。 然后，我通过以下方式在移动标记上获得

move

事件：

var completePolyline = L.polyline(coordinatesTable);
var snakePolyline = L.polyline([]);

// add coordinates to the current snake line when marker moves
function updateSnakeLine(e) {
    var ll = e.target.getLatLng();
    snakePolyline.addLatLng(ll);
}

var marker = L.Marker.movingMarker(completePolyline.getLatLngs(), 20000,{
    autostart: false,
    icon: theicon
});
marker.on('move', updateSnakeLine);
marker.start()

---

这种技术的一个缺点是：如果浏览器在几毫秒内运行缓慢，它将跳过一些标记位置，因此蛇形多段线可能不会严格等于completePolyline。这就是为什么在动画结束时，我删除了蛇形多段线并绘制了完整的多段线。

有趣的是，几个月前我也有同样的想法

我没有使用AnimatedMarker，但因为它在缩放时表现更好，并且可以给它一个持续时间数组以获得可变速度

在意识到你们谈论的同样的速度问题后，我提交给Snakeaim项目，询问是否可以设置动画持续时间而不是动画速度。一位开发人员回答我说这很难做到。蛇形动物不是这样设计的

然后我有了一个主意。使用其

addLatLng

方法可以非常轻松地逐步绘制多段线。我所要做的就是在每次移动标记移动时触发一个事件，在代码中获取该事件以将当前移动标记位置添加到多段线坐标。这就是结果

我对MovingMarker的修改如下。只需添加此

if

块即可。 然后，我通过以下方式在移动标记上获得

move

事件：

var completePolyline = L.polyline(coordinatesTable);
var snakePolyline = L.polyline([]);

// add coordinates to the current snake line when marker moves
function updateSnakeLine(e) {
    var ll = e.target.getLatLng();
    snakePolyline.addLatLng(ll);
}

var marker = L.Marker.movingMarker(completePolyline.getLatLngs(), 20000,{
    autostart: false,
    icon: theicon
});
marker.on('move', updateSnakeLine);
marker.start()

---

这种技术的一个缺点是：如果浏览器在几毫秒内运行缓慢，它将跳过一些标记位置，因此蛇形多段线可能不会严格等于completePolyline。这就是为什么在动画结束时，我删除了蛇多段线并绘制了完整的多段线。

因此，您似乎只使用movingMarker动画而不使用蛇动画来设置路线和标记的动画。我说得对吗？你说得对。由于蛇形动物的速度以像素/秒为单位，因此很难将任何东西与蛇形动物同步。因此，速度根据缩放级别而变化。MovingMarker移动管理更干净，为动画设置了时间，因此我们可以说速度以“实米/秒”为单位。使用移动标记作为一种笔并不困难。因此，似乎您只使用移动标记动画来设置路线和标记的动画，而不使用蛇动画。我说得对吗？你说得对。由于蛇形动物的速度以像素/秒为单位，因此很难将任何东西与蛇形动物同步。因此，速度根据缩放级别而变化。MovingMarker移动管理更干净，为动画设置了时间，因此我们可以说速度以“实米/秒”为单位。使用移动标记笔作为一种钢笔并不难。