[OpenLayers-Users] Dynamic display line follow line route

[shane_china]

Here is a more completed version, support state management and event
notification. To be continued to support MultiLine and polygon...


trms.DynamicEffectLineVector = OpenLayers.Class(OpenLayers.Feature.Vector, {

	internal : 50, // 50ms
	
	speed : 50, // 50m/50ms, 1000m/s
	
	vectorLayer : null,
	
	components : null,
	
	startPointIndex : null,
	
	startPoint : null,
	
	stopPoint : null,
	
	currentPoint : null,
	
	timer : null,
	
	// event, fire when new point added
	pointAdded : null,
	
	// 'start', 'run', 'stop', 'end'
	dynamicState : 'start',
	
	// here state management
	orders : {
			
		start : {
			guardFn : function() {
				return this.dynamicState != 'start';
			},
			changeState : function() {
				this.dynamicState = 'run'; // start ---> run
			}
		},
		
		stop : {
			guardFn : function() {
				return this.dynamicState != 'run';
			},
			changeState : function() {
				this.dynamicState = 'stop'; // run ---> stop
			}
		},
		
		continueFn : {
			guardFn : function() {
				return this.dynamicState != 'stop';
			},
			changeState : function() {
				this.dynamicState = 'run'; // stop ---> run
			}
		},
		
		restart : {
			guardFn : function() {
				return this.dynamicState == 'start';
			},
			changeState : function() {
				this.dynamicState = 'run'; // * except start ---> run
			}
		}
	},
	
	initialize : function(geom, attributes) {
		
		var style = this.getStyle();
		style.label = attributes.name;
		
		OpenLayers.Feature.Vector.prototype.initialize.apply(this, [geom,
attributes, style]);
		
		this.components = this.geometry.components;
		
		this.initVariable();
	},
	
	// public
	setVectorLayer : function(vectorLayer) {
		this.vectorLayer = vectorLayer;
	},
	
	// public
	executeOrder : function(order) { // start, stop, continueFn, restart
		
		var guardFn = this.orders[order].guardFn.getBindToFn(this);
		var changeState = this.orders[order].changeState.getBindToFn(this);

		if(guardFn())
			return;

		this[order]();
		
		changeState();
	},
	
	/*-- private methods
-------------------------------------------------------------------------------*/
	
	initVariable : function() {
		this.startPointIndex = 0;
		this.startPoint = this.components[this.startPointIndex];
		this.stopPoint = this.components[this.startPointIndex + 1];
		this.currentPoint = this.startPoint;
	},
	
	start : function() {
	
		this.geometry = new OpenLayers.Geometry.LineString(this.components[0],
this.components[0]);
		this.vectorLayer.addFeatures([this]);
		
		this.timeFn();
	},
	
	stop : function() {
		clearTimeout(this.timer);
	},
	
	continueFn : function() {
		this.timeFn();
	},
	
	restart : function() {
		
		this.stop();
		
		this.vectorLayer.removeFeatures([this]);
		this.initVariable();
		
		this.geometry = new OpenLayers.Geometry.LineString(this.components[0],
this.components[0]);
		this.vectorLayer.addFeatures([this]);
		
		this.timeFn();
	},
	
	timeFn : function() {
	
		this.currentPoint = this.getNextPoint(this.currentPoint, this.stopPoint);
		this.geometry.addPoint(this.currentPoint);
		this.vectorLayer.drawFeature(this);
		
		if(this.pointAdded) {
			this.pointAdded(this.currentPoint); // fire event
		}
		
		if(this.currentPoint.equals(this.stopPoint)) {
			
			// is end point
			if(this.currentPoint.equals(this.components[this.components.length - 1]))
{
				this.dynamicState = 'end';
				return;
			}
			
			this.startPoint = this.stopPoint;
			this.startPointIndex++;
			this.stopPoint = this.components[this.startPointIndex + 1];
		}
		
		this.timer = setTimeout(this.timeFn.getBindToFn(this), this.internal);

	},
	
	getNextPoint : function(currentPoint, stopPoint) {
		
		var nextPoint = this.getPointOnLineByDistance(currentPoint, stopPoint,
this.speed);
		
		var x_current_stop = Math.abs(stopPoint.x - currentPoint.x);
		var x_current_next = Math.abs(nextPoint.x - currentPoint.x);
		var y_current_stop = Math.abs(stopPoint.y - currentPoint.y);
		var y_current_next = Math.abs(nextPoint.y - currentPoint.y);
		
		if(x_current_next >= x_current_stop || y_current_next > y_current_stop) {
			return stopPoint;
		}
		
		return nextPoint;
	},
	
	getPointOnLineByDistance : function(p1, p2, distance) {
		
		var ppp1 = new Point(p1.x, p1.y);
		var ppp2 = new Point(p2.x, p2.y);
		
		var bearing = ppp1.geoBearingTo(ppp2);
		var ppp3 = ppp1.geoWaypoint(distance / 1000, bearing);
		
		return new OpenLayers.Geometry.Point(ppp3.x, ppp3.y);
	},
	
	getStyle : function() {
		
		var style = OpenLayers.Util.extend({},
OpenLayers.Feature.Vector.style['default']);
		
		style.strokeColor  = 'red';
		style.strokeWidth = 3;
		
		style.fontColor = 'green';
		style.fontSize = '15px';
		style.fontFamily = '楷体_GB2312';
		style.fontWeight = 'bold';
		style.labelAlign = 'rm';
		
		return style;
	}
});



Julien-Samuel Lacroix wrote:
> 
> Hi,
> 
> I don't recall to have seen any example of this before. You can probably 
> start looking here [1] for vector construction and here [2] for 
> JavaScript timing event. Start really simple with only 2 points and then 
> try to include your multiline. If you have it working at some point let 
> us know. I would be curious to see it working.
> 
> [1] http://openlayers.org/dev/examples/vector-features.html
> 
> [2] http://www.w3schools.com/js/js_timing.asp
> 
> Julien
> 
> 
> shane_china wrote:
>> Is there anyone can help me? thank you.
> 
> -- 
> Julien-Samuel Lacroix
> Mapgears
> http://www.mapgears.com/
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
> 
> 

-- 
View this message in context: http://n2.nabble.com/Dynamic-display-line-follow-line-route-tp3279524p3301004.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.