Javascript 绘制动画openlayers线条字符串路径
我在上看到了一个令人印象深刻的映射示例,有人知道如何使用openlayers在点的绘制路径上创建类似的动画吗 下面的小提琴显示了线串,但我需要的是能够动画线串本身,使字符串不直接绘制Javascript 绘制动画openlayers线条字符串路径,javascript,jquery,openlayers,Javascript,Jquery,Openlayers,我在上看到了一个令人印象深刻的映射示例,有人知道如何使用openlayers在点的绘制路径上创建类似的动画吗 下面的小提琴显示了线串,但我需要的是能够动画线串本身,使字符串不直接绘制 var map = new OpenLayers.Map( 'map', {theme:null, controls:[new OpenLayers.Control.Navigation()]} ); layer = new OpenLayers.La
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
是一个回调,将在动画完成时执行
这里有一个例子来演示这一点。你好,Peter,我想知道JSFIDLE是否仍然有效,或者我必须做一些特殊的事情来观看演示?我只在右下角看到一个绿色边框框。@JuanCarlosOropeza谢谢你的通知。我更新了JSFIDLE。问题是OpenLayers脚本的外部链接已断开。@PeterOlson您好,我们如何使用您的代码,同时使用一组行字符串,我们只能使用几个点而不是很多点