《Openlayers实例-轨迹回放》由会员分享，可在线阅读，更多相关《Openlayers实例-轨迹回放（4页珍藏版）》请在金锄头文库上搜索。
1、Openlayers实例-轨迹回放年前德地图做过机版的轨迹回放，准备Openlayers来实现个web版的轨迹回放，轨迹回放的原理相对较简单，先将车辆的轨迹添加在地图上，然后再添加个轨迹点，设置个速度，让轨迹点在线上移动。实现式如下所：添加轨迹由于没有数据，在地图上随便找了些点于测试。/添加轨迹线和起始点 addLineWithPoints(coordinates) var geom = new ol.geom.LineString(coordinates); /创建轨迹Feature var feature = new ol.Feature( geometry:geom ) /创建量图层 v
2、ar vectorLayer = LayerUtil.vectorLayer() /添加轨迹 vectorLayer.getSource().addFeature(feature) /设置样式 vectorLayer.setStyle(this.getStyle() this.map.addLayer(vectorLayer) /添加起点 var startFeature = new ol.Feature( geometry:new ol.geom.Point(coordinates0) ) startFeature.setStyle(new ol.style.Style( text:new
3、ol.style.Text( font:15px sans-serif, text:起点, offsetY:-10 ) ) vectorLayer.getSource().addFeature(startFeature) /添加终点 var endFeature = new ol.Feature( geometry:new ol.geom.Point(coordinatescoordinates.length - 1) ) endFeature.setStyle(new ol.style.Style( text:new ol.style.Text( font:15px sans-serif,
4、text:终点, offsetY:-10 ) ) vectorLayer.getSource().addFeature(endFeature) /添加车，这使个圆点代替 var carFeature = new ol.Feature( geometry:new ol.geom.Point(coordinates0) ) vectorLayer.getSource().addFeature(carFeature) 添加的后效果如下所：轨迹.png轨迹回放添加好轨迹后，就要实现轨迹回放了，直接看代码吧，代码中有注释看起来也便，所有的代码都在下边：class TrackPlayback constr
5、uctor(map) this.map = map this.animating = false/是否结束 this.speed = 1/默认速度 this.now/当前时间 getStyle() var style = new ol.style.Style( fill: new ol.style.Fill(/填充样式 color: rgba(255, 255, 255, 0.2) ), stroke: new ol.style.Stroke(/边框样式 color: #ffcc33, width: 2, lineCap:square ), image: new ol.style.Circle
6、(/ 点样式使个圆 radius: 7, fill: new ol.style.Fill( color: #ffcc33 ) ) ); return style; /添加轨迹线和起始点 addLineWithPoints(coordinates) this.routeLength = coordinates.length this.routeCoords = coordinates var geom = new ol.geom.LineString(coordinates); /创建轨迹Feature var feature = new ol.Feature( geometry:geom )
7、/创建量图层 var vectorLayer = LayerUtil.vectorLayer() /添加轨迹 vectorLayer.getSource().addFeature(feature) /设置样式 /设置样式 vectorLayer.setStyle(this.getStyle() this.map.addLayer(vectorLayer) /添加起点 var startFeature = new ol.Feature( geometry:new ol.geom.Point(coordinates0) ) startFeature.setStyle(new ol.style.St
8、yle( text:new ol.style.Text( font:15px sans-serif, text:起点, offsetY:-10 ) ) vectorLayer.getSource().addFeature(startFeature) /添加终点 var endFeature = new ol.Feature( geometry:new ol.geom.Point(coordinatescoordinates.length - 1) ) endFeature.setStyle(new ol.style.Style( text:new ol.style.Text( font:15p
9、x sans-serif, text:终点, offsetY:-10 ) ) vectorLayer.getSource().addFeature(endFeature) /添加车，这使个圆点代替 var carFeature = new ol.Feature( geometry:new ol.geom.Point(coordinates0) ) this.geoMarker = carFeature vectorLayer.getSource().addFeature(carFeature) this.vectorLayer = vectorLayer /设置速度 setSpeed(spee
10、d) this.speed = speed /开始播放 play() if (this.animating) this._stopAnimation(false); else /删除开始添加的点 this.vectorLayer.getSource().removeFeature(this.geoMarker) this.animating = true/设置为已经开始动画 this.now = new Date().getTime()/获取当前时间 var self = this /监听图层渲染后的事件 this.vectorLayer.on(postrender, function(eve
11、nt) self._moveFeature(event) ); /停 stop() this._stopAnimation(true); /移动要素 _moveFeature(event) /获取渲染图层的画布 var vectorContext = ol.render.getVectorContext(event); /获取当前渲染帧状态的对象 var frameState = event.frameState; if (this.animating) /渲染时的时间减去开始播放轨迹的时间 var elapsedTime = frameState.time - this.now; var i
12、ndex = Math.round(this.speed * elapsedTime / 1000); console.log(index) if (index = this.routeLength) this._stopAnimation(true); return; /取出坐标点重新绘制 var currentPoint = new ol.geom.Point(this.routeCoordsindex); var feature = new ol.Feature(currentPoint); vectorContext.drawFeature(feature,this.getStyle(
13、); this.map.render(); _stopAnimation(ended) this.animating = false; var coord = ended ? this.routeCoordsthis.routeLength - 1 : this.routeCoords0; var geometry = this.geoMarker.getGeometry(); geometry.setCoordinates(coord); this.vectorLayer.getSource().addFeature(this.geoMarker) this.vectorLayer.un(postrender, this._moveFeature); 个博客
