Skip to content

N
new-socketemulator
Commit b97786f6 authored by liyuanhong's avatar liyuanhong
Browse files
Options

增加了轨迹录制功能

parent 0130c085
Hide whitespace changes
Inline Side-by-side
Showing with 118 additions and 4 deletions
data/protocolTools/carData/M202003060520.json
View file @ b97786f6
{"time": {"dateTime": "2020-07-30 10:05:57", "date": "2020-07-30", "time": "10:05:57"}, "curDayTravel": {"todayTotalMilleage": 4796, "todayTotalOil": 311, "todayTotalTime": 299, "theMilleage": 259, "theOil": 19, "theTime": 16}, "travelData": {"totalMilleage": 639114, "totalOil": 56259, "totalTime": 38513}, "event": {"threeRapid": {"totalRapidlyAccelerate": 55, "totalSharpSlowdown": 44, "totalSharpTurn": 46}}}
\ No newline at end of file
{"time": {"dateTime": "2020-08-03 13:45:44", "date": "2020-08-03", "time": "13:45:44"}, "curDayTravel": {"todayTotalMilleage": 9209, "todayTotalOil": 884, "todayTotalTime": 555, "theMilleage": 9209, "theOil": 884, "theTime": 555}, "travelData": {"totalMilleage": 648323, "totalOil": 57143, "totalTime": 39068}, "event": {"threeRapid": {"totalRapidlyAccelerate": 56, "totalSharpSlowdown": 45, "totalSharpTurn": 47}}}
\ No newline at end of file
templates/otherTools/maptool.html
View file @ b97786f6
......@@ -54,7 +54,18 @@
</div>
</div>
<div id="ctrArea_2" style="width:400px;height:250px;background:white;z-index:50;position:absolute;top:160px;right:40px;border-radius:5px;display:none;" class="btn-group btn-group-justified" role="group">
<p>支持录制轨迹和回放轨迹（功能待开发）</p>
<div style="margin: 10px;padding-bottom: 5px;">
<label>轨迹录制：</label>
<button type="button" class="btn btn-default" onclick="changeRecodeStatusOn()">开始录制</button>
<button type="button" class="btn btn-default" onclick="changeRecodeStatusOff()">停止录制</button>
<label id="recordingStatus" style="color:red;">未录制</label>
</div>
<div style="border-width: 1px;border-bottom: 1px solid #eee;margin: 10px;padding-bottom: 5px;">
<button type="button" class="btn btn-default" onclick="cancelOnePoint()">撤销一个点</button>
<button type="button" class="btn btn-default" onclick="clearLine()">清空轨迹</button>
<label>点个数：</label><label id="pointNums" style="color:red;">0</label>
<button style="margin-left:10px;" type="button" class="btn btn-default" onclick="showLineDetail()">轨迹详情</button>
</div>
</div>
<div id="ctrArea_3" style="width:400px;height:60px;background:white;z-index:50;position:absolute;top:160px;right:40px;border-radius:5px;display:none;" class="btn-group btn-group-justified" role="group">
<div style="border-width: 1px;border-bottom: 1px solid #eee;margin: 10px;padding-bottom: 5px;">
......@@ -64,23 +75,35 @@
<label id="distanceTxt" style="color:red;">未测距</label>
</div>
</div>
<div id="lineDetail" style="padding:10px;padding-bottom: 30px;width:400px;height:600px;background:white;z-index:51;position:absolute;top:120px;right:40px;border-radius:5px;display:none;" class="btn-group btn-group-justified" role="group">
<label>轨迹详情：</label><span class="glyphicon glyphicon-remove" aria-hidden="true" style="float: right;right: 5px;" onclick="closeLineDetail()"></span>
<textarea style="width:100%;height:100%;font-size: 12px;" id="lineData"></textarea>
</div>
<div id="container" style="width:100%; height: 750px;">
</div>
</div>
<script>
var map = undefined;
var curShow = "";
//控制点击地图的触发事件 0:默认 1：测距
//控制点击地图的触发事件 0:默认 1：测距 2：录制轨迹
var clickType = 0;
//获取经纬度地址信息类
var geocoder = undefined;
var marker = undefined; //单个点标记
//测距样式
var ruler1 = undefined;
//录制的轨迹数组(用于展示轨迹)
var lineArr = [];
//录制的轨迹数组(用于展示数据)
var lineArr1 = [];
var lineArrRaw = [];
//轨迹对象
var polyline = undefined;
//加载地图
(function(){
map = new AMap.Map('container', {
......@@ -92,6 +115,7 @@
//初始化测距工具
ruler1 = new AMap.RangingTool(map);
})();
//处理地图点击事件
map.on('click', function(ev) {
if(clickType == 0){
......@@ -122,6 +146,8 @@
log.error('根据经纬度查询地址失败');
}
});
}else if(clickType == 2){
recordingTrack(ev);
}
});
function ctrAreaShow(e){
......@@ -202,6 +228,94 @@
ruler1.turnOff();
$("#distanceTxt").text("未测距");
}
//录制轨迹
function recordingTrack(ev){
var lnglat = ev.lnglat;
var lnglattxt = [parseFloat(lnglat["lng"]),parseFloat(lnglat["lat"])];
//国测坐标（高德坐标），转wgs84 （原始坐标）
var rawGps = coordtransform.gcj02towgs84(parseFloat(lnglat["lng"]), parseFloat(lnglat["lat"]));
var lnglattxtraw = [rawGps[0].toFixed(6),rawGps[1].toFixed(6)];
lineArr.push(lnglattxt);
lineArr1.push(lnglattxt);
lineArrRaw.push(lnglattxtraw);
var lineLen = lineArr.length;
if(polyline != undefined){
map.remove(polyline);
}
// 绘制轨迹
polyline = new AMap.Polyline({
map: map,
path: lineArr,
showDir:true,
strokeColor: "#28F", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 3, //线宽
// strokeStyle: "solid" //线样式
});
$("#pointNums").text(lineLen);
}
//开始录制轨迹
function changeRecodeStatusOn(){
clickType = 2;
lineArr = [];
lineArr1 = [];
lineArrRaw = [];
$("#recordingStatus").text("录制中");
}
//取消录制轨迹
function changeRecodeStatusOff(){
clickType = 0;
$("#recordingStatus").text("未录制");
}
//撤销一个点
function cancelOnePoint(){
lineArr.pop();
lineArr1.pop();
lineArrRaw.pop();
map.remove(polyline);
// 绘制轨迹
polyline = new AMap.Polyline({
map: map,
path: lineArr,
showDir:true,
strokeColor: "#28F", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 3, //线宽
// strokeStyle: "solid" //线样式
});
var lineLen = lineArr.length;
$("#pointNums").text(lineLen);
}
//清空轨迹
function clearLine(){
if(polyline != undefined){
lineArr = [];
lineArr1 = [];
lineArrRaw = [];
map.remove(polyline);
var lineLen = lineArr.length;
$("#pointNums").text(lineLen);
}
}
//显示轨迹详情
function showLineDetail(){
var jsonLine = {};
jsonLine["name"] = "gpsLine";
jsonLine["GPSLine"] = lineArr1;
$("#lineData").val(JSON.stringify(jsonLine, null, 4));
$("#lineDetail").css("display","block");
}
//关闭轨迹详情
function closeLineDetail(){
$("#lineDetail").css("display","none");
}
</script>
{% endblock %}
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment