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. Cocos2D两个方法的重构一例

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 在RPG游戏项目的GameSpace类中原来有一个方法: -( ...

  2. pig脚本不需要后缀名（python tempfile模块生成pig脚本临时文件，执行）

    pig 脚本运行不需要后缀名 pig脚本名为tempfile,无后缀名 用pig -f tempfile 可直接运行 另外,pig tempfile也可以直接运行 这样就可以用python临时文件存储 ...

  3. Android开发学习之路--Android Studio项目目录结构简介

    既然已经搭建好环境了,那就对Android Studio中项目目录结构做个简单的了解了,这里以最简单的Hello工程为例子,新建好工程后看如下三个工程视图: 1.Android工程 manifests ...

  4. Ubuntu 13.04设置root用户登录图形界面

    先切换到root用户, sudo su root 1.先设定一个root的密码, passwd root 2.备份一下lightgdm cp -p /etc/lightdm/lightdm.conf ...

  5. （七十五）CoreLocation（一）在iOS7和iOS8设备上获取授权

    苹果在iOS8上更新了CoreLocation的授权获取方式,在原来的基础上,不仅需要调用授权函数,还需要对info.plist进行相应的配置. 在iOS上获取经纬度使用的是CoreLocationM ...

  6. Android的图片，字符串，demin，color，以及Array，boolean，Integer资源的使用-android学习之旅（五十四）

    总体介绍 颜色值的定义 定义字符串,颜色,尺寸资源 字符串 颜色资源 尺寸资源 使用字符串,颜色,尺寸资源 boolean的定义与使用 整形常量的定义与使用 数组资源的定义与使用 图片资源的使用

  7. IMX51---GPIO

    GPIO(General Purpose Input/Output)指通用输入/输出,IMX51的GPIO模块提供32位双向的.通用输入和输出的信号,下图是GPIO的框图: 图1 1.      GP ...

  8. 存储那些事儿（五）：BTRFS文件系统之Btree结构详解

    Btree数据结构可以说是BTRFS文件系统的基础.它提供了一个通用的方式去存储不同的数据类型.它仅仅存储3个数据类型:key, item和block header. btrfs_header的定义如 ...

  9. （一）php的基本知识和一些注意点

    注意:任何程序,包括php,在运行时都在内存中进行,php代码需要被读取到内存中才能执行. [php的运行方式] 1.通过服务器(例如apache)调用. 2.通过命令行调用(不需要服务器参与,因为没 ...

  10. git的撤销动作

    有时候我们提交完了才发现漏掉了几个文件没有加,或者提交信息写错了.想要撤消刚才的提交操作,可以使用--amend 选项重新提交: $ git commit --amend -m"修改 提交 ...