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. 嵌入式LINUX环境下视频采集知识

    V4L2是Linux环境下开发视频采集设备驱动程序的一套规范(API),它为驱动程序的编写提供统一的接口,并将所有的视频采集设备的驱动程序都纳入其的管理之中.V4L2不仅给驱动程序编写者带来极大的方便 ...

  2. 查看某一职责下对应的菜单&功能&请求

    查看菜单&功能 SELECT res.RESPONSIBILITY_NAME 职责名称, menu.MENU_NAME 菜单编码, menu.USER_MENU_NAME 菜单名称, func ...

  3. Sharepoint2013部署ADFS 报new-sptrustedIdentityTokenIssuer:the trust provider certificate already exist

    在做sharepoint2013的adfs部署时,根据MSDN的步骤到新建身份验证程序时,powershell中报"ADFS new-sptrustedIdentityTokenIssuer ...

  4. 详解EBS接口开发之WIP模块接口

    总体说明 文档目的 本文档针对WIP模块业务功能和接口进行分析和研究,对采用并发请求方式和调用API方式分别进行介绍 内容 WIP模块常用标准表简介 WIP事物处理组成 WIP相关业务流程 WIP相关 ...

  5. Android进阶(二十二)设置TextView文字水平垂直居中

    设置TextView文字水平垂直居中 有2种方法可以设置TextView文字居中: 一:在xml文件设置:android:gravity="center" 二:在程序中设置:m_T ...

  6. JSP实现界面的自动跳转的几种方式

    下面来谈一谈在jsp中实现的几种界面自动跳转的方法. 使用JavaScript脚本 <html> <script language=javascript> function o ...

  7. visual studio 2015使用python tools远程调试maya 2016

    步骤: 1. 去https://apps.exchange.autodesk.com/MAYA/en/Home/Index搜索Developer Kit并下载,maya 2016可以直接点击这里下载. ...

  8. 【翻译】Ext JS最新技巧——2016-3-4

    原文:Top Support Tips Kevin Cassidy:Grid水印 Ext JS的Grid是一个便于在布局中显示信息的伟大工具.有些用户可能会希望将这些信息打印为会议资料或宣传材料,而且 ...

  9. curl命令备注

    curl是利用URL语法在命令行方式下工作的开源文件传输工具.它被广泛应用在Unix.多种Linux发行版中,并且有DOS和Win32.Win64下的移植版本.1.get请求:curl "h ...

  10. unity实现玻璃效果

    一.使用Cubemap,做一个假反射 shader代码如下: Shader "Custom/glassShader" { Properties { _MainColor(" ...