Question

目前正试图在传单上跟踪资产。我们的想法是绘制折线，为其设置动画并为与折线一起移动的标记设置动画。折线的脚本是IvanSanchez的脚本 SnakeAnim

动画标记的脚本是atogle AnimatedMaker

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

谢谢！

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

Answer 1

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

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

在实现了与之相关的速度问题之后，我向SnakeAnim项目提交了an issue，询问是否可以设置动画持续时间而不是动画速度。一个开发人员回答我这很难做到。 SnakeAnim不是那样设计的。

然后我有了一个主意。使用addLatLng方法逐渐绘制折线非常容易。我所要做的就是每次MovingMarker移动时触发一个事件，在我的代码中获取此事件，将当前MovingMarker位置添加到折线坐标。结果是Here。

我对MovingMarker的修改是here。只需添加此if块即可。然后我以这种方式在我的MovingMarker上获得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()

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

调用两个JS函数并同步它们（snakeAnim和Animated Marker）

1 个答案: