OpenLayers3实现轨迹回放需要动画操作，官网上的例子用的是postcompose，但是还可以使用javascript中setInterval和setTime.

我的例子是按官网上来的http://openlayers.org/en/latest/examples/feature-move-animation.html?q=anim

增加了过程中能够调整速度和停止的功能。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

	<link rel="stylesheet" type="text/css" href="css/ol.css"/>

	<script src="js/ol.js" type="text/javascript" charset="utf-8"></script>

	<script src="js/jquery-3.1.0.min.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

	<div id="map" style="width: 100%;height: 700px;"></div>

	<label for="speed">

      speed: 

      <input id="speed" type="range" min="10" max="999" step="10" value="60">

    </label>

    <button id="start-animation">开始</button>

	<script type="text/javascript">

    var routeCoords = [];

   for(var i = 0;i <= 800; i++){

	   routeCoords.push([115, 37+0.005*i]);

   }

    var route = new ol.geom.LineString(routeCoords);

    var routeLength = routeCoords.length;

    var routeFeature = new ol.Feature({

      type: 'route',

      geometry: route

    });

    var geoMarker = new ol.Feature({

      type: 'geoMarker',

      geometry: new ol.geom.Point(routeCoords[0])

    });

    var startMarker = new ol.Feature({

      type: 'icon',

      geometry: new ol.geom.Point(routeCoords[0])

    });

    var endMarker = new ol.Feature({

      type: 'icon',

      geometry: new ol.geom.Point(routeCoords[routeLength - 1])

    });

    var styles = {

      'route': new ol.style.Style({

        stroke: new ol.style.Stroke({

          width: 6, color: [237, 212, 0, 0.8]

        })

      }),

      'icon': new ol.style.Style({

        image: new ol.style.Icon({

          anchor: [0.5, 1],

          scale: 0.3,

          src: 'images/flag_rightgreen_.png'

        })

      }),

      'geoMarker': new ol.style.Style({

    	  image: new ol.style.Icon({

              anchor: [0.5, 0.5],

              scale: 0.2,

              src: 'images/taxi.png'

            })

      })

    };

    var animating = false;

    var speed, now;

    var startButton = document.getElementById('start-animation');

    var vectorLayer = new ol.layer.Vector({

      source: new ol.source.Vector({

        features: [routeFeature, geoMarker, startMarker, endMarker]

      }),

      style: function(feature) {

        // hide geoMarker if animation is active

        if (animating && feature.get('type') === 'geoMarker') {

          return null;

        }

        return styles[feature.get('type')];

      }

    });

	var map = new ol.Map({

		loadTilesWhileAnimating: true,

        layers: [

          new ol.layer.Tile({

            source: new ol.source.OSM()

          }),

          vectorLayer

        ],

        target: 'map',

        view: new ol.View({

          projection: 'EPSG:4326',

          center: [115, 37],

          zoom: 6

        })

    });

    $("#speed").on('change',function(){

    	speed = $("#speed").val();

    })

    var  traversed = 0;//走过的路程

    var elapsedTime = 0; //用过的时间

    var  retime = 0; //保存上次运动所用的时间

    var moveFeature = function(event) {

      var frameState = event.frameState;

      if (animating) {

    	  if(retime == 0){

    		  elapsedTime = frameState.time - now;

    	  }else{

    		  elapsedTime = frameState.time - retime;

    	  }

    	  retime = frameState.time ; 

        //计算路程

        var index = Math.round(speed * elapsedTime / 1000);

        traversed += index;

        //完成 ， 结束

        if (traversed >= routeLength) {

          stopAnimation(true);

          return;

        }

		//设置车的位置

        var currentPoint = new ol.geom.Point(routeCoords[traversed]);

      	geoMarker.setGeometry(currentPoint);

      }

    };

    function startAnimation() {

      if (animating) {

        stopAnimation(false);

      } else {

        animating = true;

        now = new Date().getTime();

        startButton.textContent = '取消';

        // hide geoMarker

        geoMarker.setStyle(null);

        // just in case you pan somewhere else

        map.getView().setCenter(map.getView().getCenter());

        map.on('postcompose', moveFeature);

        map.render();

      }

    }

    /**

     * @param {boolean} ended end of animation.

     */

    function stopAnimation(ended) {

      animating = false;

      startButton.textContent = '开始';

      traversed = 0;

      elapsedTime = 0;

      retime = 0;

      // if animation cancelled set the marker at the beginning

      var coord = ended ? routeCoords[routeLength - 1] : routeCoords[0];

      /** @type {ol.geom.Point} */ (geoMarker.getGeometry())

        .setCoordinates(coord);

      //remove listener

      map.un('postcompose', moveFeature);

    }

    startButton.addEventListener('click', startAnimation, false);

	</script>

</body>

</html>

