1

我正在向地图添加折线并使用折线装饰器插件向折线添加行进方向箭头。然后setInterval使用简单的计数增量作为偏移百分比沿折线移动箭头。

问题是我进一步放大（超过缩放级别 13）箭头速度太快了。你能建议一种减慢速度的方法吗？

一些变量是：

map.getZoom()根据缩放级别更改速度？

polyArray.length根据折线的长度改变速度可能吗？

在这里看小提琴：http: //jsfiddle.net/KSv2h/

下面是我的全部功能

// add map polylines
function addPolyline(polyArray, colour) {
    console.log(polyArray.length);
    polyline = L.polyline(polyArray, {color: colour});
    var arrowHead = L.polylineDecorator(polyline).addTo(mylayergroup);
    var arrowOffset = 0;
    var anim = window.setInterval(function() {
        arrowHead.setPatterns([
                {offset: arrowOffset+'%', repeat: 0, symbol: new L.Symbol.ArrowHead({pixelSize: 15, polygon: false, pathOptions: {stroke: true}})}
        ])
        if(++arrowOffset > 100)
            arrowOffset = 0;

    }, 100);
    mylayergroup.addLayer(polyline).addTo(map);
}

非常感谢任何帮助。

4

2 回答 2

2 
    // add map polylines
function addPolyline(polyArray, colour) {
    console.log(polyArray.length);
    polyline = L.polyline(polyArray, {color: colour});
    var arrowHead = L.polylineDecorator(polyline).addTo(mylayergroup);
    var arrowOffset = 0;
    var anim = window.setInterval(function() {
        arrowHead.setPatterns([
                {offset: arrowOffset+'%', repeat: 0, symbol: new L.Symbol.ArrowHead({pixelSize: 15, polygon: false, pathOptions: {stroke: true}})}
        ])
        if(++arrowOffset > 100)
            arrowOffset = 0;

    }, 1000); /* HERE 1000 INSTEAD OF 100 */
    mylayergroup.addLayer(polyline).addTo(map);
}

对我来说工作得很好，速度很慢，即使你放大。它似乎比缩小更快是合乎逻辑的。还是我不明白你的问题，问候

于 2013-02-01T16:48:54.870 回答
0

这似乎在起作用，需要一些微调..谢谢

// add map polylines
function addPolyline(polyArray, colour) {
    console.log(polyArray.length);
    polyline = L.polyline(polyArray, {color: colour});
    var arrowHead = L.polylineDecorator(polyline).addTo(mylayergroup);
    var arrowOffset = 0;
var anim = function(){   
    if(map.getZoom() < 15 ) { 
        arrowHead.setPatterns([
            {offset: arrowOffset+'%', repeat: 0, symbol: new L.Symbol.ArrowHead({pixelSize: 15, polygon: false, pathOptions: {stroke: true}})}
        ])
        if(++arrowOffset > 100)
            arrowOffset = 0;        
        if(map.getZoom() <= 12) {
            setTimeout(anim, 100);
        } else if (map.getZoom() == 13) { 
            setTimeout(anim, 200);
        } else if (map.getZoom() == 14 ) { 
            setTimeout(anim, 300);
        }
    } else {
        arrowHead.setPatterns([
            {offset: 0, repeat: 100, symbol: new L.Symbol.ArrowHead({pixelSize: 10, polygon: false, pathOptions: {stroke: true}})}
        ])      
    }
}
anim();
    mylayergroup.addLayer(polyline);
}
于 2013-02-01T17:22:30.593 回答