該類繼承自Vector，加入層時不是一下子加入的，而是慢慢變長，動態的軌跡效果。這里借助了別人寫的一個算法Point.js（附件）。已知地理位置兩點，求第三點，其在第一點到第二點之間且距離第一點X米。見代碼中的這個方法getPointOnLineByDistance。

trms.DynamicEffectLineVector = OpenLayers.Class(OpenLayers.Feature.Vector, {internal : 50, // 50msspeed : 50, // 50m/50ms, 1000m/ssetVectorLayer : function(vectorLayer) {var components = this.geometry.components;this.geometry = new OpenLayers.Geometry.LineString(components[0], components[0]);vectorLayer.addFeatures([this]);var startPointIndex = 0;var startPoint = components[startPointIndex];var stopPoint = components[startPointIndex + 1];var currentPoint = components[startPointIndex];var nextPoint;var t = this;var fn = function() {nextPoint = t.getNextPoint(currentPoint, stopPoint);t.geometry.addPoint(nextPoint);vectorLayer.drawFeature(t);currentPoint = nextPoint;if(currentPoint.equals(stopPoint)) {// is end pointif(stopPoint.equals(components[components.length - 1])) {return;}startPoint = stopPoint;startPointIndex++;stopPoint = components[startPointIndex + 1];}setTimeout(fn, t.internal);};fn();},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);} }); ?

這下面的代碼是一個完整的封裝版本，包括狀態管理、事件通知和樣式等。下面用到的方法getBindToFn 請見我的這篇文章http://xiaying4415139-163-com.iteye.com/blog/430675

/*** support geom: MultiLineString*/ trms.DynamicEffectLineVector = OpenLayers.Class(OpenLayers.Feature.Vector, {internal : 50, // 50msspeed : 5, // 5m/50ms, 100m/svectorLayer : null,components : null,currentPointIndex : null,currentLineIndex : null,startPoint : null,stopPoint : null,currentTempPoint : null,timer : null,// event, fire when new point addedpointAdded : null,// 'start', 'run', 'stop', 'end'dynamicState : 'start',// here state managementorders : {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) {if(geom instanceof OpenLayers.Geometry.LineString) {geom = new OpenLayers.Geometry.MultiLineString([geom]);}var style = this.getStyle();style.label = attributes.name;style.strokeColor = attributes.color;style.fontColor = attributes.color;OpenLayers.Feature.Vector.prototype.initialize.apply(this, [geom, attributes, style]);this.components = this.geometry.components;this.initVariable();},// publicsetVectorLayer : function(vectorLayer) {this.vectorLayer = vectorLayer;},// publicexecuteOrder : function(order) { // start, stop, continueFn, restartvar 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.currentPointIndex = 0;this.currentLineIndex = 0;this.startPoint = this.components[0].components[0];this.stopPoint = this.components[0].components[1];this.currentTempPoint = this.startPoint;},start : function() {var line1 = new OpenLayers.Geometry.LineString(this.startPoint, this.startPoint);this.geometry = new OpenLayers.Geometry.MultiLineString([line1]);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.start();},timeFn : function() {this.currentTempPoint = this.getNextPoint(this.currentTempPoint, this.stopPoint);this.geometry.components[this.currentLineIndex].addPoint(this.currentTempPoint);this.vectorLayer.drawFeature(this);if(this.currentTempPoint.equals(this.stopPoint)) { var currentLine = this.components[this.currentLineIndex];// last point on current lineif(this.currentTempPoint.equals(currentLine.components[currentLine.components.length - 1])) {// last line, endif(this.currentLineIndex == this.components.length - 1) {this.dynamicState = 'end';return;}this.currentLineIndex++;this.currentPointIndex = 0;this.startPoint = this.components[this.currentLineIndex].components[0];this.stopPoint = this.components[this.currentLineIndex].components[1];this.currentTempPoint = this.startPoint;var newLine = new OpenLayers.Geometry.LineString(this.startPoint, this.startPoint);this.geometry.addComponent(newLine);} else {this.startPoint = this.stopPoint;this.currentPointIndex++;this.stopPoint = this.components[this.currentLineIndex].components[this.currentPointIndex + 1];}}this.timer = setTimeout(this.timeFn.getBindToFn(this), this.internal);if(this.pointAdded) {this.pointAdded(this.currentTempPoint); // fire event}},getNextPoint : function(currentTempPoint, stopPoint) {var nextPoint = this.getPointOnLineByDistance(currentTempPoint, stopPoint, this.speed);var x_current_stop = Math.abs(stopPoint.x - currentTempPoint.x);var x_current_next = Math.abs(nextPoint.x - currentTempPoint.x);var y_current_stop = Math.abs(stopPoint.y - currentTempPoint.y);var y_current_next = Math.abs(nextPoint.y - currentTempPoint.y);// deviation 0.000001 lonlat, about 0.01mvar deviation = 1e-7;if(x_current_next - x_current_stop > deviation || y_current_next - y_current_stop > deviation) {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.strokeWidth = 3;style.fontSize = '15px';style.fontFamily = '楷體_GB2312';style.fontWeight = 'bold';style.labelAlign = 'rm';return style;} });trms.DynamicEffectLineVectorToolbar = Ext.extend(Ext.Toolbar, {dynamicVector : null,initComponent : function() {trms.DynamicEffectLineVectorToolbar.superclass.initComponent.call(this);var t = this;var btnStart = new Ext.Button({text : '開始',handler : function() {t.dynamicVector.executeOrder('start');}});var btnStop = new Ext.Button({text : '停止',handler : function() {t.dynamicVector.executeOrder('stop');}});var btnContinue = new Ext.Button({text : '繼續',handler : function() {t.dynamicVector.executeOrder('continueFn');}});var btnRestart = new Ext.Button({text : '重新開始',handler : function() {t.dynamicVector.executeOrder('restart');}});var btnDestroy = new Ext.Button({text : '清除',handler : function() {t.dynamicVector.destroy();}});this.add(btnStart);this.add(btnStop);this.add(btnContinue);this.add(btnRestart);this.add(btnDestroy);} }); ?

?

總結

以上是生活随笔為你收集整理的OpenLayers动画效果显示路线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。