Openlayers3实现车辆轨迹回放功能


Posted in Javascript onSeptember 29, 2020

记录基于geoserver地图服务,Openlayers3在web前端实现车辆轨迹回放功能,并记录和解决过程中出现的linestring只描绘部分经纬度坐标问题。

参考Openlayers3 官网例子

Openlayers3实现车辆轨迹回放功能

html

<!DOCTYPE html>
<html lang="en">
<head>
 <title>车辆轨迹回放</title>
 <meta charset="UTF-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <link rel="stylesheet" href="../css/bootstrap.min.css"/>
 <link rel="stylesheet" href="../ol/ol.css"/>
 <style>
 #map {
 position: relative;
 }
 .popover{
 min-width: 60px;
 }
 html{height:100%}
 body{height:100%;margin:0px;padding:0px}
 </style>
</head>
<body style="margin: 0px 0px 0px 0px;line-height:0px;">
<div id="content">
 <!--<div id="map" style="height: 100%;width:100%"></div>-->
 <div class="row-fluid">
 <div>
 <div id="map" class="map"></div>
 </div>
 </div>

 <div class="row-fluid">
 <div class="span3" style="position:absolute;top:0px;right:0px;">
 <div class="accordion-group widget-box">
 <div class="accordion-heading">
  <div class="widget-title"><a data-parent="#collapse-group" href="#collapseGOne"
    data-toggle="collapse"><span class="icon"><i
  class="icon-map-marker"></i></span>
  <h5>轨迹查询</h5>
  </a>
  </div>
 </div>
 <div class="accordion-body in collapse" id="collapseGOne">
  <div class="form-actions">
  <div class="control-group" style="margin-bottom: 0px">
  <label class="control-label"><i class="icon-truck"></i>设备</label>

  <div class="controls">
  <select id="busSelect" class="span10">
   <option value="*">请选择设备</option>
  </select>
  </div>
  </div>
  </div>


  <div class="form-actions">
  <div class="control-group" style="margin-bottom: 0px">
  <label class="control-label"><i class="icon-table"></i>日期</label>

  <div class="controls">
  <div data-date="" class="input-append date datepicker">
   <input id="traceday" type="text" data-date-format="yyyy-mm-dd" class="span10"
   disabled>
   <span class="add-on"><i class="icon-time"></i></span></div>
  </div>
  </div>
  </div>
  <div style="padding: 19px 20px 20px; margin-top: 20px; margin-bottom: 20px;">
  <div class="control-group" style="margin-bottom: 0px">
  <button id="queryBtn" class="btn btn-primary"><i class="icon-search"></i> 轨迹查询</button> 
  <span class="remind"></span>
 </div>
  <div class="control-group" style="margin-top: 10px">
  <button id="animateBtn" class="btn btn-info"><i class="icon-eye-open"></i> 轨迹回放</button> 
  <input id="speed" type="range" min="1" max="100" step="10" value="10"> <span><i class="icon-cog">速度</i></span>
 </div>
 </div>
 </div>
 </div>
</div>
</div>
</div>
</div>
<script src="../js/lib/jquery.min.js"></script>
<script src="../js/lib/bootstrap.min.js"></script>
<script src="../ol/ol-debug.js"></script>
<script src="../ol/ol.js"></script>
<script src="../js/globalVariable.js"></script>
<script src="../js/gpsQueryAndroid.js"></script>
</body>
</html>

map初始化

$(document).ready(function () {
 map = new ol.Map({
 logo: false,
 target: document.getElementById('map'),
 layers: layers,
 view: view
 });
 initSelect();//设备下拉框列表初始化
 //时间控件初始化
 $('#s-traceday').val(transfromTime(new Date(),false)+" 00:00:00");
 $('#e-traceday').val(transfromTime(new Date(),true));
 $('.datepicker').datetimepicker({
 minView:0,
 format: 'yyyy-MM-dd hh:mm:ss', 
 todayBtn : "linked", 
 autoclose : true, 
 todayHighlight : true,
 startDate: daylimit,
 endDate:'+1d'//结束时间,在这时间之后都不可选
 });
});

//轨迹line layer
var vsource = new ol.source.Vector({
 type: 'LineString',
 features: []
});
var linelayers = new ol.layer.Vector({
 source: vsource,
 style: new ol.style.Style({
 fill: new ol.style.Fill({
 color: '#0044CC'
 }),
 stroke: new ol.style.Stroke({
 color: '#0044CC',
 width: 4
 })
 })
});
//地图基础参数
var map;
var center = [121.6606763113213, 31.14611063632111];
var lng, lat;
var source = new ol.source.Vector({
 wrapX: false
});;
var projection = new ol.proj.Projection({
 code: 'EPSG:4326',
 units: 'degrees',
 axisOrientation: 'neu'
});
var view = new ol.View({
 projection: projection,
 center: center,
 zoom: 16
});

