javascript - 如何在 Openlayers 3 中的坐标之间制作车辆图标的动画

Question

我需要有关从第一点开始在以下给定坐标之间制作汽车图标动画的指导。我正在使用下面的代码和数据点，但无法获得所需的结果。

var dataSource1 = [{
    "title": 'Duero',
    "lat": 28.631429, 
    "lng": 77.216585,
    "description": 'This is Duero'
}, {
    "title": 'Reyes Catolicos',
    "lat": 28.629364,   
    "lng": 77.211872,
    "description": 'This is Reyes Catolicos'
}, {
    "title": 'Guadarrama',
    "lat": 28.623032, 
    "lng": 77.197852,
    "description": 'This is Guadarrama'
}];

     var iconGeometry = ol.proj.transform([centerPosition.lng, centerPosition.lat], 'EPSG:4326', 'EPSG:3857')

        var iconFeature = new ol.Feature({
            geometry: iconGeometry
        });

        iconFeature.setStyle(vehicleStyle);
        //var marker = $scope.createMarker(ol.proj.transform([centerPosition.lng, centerPosition.lat], 'EPSG:4326', 'EPSG:3857'), vehicleStyle);

        mapVectorSource.addFeature(iconFeature);

        var markers = [];
        angular.forEach($scope.dataPoints, function (value, key) {
            markers.push({ x: value.lat, y: value.lng });
        });

        var i = 0, interval;
        interval = setInterval(function () {
            if (i == markers.length) {
                i = 0;
            }

            iconGeometry.setCoordinates(new ol.geom.Point([markers[i].y, markers[i].x]));

            i++;
        }, 2000);

Answer 1

我建议您在 postcompose 事件中执行动画，如下例所示:http://openlayers.org/en/master/examples/feature-move-animation.html