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

如何在Open层3中的cordinates之间设置vechile图标的动画

1 个答案: