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

私にとっては非常にうまく機能します。ズームインしても速度は遅くなります。ズームアウトするよりもはるかに速いように見えるのは当然です。または私はあなたの問題を理解していませんでした、Greets

于 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 に答える