Анимация движения маркера или наложения плавно перемещается в openlayers 3

Я создал 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, может кто-нибудь помочь мне с этим? Спасибо!


person The Bassman    schedule 11.06.2015    source источник


Ответы (1)


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

Я использую Arc.js для создания пути.

В первом примере используется setInterval.

Во втором примере используется window.requestAnimationFrame.

И последний с Tween.js.

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

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

person Jonatas Walker    schedule 13.06.2015
comment
@dilpeshjain Спасибо, что поделились. Сейчас они исправлены. - person Jonatas Walker; 01.02.2017