openlayers-轨迹回放

var vectorLayer, markers, lineFeature;
var px, py;
var x = 0;
function startReplay() {
//feature style
var style_green = {
strokeColor: "#339933",
strokeOpacity: 1,
strokeWidth: 3,
pointRadius: 6,
pointerEvents: "visiblePainted"
};

px = Math.random() * (122 - 121 + 0.001) + 121;
py = Math.random() * (30 - 29 + 0.001) + 29;
var lonlat = new OpenLayers.LonLat(px, py);
var zoom = map.getZoom();
map.setCenter(lonlat, zoom);

vectorLayer = new OpenLayers.Layer.Vector("route");
map.addLayer(vectorLayer);

markers = new OpenLayers.Layer.Markers("marker");
map.addLayer(markers);

var imgUrl = "Images/car.png";
var icon = new OpenLayers.Icon(imgUrl);
var marker = new OpenLayers.Marker(lonlat, icon);
markers.addMarker(marker);

lineFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.LineString(lonlat.lon, lonlat.lat), null, style_green);
vectorLayer.addFeatures([lineFeature]);

fn();

}

function fn() {
if (x < 20) {
px = Math.random() * (122 - 121 + 0.001) + 121;
py = Math.random() * (30 - 29 + 0.001) + 29;
var lonlat = new OpenLayers.LonLat(px, py);
var zoom = map.getZoom();
map.setCenter(lonlat, zoom);

var newPoint = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
lineFeature.geometry.addPoint(newPoint);
vectorLayer.drawFeature(lineFeature);

markers.clearMarkers();
var imgUrl = "Images/car.png";
var icon = new OpenLayers.Icon(imgUrl);
var marker = new OpenLayers.Marker(lonlat, icon);
markers.addMarker(marker);
x++;
setTimeout(fn, 1000);
}
}