Я добавляю полилинию к карте и использую плагин декоратора полилинии, чтобы добавить стрелку направления движения к полилинии. Затем с помощью 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);
}

Любая помощь очень ценится.

1
Vince Lowe 1 Фев 2013 в 20:39

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

Работает очень хорошо для меня, скорость медленная, даже если вы увеличиваете масштаб. Логично, что кажется, что это намного быстрее, чем уменьшенное. Или я не понял твою проблему, привет

2
Roman Holzner 1 Фев 2013 в 16:48

Это, кажется, делает свое дело, нуждается в некоторой подстройке .. спасибо

// 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);
}
0
Vince Lowe 1 Фев 2013 в 17:35