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. FFmpeg源代码简单分析：avformat_alloc_output_context2()

    ===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结构图 - 解码 F ...

  2. 17 ContentProvider

    1 Loader 转载器 Android3.0以后出来的 它可以使Activity和Fragment 异步加载数据 变得简单(Loader里封装了AsyncTask) 2 Loader特点: 对每一个 ...

  3. 详解EBS接口开发之库事务处理带提前发运通知(ASN)采购接收入库-补充

     A)   Via ROI Create a ASN [ship,ship]  for a quantity =3 on STANDARD PURCHASE ORDER Create  via R ...

  4. java操作xml文件--修改节点

          上一篇文章我介绍了SAX方法解析XML文件的过程,这篇文章讲解的内容是利用DOM方法修改XML文件的节点内容.       下面依然是首先贴出XML文件: <?xml version ...

  5. 【一天一道LeetCode】#374. Guess Number Higher or Lower

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 We are ...

  6. android开发之broadcast学习笔记

    android中的广播用的太多了,今天稍微总结一下. 按注册方式分为两种: 1.静态注册广播: 静态注册广播就是在androidManifest.xml文件中注册广播,假设我们要实现这样一个效果,在一 ...

  7. Java在linux下调用C/C++生成的so文件

    1.CplusUtil.java是java web工程中的一个工具类内容如下:CplusUtil.java package cn.undoner.utils; /** * Created by ${& ...

  8. iOS隐藏键盘的几种方式

    因为开发中经常要用到textField和textView,在某些情形下隐藏键盘很有必要,而隐藏键盘有多种方式,在合适的场景下用合适的方式隐藏就显得很重要,我也老是记不起来有哪些方法,这里就记录一下,以 ...

  9. (NO.00005)iOS实现炸弹人游戏(四):游戏数据的初始化(一)

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 上一篇我们初步看了一下MainScene类的初始化方法里都做了神 ...

  10. Swift基础用法（Swift开发之一）

    昨晚苹果发布了新一代编程语言Swift,官方提供了一个iBook的说明文档,有需要的可以看下.地址:https://itunes.apple.com/cn/book/swift-programming ...