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. Android中利用Camera与Matrix实现3D效果详解

    本文行文目录: 一.Camera与Matrix初步认识 二.Camera与Matrix旋转效果拆分介绍 三.Camera与Matrix实现立体3D切换效果 [csdn地址:http://blog.cs ...

  2. Java虚拟机定义

    虚拟机是一种抽象化的计算机,通过在实际的计算机上仿真模拟各种计算机功能来实现的.Java虚拟机有自己完善的硬体架构,如处理器.堆栈.寄存器等,还具有相应的指令系统.JVM屏蔽了与具体操作系统平台相关的 ...

  3. Oracle中使用游标转换数据表中指定字段内容格式(拼音转数字)

    应用场景:将数据表TB_USER中字段NNDP的内容中为[sannanyinv]转换为[3男1女] 主要脚本:一个游标脚本+分割字符串函数+拼音转数字脚本 操作步骤如下: 1.创建类型 create ...

  4. HTML5中 HTML列表／块／布局 韩俊强的博客

    从简单到复杂HTML5详解:每日更新关注:http://weibo.com/hanjunqiang  新浪微博! 1.HTML列表 1.有序 2.无序 3.有序star属性 4.有序无序列表 代码: ...

  5. TortoiseSVN服务器ip地址修改后如何使用

    TortoiseSVN是很多人特别是程序员经常使用的工作追述工具,在长期使用过程中难免会遇到服务器迁移ip地址变更的问题.那么在服务器ip地址变化之后,我们要如何继续使用呢?步骤其实非常简单,下面我们 ...

  6. Java并发——线程池原理

    "池"技术对我们来说是非常熟悉的一个概念,它的引入是为了在某些场景下提高系统某些关键节点性能,最典型的例子就是数据库连接池,JDBC是一种服务供应接口(SPI),具体的数据库连接实 ...

  7. 利用openssl管理证书及SSL编程第3部分:将MinGW编译的openssl dll导出def和lib供MSVC使用

    将MinGW编译的openssl dll导出def和lib供MSVC使用 前面我们用mingw把openssl 编译成了动态库,得到下面2个dll文件: libeay32.dll ssleay32.d ...

  8. Material Design Library 23.1.0的新变化与代码实战

    Design Library出来已经快有一个月了,当时大概看了一下介绍这个新版本变化的译文,内容不多,给我印象最深的就是Percent lib.AppBarLayout 和NavigationView ...

  9. UNIX环境高级编程——计算机体系结构基础知识

    无论是在CPU外部接总线的设备还是在CPU内部接总线的设备都有各自的地址范围,都可以像访问内存一样访问,很多体系结构(比如ARM)采用这种方式操作设备,称为等都会产生异常. 通常操作系统把虚拟地址空间 ...

  10. OTA和Recovery系统升级流程介绍

    本文介绍了Android原生OTA和Recovery升级过程步骤. 进入升级 - 1.1 正常启动和进入Recovery的区别 下面给出了升级流程的简单示意图.  上图中的上下两个部分,上面一部分是正 ...