绘制动画openlayers线条字符串路径

Drawing animated openlayers linestring path

本文关键字：字符串 路径 动画 openlayers 绘制      更新时间：2024-03-21

我在http://jerusalem.com/map#/tour/the_way_of_the_cross/location/abu_jafar，有人知道如何使用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);

您可以通过一次只绘制线的一部分来设置它的动画。这里有一种方法可以做到：

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演示来演示这一点。

相关文章：