Javascript 如何绘制动画openlayers线串路径？

我正在使用openlaers映射api。我想在我的路径中显示动画路线，如下图所示。怎么做？多谢各位

这是我的Java脚本，我从XML文件中获取数据

<script type="text/javascript">                          
                var zoom=13

        var map; //complex object of type OpenLayers.Map

        function init() {
            map = new OpenLayers.Map ("map", {
                controls:[
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.LayerSwitcher(),
                    new OpenLayers.Control.Attribution()],
                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                maxResolution: 156543.0399,
                numZoomLevels: 19,
                units: 'm',
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );

            // Define the map layer
            // Here we use a predefined layer that will be kept up to date with URL changes
            layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
            map.addLayer(layerMapnik);
            layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
            map.addLayer(layerCycleMap);
            layerMarkers = new OpenLayers.Layer.Markers("Markers");
            map.addLayer(layerMarkers);

        //   Add the Layer with the GPX Track
            var lgpx = new OpenLayers.Layer.Vector("Descrizione del layer", {
                strategies: [new OpenLayers.Strategy.Fixed()],
                protocol: new OpenLayers.Protocol.HTTP({
                    url: "c.php",
                    format: new OpenLayers.Format.GPX()
                }),
                style: {strokeColor: "blue", strokeWidth: 5, strokeOpacity: 0.5},

            projection: new OpenLayers.Projection("EPSG:4326")

            });



            map.addLayer(lgpx);

        }

    </script>

变焦值=13
var映射//OpenLayers.Map类型的复杂对象
函数init（）{
map=新的OpenLayers.map（“map”{
控制：[
新建OpenLayers.Control.Navigation（），
新建OpenLayers.Control.PanZoomBar（），
新建OpenLayers.Control.LayerSwitcher（），
新建OpenLayers.Control.Attribute（），
maxExtent:new OpenLayers.Bounds（-20037508.34，-20037508.3420037508.3420037508.34），
最大分辨率：156543.0399，
numZoomLevels:19，
单位：'m'，
投影：新OpenLayers.projection（“EPSG:900913”），
displayProjection:new OpenLayers.Projection（“EPSG:4326”）
} );
//定义地图图层
//在这里，我们使用一个预定义的层，该层将随着URL更改而保持最新
layerMapnik=新的OpenLayers.Layer.OSM.Mapnik（“Mapnik”）；
map.addLayer（layerMapnik）；
layerCycleMap=新的OpenLayers.Layer.OSM.CycleMap（“CycleMap”）；
map.addLayer（layerCycleMap）；
layerMarkers=新的OpenLayers.Layer.Markers（“Markers”）；
地图。添加图层（图层标记）；
//添加带有GPX轨迹的图层
var lgpx=new OpenLayers.Layer.Vector（“descripione del Layer”{
策略：[新建OpenLayers.Strategy.Fixed（）]，
协议：新OpenLayers.protocol.HTTP({
网址：“c.php”，
格式：新建OpenLayers.format.GPX（）
}),
样式：{strokeColor:“蓝色”，strokeWidth:5，strokeOpacity:0.5}，
投影：新OpenLayers.投影（“EPSG:4326”）
});
map.addLayer（lgpx）；
}

请尝试下面的答案。这似乎很相似

以下是答案的重要部分：

time

参数指定希望动画持续多长时间 （以毫秒为单位），并且

步骤指定所需的步骤数
将动画划分为多个部分
fn
是将执行的回调
当动画完成时

function drawAnimatedLine(startPt, endPt, style, steps, time, fn) {
    var directionX = (endPt.x - startPt.x) / steps;
    var directionY = (endPt.y - startPt.y) / steps;
    var i = 0;
    var prevLayer;
    var ivlDraw = setInterval(function () {
        if (i > steps) {
            clearInterval(ivlDraw);
            if (fn) fn();
            return;
        }
        var newEndPt = new OpenLayers.Geometry.Point(startPt.x + i * directionX, startPt.y + i * directionY);
        var line = new OpenLayers.Geometry.LineString([startPt, newEndPt]);
        var fea = new OpenLayers.Feature.Vector(line, {}, style);
        var vec = new OpenLayers.Layer.Vector();
        vec.addFeatures([fea]);
        map.addLayer(vec);
        if(prevLayer) map.removeLayer(prevLayer);
        prevLayer = vec;
        i++;
    }, time / steps);
}