绘制动画openlayers线串路径

我在http://jerusalem.com/map#!/tour/the_way_of_the_cross/location/abu_jaafar上看过一个令人印象深刻的映射示例，是否有人如何使用openlayers在绘制的路径上绘制类似的动画？

以下小提琴显示了线串http://jsfiddle.net/pwuVz/58/但我需要的是能够为线串本身设置动画，以便不直接绘制字符串。

var map = new OpenLayers.Map( 'map', {theme:null, controls:[new OpenLayers.Control.Navigation()]} ); layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} ); map.addLayer(layer); map.setCenter([3, 49], 5); var startPt=new OpenLayers.Geometry.Point( 2, 45); var endPt=new OpenLayers.Geometry.Point(7,55); //make the line: var line=new OpenLayers.Geometry.LineString([startPt, endPt]); //style var style={strokeColor:"#0500bd", strokeWidth:15, strokeOpacity: 0.5, strokeColor: '#0000ff'}; //make vector var fea=new OpenLayers.Feature.Vector(line, {}, style); //make vectorLayer var vec= new OpenLayers.Layer.Vector(); //add the feature vec.addFeatures([fea]); //add to map map.addLayer(vec); setTimeout(function() { var startPt=new OpenLayers.Geometry.Point( 7, 55); var endPt=new OpenLayers.Geometry.Point(13,52); //make the line: var line=new OpenLayers.Geometry.LineString([startPt, endPt]); //style var style={strokeColor:"#0500bd", strokeWidth:15, strokeOpacity: 0.5, strokeColor: '#0000ff'}; //make vector var fea=new OpenLayers.Feature.Vector(line, {}, style); //make vectorLayer var vec= new OpenLayers.Layer.Vector(); //add the feature vec.addFeatures([fea]); //add to map map.addLayer(vec); }, 2000); 

Answer 1

您可以通过一次仅绘制线条的一部分来为其设置动画。 这是你可以做到的一种方式：

 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); } 

time参数指定动画要持续多长时间（以毫秒为单位）， steps指定要将动画分成多少步。 fn是动画完成时将执行的回调。

这是一个演示这个的jsFiddle演示 。