Маркер или оверлейная движущаяся анимация, плавно движущаяся в openlayers 3

Question

Я создал plunkr, который имеет движущийся маркер, как автомобиль.

var olview = new ol.View({ 
    center: [-5484111.13, -1884437.22], 
    zoom: 18, 
    minZoom: 2, 
    maxZoom: 20 
}); 

var osm = new ol.source.OSM(); 

var lineString = new ol.geom.LineString([]); 

var map = new ol.Map({ 
    target: 'map', 
    view: olview, 
    renderer: 'canvas', 
    layers: [ 
     new ol.layer.Tile({ 
      source: osm, 
      opacity: 0.6 
     }) 
    ] 
}); 

var car = document.getElementById('geo1'); 

var marker = new ol.Overlay({ 
    positioning: 'center-center', 
    offset: [0, 0], 
    element: car, 
    stopEvent: false 
}); 

map.addOverlay(marker); 


var path = [ 
    [-5484101.57, -1884475.44], 
    [-5484114.71, -1884432.74], 
    [-5484117.70, -1884416.62], 
    [-5484106.95, -1884392.28] 
]; 

lineString.setCoordinates(path); 

map.once('postcompose', function(event) { 
    console.info('postcompose'); 
    interval = setInterval(animation, 500); 
}); 

var i = 0, interval; 
var animation = function(){ 

    if (i == path.length){ 
     i = 0; 
    } 

    marker.setPosition(path[i]); 
    i++; 
}; 

Это написано в openlayers, я хочу, чтобы он выглядел гладким при движении, подобном этому.

https://github.com/terikon/marker-animate-unobtrusive

Я полный новичок в OpenLayers, кто-то может помочь мне с этим? Благодаря!

Answer 1

Я сделал три теста. Первый и второй - чистые ol3, а последние - tween.js.

Я использую Arc.js, чтобы создать путь.

first example использует setInterval.

second example использует window.requestAnimationFrame.

И the last с Tween.js.

Ваш пример не работает гладко, потому что это всего лишь несколько координат.

Обратите внимание, что интеграция Tween.js не является интеграцией. Это всего лишь сложная манипуляция CSS.