该类继承自Vector，加入层时不是一下子加入的，而是慢慢变长，动态的轨迹效果。这里借助了别人写的一个算法Point.js（附件）。已知地理位置两点，求第三点，其在第一点到第二点之间且距离第一点X米。见代码中的这个方法getPointOnLineByDistance。
trms.DynamicEffectLineVector = OpenLayers.Class(OpenLayers.Feature.Vector, {
internal : 50, // 50ms
speed : 50, // 50m/50ms, 1000m/s
setVectorLayer : 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 point
if(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, // 50ms
speed : 5, // 5m/50ms, 100m/s
vectorLayer : null,
components : null,
currentPointIndex : null,
currentLineIndex : null,
startPoint : null,
stopPoint : null,
currentTempPoint : 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) {
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();
},
// 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.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 line
if(this.currentTempPoint.equals(currentLine.components[currentLine.components.length - 1])) {
// last line, end
if(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.01m
var 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);
}
});
分享到：
能简单说说怎么调用吗？ 我也有点看蒙了
相关推荐
资源下载不可直接运行，下载前可查看博客：https://blog.csdn.net/KK_bluebule/article/details/125694548 资源可供参考，因为只是一个vue页面和json测试数据
openlayers 加载面要素对象，map渲染，动态闪烁效果，望有帮助
1，openlayers3 +geosever2.13.1,加载shp 图层组。 2，绘制点闪烁、扩散、动画
花费了很久整理的ol2的代码直接可用附带3级切片
用JavaScript为OpenLayers.Marker的加上单击显示详细信息的功能 21 改良OpenLayers的MousePostion 25 使用OpenLayers实现一个在鼠标点击处添加标记的效果 27 openlayers 利用google maps的卫星地图 29 openLayers...
该脚本能够实现openlayers-Cesium二三维联动效果的功能
openlayers通过canvas绘制路线，动态模拟动态起点到终点的过程
OpenLayers地图要素tooltip[文字提示]，对要素进行动态提示
openlayers 风场渲染效果，放置风场数据即可使用
openlayers很多特效demo openlayers很多特效demo openlayers很多特效demo
OpenLayers OpenLayers Beginner's Guide
openlayers3中，显示点要素。当鼠标移动到要素上，高亮显示要素，并弹出要素信息。
在openlayers中制作危险源标识可以需要动态扩散的点（有很多种方法 可以加入jpg动图，也可以写css动画） 这里提供一种思路用openlayer自带的方法写 并给予详细的方法注释供初学者学习 （所有jar包都是在线的代码可以...
openlayers 实现在地图上添加文字标注。为图片注记添加文本标签
https://blog.csdn.net/caozl1132/article/details/88038590,详细描述请点击；
主要为大家详细介绍了vue使用openlayers实现移动点动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers开发工具 openlayers api openlayers openlayers api 开发工具 支持多种地图加载展示
openlayers 4.2 加载百度地图（在线 离线） 高德地图（在线 离线）
openLayers的缩放级别