var layers = [new ol.layer.Tile({
 title: '、地图',
 visible: true,
 preload: Infinity,
 source: new ol.source.TileWMS({
 url: gisUrl,
 params: {
 'VERSION': '1.1.0',
 tiled: true,
 STYLES: '',
 LAYERS: 'shanghai:maptest',
 }
 })
 }),linelayers];

ajax获取坐标数据

//轨迹查询按钮点击
var positions=[];
$("#queryBtn").click(function(){
 //清除之前的图层
 if (centerSource.getFeatures != null) {
 centerSource.clear(); }
 linelayers.getSource().clear(true);
 positions=[];//清空
 //取值
 var busnum=$("#busSelect").val();
 var traceday=$("#traceday").val();
 if(busnum=="*"){
 $(".remind").html('<i class="icon-info-sign">请先选择车辆</i>');
 return;
 }else{
 $(".remind").html('');
 busnum=busnum.slice(2);
 }
 if(transfromTime(new Date(),false)==traceday){//当天
 traceday="*";
 }else{
 traceday=traceday.replace(/(-)/g,"");
 }
 $(".remind").html('<i class="icon-cogs"> 正在查询...</i>');

 //请求
 $.getJSON(baseUrl+"trace/query/"+busnum+"/"+traceday,"",function(data){
 if(data.length==0){
 $(".remind").html('<i class="icon-info-sign">未查到gps数据</i>');return;
 }
 var position = [];
 for(var i = 0;i<data.length;i++){
 if(i!=0&&data[i].lon==data[i-1].lon&&data[i].lon==data[i-1].lon){//去除重复数据
  continue;
 }
 position = [parseFloat(data[i].lon),parseFloat(data[i].lat)];
 positions.push(position);
 }
 console.log(positions);
 if(positions.length==1){
 $(".remind").html('<i class="icon-info-sign">该车辆当天停在该位置未启动</i>');
 centerAt(positions[0]);
 return;
 }
 AddLayer(positions);
 });
});

显示轨迹

//轨迹描绘
function AddLayer() {
 var lineFeature = new ol.Feature({//路线
 geometry: new ol.geom.LineString(positions,'XY'),
 });
 linelayers.getSource().addFeature(lineFeature);

 var startFeature = new ol.Feature({//起点
 geometry: new ol.geom.Point(positions[0]),
 population: 4000,
 rainfall: 500
 });
 startFeature.setStyle(startStyle);
 linelayers.getSource().addFeature(startFeature);
 var endFeature = new ol.Feature({//终点
 geometry: new ol.geom.Point(positions[positions.length-1]),
 population: 4000,
 rainfall: 500
 });
 endFeature.setStyle(endStyle);
 linelayers.getSource().addFeature(endFeature);


 carFeature = new ol.Feature({//车子
 geometry: new ol.geom.Point(positions[0]),
 population: 4000,
 rainfall: 500
 });
 carFeature.setStyle(carStyle);
 linelayers.getSource().addFeature(carFeature);
 var extent = linelayers.getSource().getExtent();//合适比例缩放居中
 view.fit(extent, map.getSize());
 }

显示单点

//居中 车辆不运动时居中显示图标处理
var centerLayer = null;
var centerSource = new ol.source.Vector({
 features: null
});
//居中在一个位置
function centerAt(position) {
 var pan = ol.animation.pan({
 duration: 2000,
 source: (view.getCenter())
 });
 view.setCenter(position);

 var iconFeature = new ol.Feature({
 geometry: new ol.geom.Point(position),
 name: 'Null Island',
 population: 4000,
 rainfall: 500
 });
 iconFeature.setStyle(iconStyle);
 centerSource.addFeature(iconFeature);
 centerLayer = new ol.layer.Vector({
 source: centerSource
 });
 map.addLayer(centerLayer);
 centerLayer.setVisible(true);
}

点在线上运动,轨迹回放

