outboundMap.html
3.32 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<style>
.play_back-layer .layui-layer-title{
height: 36px;
border-bottom: none;
}
</style>
<div id="titleMap">
<button id="run" style="margin-left:10px" class="btn btn-sm green btn-outline filter-submit margin-bottom">运行</button>
</div>
<div id="BasicMap">
</div>
<style type="text/css">
#BasicMap{
width: 100%;
border: 2px solid #fdfdfd;
height: calc(100% - 30px);
overflow: hidden;
}
</style>
<script type="text/javascript" src="/pages/excep/js/map.js"></script>
<script type="text/javascript" src="/pages/excep/js/line-list-function.js"></script>
<script type="text/javascript">
$(function(){
var dataArr = window.localStorage.zbhAndDate.split(",");//获取页面传递过来的车辆自编号以及超速起始时间和超速结束时间
localStorage.clear();//清楚前端缓存
var vehicle = dataArr[0];
var startdate = dataArr[1];
var enddate = dataArr[2];
var lon = dataArr[3];//起点经度
var lat = dataArr[4];//起点纬度
var endLon = dataArr[5];//终点经度
var endLat = dataArr[6];//终点纬度
var lineid = dataArr[7];
var directionData = dataArr[8];
var pointObj;//坐标和速度组成的对象
var Points = [];//坐标和速度对象的集合
var coordinateArr = [];//坐标点数组
$.ajax({
type: "GET",
async:false,
url: '/nowbound/findPosition',
data: {vehicle:vehicle,startdate:startdate,enddate:enddate},
success: function(data){
$.each(data,function(i,item){
if(item.lon>1 && item.lat>1){
pointObj = new Object();
pointObj.coordinate = new BMap.Point(item.lon,item.lat);
pointObj.vehicle = item.vehicle;
Points.push(pointObj);
}
});
}
});
setTimeout(function(){
var map = BasicMap.init();//创建地图
$get('/sectionroute/findSection',{'line.id_eq' : lineid , 'directions_eq' :directionData},function(data) {
// 在地图上画出线路走向
PublicFunctions.linePanlThree(lineid,data,directionData);
});
var myP1 = new BMap.Point(lon,lat); //起点
var myP2 = new BMap.Point(endLon,endLat); //终点
for(i in Points){
coordinateArr.push(Points[i].coordinate);
}
var polyline = new BMap.Polyline(coordinateArr, {strokeColor:"red", strokeWeight:5, strokeOpacity:0.5});//创建折线
var myIcon = new BMap.Icon("/pages/excep/img/bus.png", new BMap.Size(32, 70), {//小车图片
imageOffset: new BMap.Size(5,20) //图片的偏移量。为了是图片底部中心对准坐标点。
});
var carMk;
$(document).on('click', '#run', function() {
map.centerAndZoom(new BMap.Point(lon,lat),16);//地图中心点坐标 */
if(typeof(carMk)!="undefined"){
map.removeOverlay(carMk);//清空上一次的轨迹
}
carMk = new BMap.Marker(coordinateArr[0],{icon:myIcon});
map.addOverlay(polyline);//增加折线
var paths = coordinateArr.length;//获得有几个点
map.addOverlay(carMk);
i=0;
setTimeout(function(){
resetMkPoint(0);
},500);
function resetMkPoint(i){
carMk.setPosition(coordinateArr[i]);
if(i < paths-1){
setTimeout(function(){
i++;
resetMkPoint(i);
},500);
}
};
});
}, 500);
});
</script>