增加了轨迹录制功能

data/protocolTools/carData/M202003060520.json

-{"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}}}
+{"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

@@ -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>