Openlayers3实现车辆轨迹回放功能

记录基于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="http://www.cppcns.com/wangluo/css/bootstrap.min.css"/>
 <link rel="stylesheet" href="http://www.cppcns.com/wangluo/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="http://www.cppcns.com/wangluo/javascript/#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="http://www.cppcns.com/wangluo/javascript/*">请选择设备</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>&nbsp;轨迹查询</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>&nbsp;轨迹回放</button> 
   <input id="speed" type="range" min="1" max="100" step="10" value="http://www.cppcns.com/wangluo/javascript/10">&nbsp;<span><i class="icon-cog">速度</i></span>
  </div>
  </div>
 </div>
 </div>
</div>
</div>
</div>
</div>
<script src="http://www.cppcns.com/wangluo/js/lib/jquery.min.js"></script>
<script src="http://www.cppcns.com/wangluo/js/lib/bootstrap.min.js"></script>
<script src="http://www.cppcns.com/wangluo/ol/ol-debug.js"></script>
<script src="http://www.cppcns.com/wangluo/ol/ol.js"></script>
<script src="http://www.cppcns.com/wangluo/js/globalVariable.js"></script>
<script src="http://www.cppcns.com/wangluo/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];

Openlayers3实现车辆轨迹回放功能

扫一扫手机访问