如何在OpenLayers 3地图中的2个点之间设置线串的动画？

Question

我想在坐标数组中的多个点之间画一条线。 我的代码如下：

<button onclick="drawAnimatedLine(new ol.geom.Point(6210355.674114,2592743.9994331785), new ol.geom.Point(8176927.537835015,2255198.08252584), 50, 2000);">Draw Line</button>

我的js看起来像是：

 function drawAnimatedLine(startPt, endPt, steps, time, fn) {
            var style = {
                strokeColor: "#0500bd",
                strokeWidth: 15,
                strokeOpacity: 0.5,
                strokeColor: '#0000ff'
            };
            var directionX = (endPt.x - startPt.x) / steps;
            var directionY = (endPt.y - startPt.y) / steps;
            var i = 0;
            var prevLayer;
            var lineDraw = setInterval(function () {
                console.log("Inside Animate Line");
                if (i > steps) {
                    clearInterval(lineDraw);
                    if (fn)
                        fn();
                    return;
                }
                var newEndPt = new ol.geom.Point(startPt.x + i * directionX, startPt.y + i * directionY);
                var line = new ol.geom.LineString([startPt, newEndPt]);
                var fea = new ol.Feature({
                    geometry:line,
                    style: style
                });
                var vec = new ol.layer.Vector();
                vec.addFeatures([fea]);
                map.addLayer(vec);
                if(prevLayer)
                {
                    map.removeLayer(prevLayer);
                }
                prevLayer = vec;
                i++;
            }, time / steps);
        }

注意：坐标将是动态的，但是为了测试，我已经按下了按钮的样本数据。请尽快尝试解决此问题。