//轨迹回放start 参考官网
var carFeature = null;
var speed, now;
var animating = false;
$("#animateBtn").click(function(){
 if(positions.length==0){
 $(".remind").html('<i class="icon-info-sign">请先查询轨迹</i>');
 return;
 }
 if (animating) {
 stopAnimation(false);
 } else {
 animating = true;
 now = new Date().getTime();
 speed = $("#speed").val();//速度
 $("#animateBtn").html('<i class="icon-eye-close"></i> 取消回放');
 carFeature.setStyle(null);
 // map.getView().setCenter(center);
 map.on('postcompose', moveFeature);
 map.render();
 }
});

var moveFeature = function(event) {
 var vectorContext = event.vectorContext;
 var frameState = event.frameState;

 if (animating) {
 var elapsedTime = frameState.time - now;
 // here the trick to increase speed is to jump some indexes
 // on lineString coordinates
 var index = Math.round(speed * elapsedTime / 1000);

 if (index >= positions.length) {
 stopAnimation(true);
 return;
 }

 var currentPoint = new ol.geom.Point(positions[index]);
 var feature = new ol.Feature(currentPoint);
 vectorContext.drawFeature(feature, carStyle);
 }
 // tell OL3 to continue the postcompose animation
 map.render();
 };

 function startAnimation() {
 if (animating) {
 stopAnimation(false);
 } else {
 animating = true;
 now = new Date().getTime();
 speed = speedInput.value;
 $("#animateBtn").html('<i class="icon-eye-close"></i> 取消回放');
 // hide geoMarker
 geoMarker.setStyle(null);
 // just in case you pan somewhere else
 map.getView().setCenter(center);
 map.on('postcompose', moveFeature);
 map.render();
 }
 }

 function stopAnimation(ended) {
 animating = false;
 $("#animateBtn").html('<i class="icon-eye-open"></i> 轨迹回放');

 // if animation cancelled set the marker at the beginning
 var coord = ended ? positions[positions.length - 1] : positions[0];
 /** @type {ol.geom.Point} */ (carFeature.getGeometry())
 .setCoordinates(coord);
 //remove listener
 map.un('postcompose', moveFeature);
 }
//轨迹回放end

解决linestring坐标显示不全

期间碰到一个问题

var lineFeature = new ol.Feature({//路线
 geometry: new ol.geom.LineString(positions,'XY'),
 });
 linelayers.getSource().addFeature(lineFeature);

调用这段代码显示轨迹时,从数据库取到20个坐标,就可能只显示4个坐标,本来是弯曲的轨迹,但是实际上就是折线,很尴尬。
误打误撞,和同学 交流过程中发现问题所在,特此感谢。
在ajax获取坐标数据中发现问题所在:
原先错误代码

position = [data[i].lon,data[i].lat];
 positions.push(position);

正确代码

position = [parseFloat(data[i].lon),parseFloat(data[i].lat)];
 positions.push(position);

原因就是没有把float类型的坐标利用parseFloat强转,导致默认的泛数据类型精确度不够,经纬度小数点后末尾几位就会被忽略,于是造成数据失效,描出的线就会有问题。

附上icon、起点、终点、车辆等地图样式

//样式,供上述代码调用
var iconStyle = new ol.style.Style({
 image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
 anchor: [0.5, 0.8],
 anchorXUnits: 'fraction',
 anchorYUnits: 'pixels',
 opacity: 0.75,
 src: 'img/iconfont-weizhi-red.png'
 }))
});
var startStyle = new ol.style.Style({
 image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
 anchor: [0.5, 0.8],
 opacity: 0.8,
 src: 'img/start.png'
 /*anchorXUnits: 'fraction',
 anchorYUnits: 'pixels',
 opacity: 0.75,*/

 }))
});
var endStyle = new ol.style.Style({
 image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
 src: 'img/end.png',
 anchor: [0.5, 0.8],
 }))
});
var carStyle = new ol.style.Style({
 image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
 src: 'img/car.png',
 anchor: [0.5, 0.8],
 }))
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
浅说js变量
May 25 Javascript
ASP.NET中AJAX 调用实例代码
May 03 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 #Javascript
JS中队列和双端队列实现及应用详解
Sep 29 #Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 #Javascript
js实现星星海特效的示例
Sep 28 #Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 #Javascript
Openlayers绘制聚合标注
Sep 28 #Javascript
Openlayers绘制地图标注
Sep 28 #Javascript
You might like
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
解读python如何实现决策树算法
2018/10/11 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
满月酒答谢词
2014/01/14 职场文书
三爱活动实施方案
2014/03/19 职场文书
诚信考试承诺书
2014/03/27 职场文书
环保建议书400字
2014/05/14 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
mysql查找连续出现n次以上的数字
2022/05/11 MySQL