Skip to content

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

地图工具增加查看自定义轨迹功能

parent b97786f6
Hide whitespace changes
Inline Side-by-side
Showing with 104 additions and 4 deletions
data/protocolTools/carData/M202003060520.json
View file @ bfc87ff7
{"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}}} {"time": {"dateTime": "2020-08-04 10:10:21", "date": "2020-08-04", "time": "10:10:21"}, "curDayTravel": {"todayTotalMilleage": 415, "todayTotalOil": 40, "todayTotalTime": 25, "theMilleage": 415, "theOil": 40, "theTime": 25}, "travelData": {"totalMilleage": 653410, "totalOil": 57475, "totalTime": 39385}, "event": {"threeRapid": {"totalRapidlyAccelerate": 58, "totalSharpSlowdown": 47, "totalSharpTurn": 49}}}
\ No newline at end of file \ No newline at end of file
templates/otherTools/index.html
View file @ bfc87ff7
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
{% block leftNav %} {% block leftNav %}
<div id="container1" class="col-sm-3 col-md-2 sidebar" style="margin-top:50px;width:12%;padding:0px;margin-right:15px;"> <div id="container1" class="col-sm-3 col-md-2 sidebar" style="margin-top:50px;width:12%;padding:0px;margin-right:15px;">
<ul class="nav nav-sidebar" style="margin-top:20px;"> <ul class="nav nav-sidebar" style="margin-top:20px;">
<li id="maptools" onclick="swichLeftTab(this)"><a {% if arg.path[1]=="mapTools_view" %} class="active_left_tab" {% endif %}><span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span></span> 地图工具（开发中）</a></li> <li id="maptools" onclick="swichLeftTab(this)"><a {% if arg.path[1]=="mapTools_view" %} class="active_left_tab" {% endif %}><span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span></span> 地图工具</a></li>
</ul> </ul>
</div> </div>
{% endblock %} {% endblock %}
......
templates/otherTools/maptool.html
View file @ bfc87ff7
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
<h5>地址：<p style="display:inline;" id="curLngLatInfo"></p></h5> <h5>地址：<p style="display:inline;" id="curLngLatInfo"></p></h5>
</div> </div>
</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"> <div id="ctrArea_2" style="width:400px;height:160px;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="margin: 10px;padding-bottom: 5px;"> <div style="margin: 10px;padding-bottom: 5px;">
<label>轨迹录制：</label> <label>轨迹录制：</label>
<button type="button" class="btn btn-default" onclick="changeRecodeStatusOn()">开始录制</button> <button type="button" class="btn btn-default" onclick="changeRecodeStatusOn()">开始录制</button>
...@@ -66,6 +66,9 @@ ...@@ -66,6 +66,9 @@
<label>点个数：</label><label id="pointNums" style="color:red;">0</label> <label>点个数：</label><label id="pointNums" style="color:red;">0</label>
<button style="margin-left:10px;" type="button" class="btn btn-default" onclick="showLineDetail()">轨迹详情</button> <button style="margin-left:10px;" type="button" class="btn btn-default" onclick="showLineDetail()">轨迹详情</button>
</div> </div>
<div style="border-width: 1px;border-bottom: 1px solid #eee;margin: 10px;padding-bottom: 5px;">
<button type="button" class="btn btn-default" onclick="showLineArea()">查询轨迹</button>
</div>
</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 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;"> <div style="border-width: 1px;border-bottom: 1px solid #eee;margin: 10px;padding-bottom: 5px;">
...@@ -80,6 +83,50 @@ ...@@ -80,6 +83,50 @@
<label>轨迹详情：</label><span class="glyphicon glyphicon-remove" aria-hidden="true" style="float: right;right: 5px;" onclick="closeLineDetail()"></span> <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> <textarea style="width:100%;height:100%;font-size: 12px;" id="lineData"></textarea>
</div> </div>
<div id="lineShowArea" 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="closeLineArea()"></span>
<button type="button" class="btn btn-xs btn-primary" style="width:60px;" onclick="showInputLine()">查看</button>
<button type="button" class="btn btn-xs btn-primary" style="width:60px;" onclick="clearInputLine()">清空</button>
<textarea style="width:100%;height:500px;font-size: 12px;" id="lineData1" placeholder='请输入：
106.279711,29.585448
106.279711,29.585448
106.279711,29.585448
106.279711,29.585448
106.279711,29.585448
或者:
{
"name": "gpsLine",
"GPSLine": [
[
"106.584986",
"29.564424"
],
[
"106.584815",
"29.562559"
],
[
"106.584043",
"29.560618"
]
]
}
格式'></textarea>
<div>
<select id="simulatorType" class="form-control" style="width:130px;">
<option value="0">M500模拟器</option>
<option value="16">M300模拟器</option>
<option value="32">车安优模拟器</option>
</select>
<select id="witchLine" class="form-control" style="width:150px;">
<option value="0">自动模式</option>
<option value="16">单GPS模式</option>
<option value="32">单BDS模式</option>
<option value="48">GPS+BDS双模式</option>
</select>
<button type="button" class="btn btn-default" onclick="distance()">查询</button>
</div>
</div>
<div id="container" style="width:100%; height: 750px;"> <div id="container" style="width:100%; height: 750px;">
</div> </div>
...@@ -103,6 +150,8 @@ ...@@ -103,6 +150,8 @@
var lineArrRaw = []; var lineArrRaw = [];
//轨迹对象 //轨迹对象
var polyline = undefined; var polyline = undefined;
//用于显示查询的轨迹对象
var showLineObj = undefined;
//加载地图 //加载地图
(function(){ (function(){
...@@ -306,7 +355,7 @@ ...@@ -306,7 +355,7 @@
function showLineDetail(){ function showLineDetail(){
var jsonLine = {}; var jsonLine = {};
jsonLine["name"] = "gpsLine"; jsonLine["name"] = "gpsLine";
jsonLine["GPSLine"] = lineArr1; jsonLine["GPSLine"] = lineArrRaw;
$("#lineData").val(JSON.stringify(jsonLine, null, 4)); $("#lineData").val(JSON.stringify(jsonLine, null, 4));
$("#lineDetail").css("display","block"); $("#lineDetail").css("display","block");
...@@ -316,6 +365,57 @@ ...@@ -316,6 +365,57 @@
function closeLineDetail(){ function closeLineDetail(){
$("#lineDetail").css("display","none"); $("#lineDetail").css("display","none");
} }
//显示回放轨迹面板
function showLineArea(){
$("#lineShowArea").css("display","block");
}
//关闭回放轨迹面板
function closeLineArea(){
$("#lineShowArea").css("display","none");
}
//展示输入的轨迹
function showInputLine(){
var lineInputTxt = $("#lineData1").val();
var lineInputShowArr = [];
try{
$.parseJSON(lineInputTxt);
lineInputShowArr = $.parseJSON(lineInputTxt)["GPSLine"];
}catch(e){
var lineInputArr = lineInputTxt.split("\n");
for(var i = 0;i < lineInputArr.length;i++){
lineInputShowArr.push(lineInputArr[i].split(","));
}
}
if(showLineObj != undefined){
map.remove(showLineObj);
}
for(var j = 0;j < lineInputShowArr.length;j++){
var cvtGps = coordtransform.wgs84togcj02(parseFloat(lineInputShowArr[j][0]), parseFloat(lineInputShowArr[j][1]));
cvtGps[0] = cvtGps[0].toFixed(6);
cvtGps[1] = cvtGps[1].toFixed(6);
lineInputShowArr[j] = cvtGps;
}
var centerPoint = lineInputShowArr[parseInt(lineInputShowArr.length / 2)];
// 绘制轨迹
showLineObj = new AMap.Polyline({
map: map,
path: lineInputShowArr,
showDir:true,
strokeColor: "#28F", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});
map.setCenter(centerPoint);
}
//清除展示的轨迹
function clearInputLine(){
if(showLineObj != undefined){
map.remove(showLineObj);
}
$("#lineData1").val("");
}
</script> </script>
{% endblock %} {% endblock %}
</div> </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