Upload gps.Find your car.
This commit is contained in:
parent
24d3f8dd72
commit
e179013e2f
BIN
opserver.exe
BIN
opserver.exe
Binary file not shown.
Binary file not shown.
|
@ -132,7 +132,9 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
<!--statistic-->
|
||||||
|
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
|
||||||
|
<script>LA.init({id:"3IjhGahfKXjHlq3b",ck:"3IjhGahfKXjHlq3b"})</script>
|
||||||
<script src="https://webapi.amap.com/maps?v=1.4.15&key=b8de4cd1c32ebd939282e7fb176429b3&plugin=AMap.Autocomplete"></script>
|
<script src="https://webapi.amap.com/maps?v=1.4.15&key=b8de4cd1c32ebd939282e7fb176429b3&plugin=AMap.Autocomplete"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
|
|
@ -20,8 +20,10 @@
|
||||||
document.getElementById('btnlist').style.display="";
|
document.getElementById('btnlist').style.display="";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<!--statistic-->
|
||||||
|
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
|
||||||
|
<script>LA.init({id:"3IjhGahfKXjHlq3b",ck:"3IjhGahfKXjHlq3b"})</script>
|
||||||
|
|
||||||
<link rel="stylesheet" href="css/form.min.css"/>
|
<link rel="stylesheet" href="css/form.min.css"/>
|
||||||
<style>
|
<style>
|
||||||
|
@ -136,6 +138,15 @@
|
||||||
window.location = url;
|
window.location = url;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function showLocation() {
|
||||||
|
did = localStorage.getItem("dongleId");
|
||||||
|
url = "/replaygps/"+String(did)+"/"
|
||||||
|
var date = new Date();
|
||||||
|
url = url+date.getFullYear()+"-"+(date.getMonth() + 1).toString().padStart(2,'0')+"-"+date.getDate();
|
||||||
|
console.log(url)
|
||||||
|
window.location = url;
|
||||||
|
}
|
||||||
|
|
||||||
function recordOperationTime(){
|
function recordOperationTime(){
|
||||||
strSec = Math.floor(Date.now() / 1000)
|
strSec = Math.floor(Date.now() / 1000)
|
||||||
localStorage.setItem("operationTime", strSec)
|
localStorage.setItem("operationTime", strSec)
|
||||||
|
@ -182,6 +193,8 @@
|
||||||
<div id="btnlist" style="display: none;text-align:center" title="" >
|
<div id="btnlist" style="display: none;text-align:center" title="" >
|
||||||
</br></br></br></br>
|
</br></br></br></br>
|
||||||
<input type="button" value="Vod" class="button button1" onclick = "showVOD();" />
|
<input type="button" value="Vod" class="button button1" onclick = "showVOD();" />
|
||||||
|
|
||||||
|
<input type="button" value="Location" class="button button1" onclick = "showLocation();" />
|
||||||
</br></br>
|
</br></br>
|
||||||
<input type="button" value="Log" class="button button1" onclick = "showlog();" />
|
<input type="button" value="Log" class="button button1" onclick = "showlog();" />
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,269 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head><meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||||
|
<title>Route replay</title>
|
||||||
|
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#container {
|
||||||
|
height: 100%;width: 100%;font-family: "微软雅黑";
|
||||||
|
}
|
||||||
|
.input-card .btn {margin-right: 1.2rem;width: 9rem;}
|
||||||
|
.input-card .btn:last-child {margin-right: 0;}
|
||||||
|
.amap-marker-label{border: 0;background-color: transparent;}
|
||||||
|
.amap-marker-content img {width: 25px;height: 34px;}
|
||||||
|
.info {position: relative;top: 0;right: 0;min-width: 0;font-size: 16px;border: 1px solid rgb(204, 204, 204);}
|
||||||
|
</style></head><body>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="container"></div>
|
||||||
|
<div class="input-card">
|
||||||
|
<div class="input-item">
|
||||||
|
<input type="date" style="direction: rtl" onchange="onDataChange()" id="myTime"/>
|
||||||
|
</div>
|
||||||
|
<div class="input-item">
|
||||||
|
<input type="button" class="btn" value="开始动画" id="start" onclick="startAnimation()"/>
|
||||||
|
<input type="button" class="btn" value="暂停动画" id="pause" onclick="pauseAnimation()"/>
|
||||||
|
</div>
|
||||||
|
<!--<div class="input-item">
|
||||||
|
<input type="button" class="btn" value="继续动画" id="resume" onclick="resumeAnimation()"/>
|
||||||
|
<input type="button" class="btn" value="停止动画" id="stop" onclick="stopAnimation()"/>
|
||||||
|
</div>-->
|
||||||
|
<div class="input-item">
|
||||||
|
<input type="button" class="btn" value="显示时间" id="showDate" onclick="showDate()"/>
|
||||||
|
<input type="button" class="btn" value="隐藏时间" id="hideDate" onclick="hideDate()"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=6a5cbc4029bcee01691fab072982280f&plugin=AMap.Driving"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById("myTime").value= '_DATE_';
|
||||||
|
|
||||||
|
function onDataChange() {
|
||||||
|
var oTimer = document.getElementById("myTime");
|
||||||
|
var value = oTimer.value;
|
||||||
|
dongleid = localStorage.getItem("dongleId");
|
||||||
|
window.location= "/replaygps/"+dongleid+"/"+value;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
//只要起点 和 终点的 经纬度信息
|
||||||
|
var allData = '_GPS_DATA_';
|
||||||
|
var lineArr;
|
||||||
|
var polyline;
|
||||||
|
var passedPolyline;
|
||||||
|
//全部的点
|
||||||
|
var path = [];
|
||||||
|
//是否显示时间
|
||||||
|
var showStatus = true;
|
||||||
|
//途经点
|
||||||
|
var wayMarker;
|
||||||
|
//初始化中心坐标
|
||||||
|
var centerGPS = _GPS_CENTER_;//['120.21473911773758', '30.263519892563018'];
|
||||||
|
//途经点数组。方便清空数据
|
||||||
|
var wayMarkerArray = new Array();
|
||||||
|
var carStart, carEnd;
|
||||||
|
//创建地图。中心点、缩放等级
|
||||||
|
var map = new AMap.Map("container", {
|
||||||
|
resizeEnable: true,
|
||||||
|
center: [centerGPS[0], centerGPS[1]],
|
||||||
|
zoom: 17
|
||||||
|
});
|
||||||
|
//驾车策略基础信息
|
||||||
|
var drivingOption = {
|
||||||
|
policy: AMap.DrivingPolicy.LEAST_DISTANCE,
|
||||||
|
ferry: 1,
|
||||||
|
}
|
||||||
|
var gpsData = JSON.parse(allData)
|
||||||
|
var rowLength = gpsData.data.rows.length;
|
||||||
|
var gpsLength = gpsData.data.rows[rowLength - 1].gpsInfos.length;
|
||||||
|
//添加小汽车
|
||||||
|
carStart = [gpsData.data.rows[0].gpsInfos[0].longitude, gpsData.data.rows[0].gpsInfos[0].latitude]
|
||||||
|
carEnd = [gpsData.data.rows[rowLength - 1].gpsInfos[gpsLength - 1].longitude, gpsData.data.rows[rowLength - 1].gpsInfos[gpsLength - 1].latitude]
|
||||||
|
addCar('');
|
||||||
|
|
||||||
|
for (var i = 0; i < rowLength; i++) {
|
||||||
|
getRoute(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRoute(i) {
|
||||||
|
var data = gpsData.data.rows[i];
|
||||||
|
addMarker(i);
|
||||||
|
pts = getWayPoints(data.gpsInfos);
|
||||||
|
drawTrack(pts);
|
||||||
|
drawPassedPolyLine();
|
||||||
|
lineArr = pts;
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
function getWayPoints(coords) {
|
||||||
|
var GPS = new Array();
|
||||||
|
if (coords.length > 1) {
|
||||||
|
//不要第一个和最后一个,会导致起点终点图标被覆盖
|
||||||
|
for (var i = 1; i < coords.length - 1; i++) {
|
||||||
|
var wayPoint = coords[i];
|
||||||
|
var wayPointGPS = new AMap.LngLat(wayPoint.longitude, wayPoint.latitude)
|
||||||
|
GPS.push(wayPointGPS);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return GPS;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 绘制轨迹
|
||||||
|
function drawTrack(path) {
|
||||||
|
color = "#"+parseInt(Math.random()*65536).toString(16)+ "5b"
|
||||||
|
polyline = new AMap.Polyline({
|
||||||
|
map: map,
|
||||||
|
path: path,
|
||||||
|
showDir: true,
|
||||||
|
strokeColor: color,//"#18a45b", //线颜色
|
||||||
|
strokeWeight: 6, //线宽
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 绘制运动轨迹样式
|
||||||
|
function drawPassedPolyLine() {
|
||||||
|
passedPolyline = new AMap.Polyline({
|
||||||
|
map: map,
|
||||||
|
strokeColor: "#AF5", //线颜色
|
||||||
|
strokeWeight: 6, //线宽
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
增加轨迹回放的小汽车和车牌
|
||||||
|
@param plate - 车牌
|
||||||
|
*/
|
||||||
|
function addCar(plate) {
|
||||||
|
if (plate == "")
|
||||||
|
{
|
||||||
|
marker = new AMap.Marker({
|
||||||
|
map: map,
|
||||||
|
zIndex: 9999,
|
||||||
|
position: [carStart[0], carStart[1]],
|
||||||
|
icon: "https://lbsyun.baidu.com/jsdemo/img/car.png",
|
||||||
|
offset: new AMap.Pixel(-26, -13),
|
||||||
|
autoRotation: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
marker = new AMap.Marker({
|
||||||
|
map: map,
|
||||||
|
zIndex: 9999,
|
||||||
|
position: [carStart[0], carStart[1]],
|
||||||
|
icon: "https://lbsyun.baidu.com/jsdemo/img/car.png",
|
||||||
|
offset: new AMap.Pixel(-26, -13),
|
||||||
|
autoRotation: true,
|
||||||
|
label: {
|
||||||
|
content: "<div class='info'>" + plate + "</div>",
|
||||||
|
offset: new AMap.Pixel(-26, -35),
|
||||||
|
autoRotation: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示时间
|
||||||
|
function showDate() {
|
||||||
|
showStatus = true;
|
||||||
|
for (var i = 0; i < rowLength; i++) {
|
||||||
|
addMarker(i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 隐藏时间
|
||||||
|
function hideDate() {
|
||||||
|
showStatus = false;
|
||||||
|
for (var i = 0; i < rowLength; i++) {
|
||||||
|
addMarker(i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 实例化点标记
|
||||||
|
function addMarker(i) {
|
||||||
|
if (null != wayMarker) {
|
||||||
|
wayMarkerArray.forEach(function (wayMarkerPoint) {
|
||||||
|
wayMarkerPoint.setMap(null);
|
||||||
|
})
|
||||||
|
wayMarkerArray = new Array();
|
||||||
|
}
|
||||||
|
|
||||||
|
var data = gpsData.data.rows[i];
|
||||||
|
for (var j = 0; j < data.gpsInfos.length; j++) {
|
||||||
|
var gpsInfo = data.gpsInfos[j];
|
||||||
|
wayMarker = new AMap.Marker({
|
||||||
|
map: map,
|
||||||
|
position: [gpsInfo.longitude, gpsInfo.latitude],
|
||||||
|
offset: new AMap.Pixel(-13, -30)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (showStatus) {
|
||||||
|
wayMarker.setLabel({
|
||||||
|
offset: new AMap.Pixel(20, 20), //设置文本标注偏移量
|
||||||
|
content: "<div class='info'>" + gpsInfo.create_time + "</div>", //设置文本标注内容
|
||||||
|
direction: 'right' //设置文本标注方位
|
||||||
|
});
|
||||||
|
}
|
||||||
|
wayMarkerArray.push(wayMarker);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**********起点ICON**********/
|
||||||
|
var startMarker = new AMap.Marker({
|
||||||
|
position: carStart,
|
||||||
|
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
|
||||||
|
map: map
|
||||||
|
})
|
||||||
|
/**********终点ICON**********/
|
||||||
|
var endMarker = new AMap.Marker({
|
||||||
|
position: carEnd,
|
||||||
|
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
|
||||||
|
map: map
|
||||||
|
})
|
||||||
|
|
||||||
|
// 调整视野达到最佳显示区域
|
||||||
|
map.setFitView([startMarker, endMarker])
|
||||||
|
|
||||||
|
marker.on('moving', function (e) {
|
||||||
|
passedPolyline.setPath(e.passedPath);
|
||||||
|
});
|
||||||
|
|
||||||
|
/**********动画 START**********/
|
||||||
|
function startAnimation() {
|
||||||
|
marker.moveAlong(lineArr, 99200);
|
||||||
|
}
|
||||||
|
|
||||||
|
function pauseAnimation() {
|
||||||
|
marker.pauseMove();
|
||||||
|
}
|
||||||
|
|
||||||
|
function resumeAnimation() {
|
||||||
|
marker.resumeMove();
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopAnimation() {
|
||||||
|
marker.stopMove();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**********动画 END**********/
|
||||||
|
|
||||||
|
// 解析DrivingRoute对象,构造成AMap.Polyline的path参数需要的格式
|
||||||
|
function parseRouteToPath(route, type) {
|
||||||
|
for (var i = 0, l = route.steps.length; i < l; i++) {
|
||||||
|
var step = route.steps[i]
|
||||||
|
|
||||||
|
for (var j = 0, n = step.path.length; j < n; j++) {
|
||||||
|
path.push(step.path[j])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return path
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
Loading…
Reference in New Issue