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
> [email protected]
> 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.
_______________________________________________
Users mailing list
[email protected]
http://openlayers.org/mailman/listinfo/users