OpenLayers3的轨迹回放的更多相关文章

  1. 物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)

    物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)   2015年11月14日|    by: nbboy|    Category: 系统设计, 缓存设计, 高性能系统 摘要 ...

  2. 如何实现LBS轨迹回放功能？含多平台实现代码

    本篇文章告诉您,如何实现轨迹回放.并且提供了web端,iOS端,Android端3个平台的轨迹回放代码.拷贝后可以直接使用.另外,文末有小彩蛋,算是开发者的福利. Web端/JavaScript 实现 ...

  3. Google地图轨迹回放模拟

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. SVG轨迹回放实践

    最近做了埋点方案XTracker的轨迹回放功能,大致效果就是,在指定几个顺序的点之间形成轨迹,来模拟用户在页面上的先后行为(比如一个用户先点了啥,后点了啥).效果图如下: 在这篇文章中,我们来聊聊轨迹 ...

  5. 如何使用JS来开发室内三维地图的轨迹回放功能

     在制作完成室内三维地图的功能后,最经常有的需求就是如何做人员的轨迹回放,一般流程都是从数据库中查询轨迹坐标后,经过后台查询接口返回给前端,接下来的事情都交给JS来完成. 如果想做好一个性能好的轨迹回 ...

  6. GPS/轨迹追踪、轨迹回放、围栏控制

    折腾一个多月终于弄完了这个项目,起初都未曾接触GPS/轨迹追踪.轨迹回放.圈划围栏...等一些在百度地图或者Googel地图操作的一些业务,后端的业务相对来说简单点 cas单点登录,mongdb灵活的 ...

  7. 使用GMap.NET类库，实现地图轨迹回放。(WPF版)

    前言 实现轨迹回放,GMap.NET有对应的类GMapRoute.这个类函数很少,功能有限,只能实现简单的轨迹回放.要实现更复杂的轨迹回放,就需要自己动手了. 本文介绍一种方法,可以实现复杂的轨迹回放 ...

  8. 使用百度地图API实现轨迹回放

    调用百度地图API实现路线的轨迹回放功能其实很简单,只要搞懂以下几点即可: 1.需要用Polyline方法先绘制好路线图 2.用Marker添加标注点 3.关键一步,通过结合定时器,使用Marker创 ...

  9. Mapbox轨迹回放

        轨迹回放是webgis中的常见功能,是一种被客户喜闻乐见的GIS动画.     动画是一种短时间内不停重绘达到不断运动的效果.本文中轨迹回放就是事先计算好所需要的点,后面再进行播放.      ...

随机推荐

  1. testng的使用

    TestNG教程 TestNG是一个测试框架,其灵感来自JUnit和NUnit,但同时引入了一些新的功能,使其功能更强大,使用更方便. TestNG设计涵盖所有类型的测试:单元,功能,端到端,集成等, ...

  2. [maven学习笔记]第一节，认识maven,搭建maven开发环境,写第一个HelloWorld

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/40142771 maven官网:http://maven.apache.org/ 学习视 ...

  3. Hibernate单表操作

    单一主键 assigned:由Java应用程序负责生成(即手工的赋值) native:由底层的数据库自动的生成标示符,如果是MySQL就是auto_increment,如果是Oracle就是seque ...

  4. 所谓 Spinner 组件

    Spinner组件在平常的开发过程中应该算是比较常用的隶属于Input Control的android控件了,所以我们很有必要掌握这一个知识点,下面我就来谈一谈我对这个组件的一些认识. 是什么? 下拉 ...

  5. Android 系统当中各种尺寸单位的定义及使用

    一,Android 各种标尺单位的含义: px:表示屏幕实际的象素.例如,320*480的屏幕在横向有320个象素,在纵向有480个象素.pt:表示一个点,是屏幕的物理尺寸.大小为1英寸的1/72.i ...

  6. iOS开发xcode报错:"xxxxxx"has been modified since the precompiled header was built

    最近做iOS开发,老是遇到这种问题,正好我有两个版本的Xcode,换了另一个,就正常了,所以也一直没解决. 今天又遇到这个问题,就查了一下资料,找到了解决办法,在次记录一下方便查找,就是在Xcode中 ...

  7. iOS中 Swift初级入门学习(一)

    / // Copyright (c) 2015年 韩俊强. All rights reserved. // import Foundation // Swift当中的输出函数 // println S ...

  8. iOS模仿京东商城中的选择地区样式

    在ViewController文件中创建添加地址界面: @property(nonatomic,strong)UILabel *selectAreaLabel;//地区显示@property(nona ...

  9. Java进阶(五)Junit测试

    我们在编写大型程序的时候,需要写成千上万个方法或函数,这些函数的功能可能很强大,但我们在程序中只用到该函数的一小部分功能,并且经过调试可以确定,这一小部分功能是正确的.但是,我们同时应该确保每一个函数 ...

  10. Android Studio集成Genymotion

    Android Studio集成Genymotion比在Eclipse中集成简单多了.主要以下几个步骤: 1.官网先下载Genymotion:http://www.genymotion.com/,下载 ...