地图工具，完成了轨迹的编辑

templates/otherTools/maptool.html

@@ -53,7 +53,7 @@
                 <h5>地址：<p style="display:inline;" id="curLngLatInfo"></p></h5>
             </div>
         </div>
-        <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 id="ctrArea_2" style="width:400px;height:280px;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;">
                 <label>轨迹录制：</label>
                 <button type="button" class="btn btn-default" onclick="changeRecodeStatusOn()">开始录制</button>
@@ -68,6 +68,25 @@
             </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>
+                <label style="margin-left:20px;">轨迹长度：</label><input disabled="disabled" type="text" id="searched_gpsLen" class="form-control" style="display:inline;width:80px;" value="0">
+                <div style="margin-top:5px;">
+                    <label>查询GPS点：</label>
+                    <input type="text" id="index_point_search" class="form-control" style="display:inline;width:60px;" value="1" placeholder="索引">
+                    <input type="text" id="index_point_search_result" class="form-control" style="display:inline;width:170px;" placeholder="查询结果">
+                    <button type="button" class="btn btn-default" onclick="searchGpsPointByIndex()">查询</button>
+                </div>
+                <div style="margin-top:5px;">
+                    <label>查询点索引：</label>
+                    <input type="text" id="point_index_search" class="form-control" style="display:inline;width:170px;" placeholder="输入经纬度">
+                    <input type="text" id="point_index_search_result" class="form-control" style="display:inline;width:60px;" value="" placeholder="索引">
+                    <button type="button" class="btn btn-default" onclick="searchIndexByGpsPoint()">查询</button>
+                </div>
+                <div style="margin-top:5px;">
+                    <label>修改GPS点：</label>
+                    <input type="text" id="point_index_change" class="form-control" style="display:inline;width:60px;" value="1" placeholder="索引">
+                    <input type="text" id="point_index_change_content" class="form-control" style="display:inline;width:170px;" placeholder="输入经纬度">
+                    <button type="button" class="btn btn-default" onclick="modifyGpsPoint()">修改</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">
@@ -152,7 +171,9 @@
     //用于显示查询的轨迹对象
     var showLineObj = undefined;
 
-    //加载地图
+    /*************************************************************
+    * 加载地图
+    *************************************************************/
     (function(){
         map = new AMap.Map('container', {
             zoom:13,//级别
@@ -164,7 +185,9 @@
         ruler1 = new AMap.RangingTool(map);
     })();
 
-    //处理地图点击事件
+    /*************************************************************
+    * 处理地图点击事件
+    *************************************************************/
     map.on('click', function(ev) {
         if(clickType == 0){
             var lnglat = ev.lnglat;
@@ -198,6 +221,10 @@
             recordingTrack(ev);
         }
     });
+
+    /*************************************************************
+    * 控制面板的展示与隐藏
+    *************************************************************/
     function ctrAreaShow(e){
         var cliId = $(e).attr("id");
         if(cliId == "ctrArea1"){
@@ -233,7 +260,10 @@
         }
     }
 
-    //设置地图中心点，移动地图
+
+    /*************************************************************
+    * 根据经纬度查询地图上的位置点
+    *************************************************************/
     function setposition(){
         if(marker != undefined){
             map.remove(marker);
@@ -277,7 +307,9 @@
         $("#distanceTxt").text("未测距");
     }
 
-    //录制轨迹
+    /*************************************************************
+    * 轨迹录制功能
+    *************************************************************/
     function recordingTrack(ev){
         var lnglat = ev.lnglat;
         var lnglattxt = [parseFloat(lnglat["lng"]),parseFloat(lnglat["lat"])];
@@ -377,7 +409,10 @@
     function closeLineArea(){
         $("#lineShowArea").css("display","none");
     }
-    //展示输入的轨迹
+
+    /*************************************************************
+    * 展示输入的轨迹
+    *************************************************************/
     function showInputLine(){
         var lineInputTxt = $("#lineData1").val();
         var lineInputShowArr = [];
@@ -401,6 +436,7 @@
         if(showLineObj != undefined){
             map.remove(showLineObj);
         }
+        $("#searched_gpsLen").val(lineInputShowArr.length);
         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);
@@ -426,8 +462,12 @@
             map.remove(showLineObj);
         }
         $("#lineData1").val("");
+        $("#searched_gpsLen").val(0);
     }
-    //切换模拟器后获取新的轨迹数据
+
+    /*************************************************************
+    * 切换模拟器后获取新的轨迹数据
+    *************************************************************/
     function getNewLines(e){
         var type = $(e).val();
         var data = {};
@@ -454,7 +494,9 @@
         });
     }
 
-    //点击查看gpsline
+    /*************************************************************
+    * 展示模拟器的gps轨迹
+    *************************************************************/
     function showModGpsLine(){
         var type = $("#simulatorType").val();
         var gpsLine = $("#witchLine option:selected").val();
@@ -484,6 +526,7 @@
                     }
                     */
                     var lineInputShowArr1 = []
+                    $("#searched_gpsLen").val(modGpsLines.length);
                     for(var j = 0;j < modGpsLines.length;j++){
                         var temp = [];
                         temp[0] = parseFloat(modGpsLines[j]["lng"]);
@@ -513,6 +556,155 @@
             }
         });
     }
+
+    /*************************************************************
+    * 根据索引查询gps点
+    *************************************************************/
+    function searchGpsPointByIndex(){
+        var pointIndex = parseInt($("#index_point_search").val());
+        var pointGps = "";
+        var lineInputTxt = $("#lineData1").val();
+
+        try{                               //json格式的gpsline
+            $.parseJSON(lineInputTxt);
+            var lineInputShowOri = $.parseJSON(lineInputTxt)["GPSLine"];
+        }catch(e){                         //非json格式的gpsline
+            alert("请输入json格式的轨迹!");
+            console.log(e.message,e.name,e.lineNumber)
+            return 1;
+        }
+
+        try{
+            pointGps = lineInputShowOri[pointIndex - 1]["lng"] + "," + lineInputShowOri[pointIndex - 1]["lat"];
+            $("#index_point_search_result").val(pointGps);
+        }catch(e){
+            alert("查询失败!");
+            $("#index_point_search_result").val("");
+            console.log(e.message,e.name,e.lineNumber)
+        }
+
+        if(marker != undefined){
+            map.remove(marker);
+        }
+        var theGps = pointGps.split(",")
+
+        AMap.convertFrom(theGps,'gps', function (status, result) {
+          if (result.info === 'ok') {
+            var cvtGps = [result["locations"][0]["lng"],result["locations"][0]["lat"]];
+            //var cvtGps = coordtransform.wgs84togcj02(parseFloat(theGps[0]), parseFloat(theGps[1]));
+            marker = new AMap.Marker({
+                //position: new AMap.LngLat(theGps[0],theGps[1]),   // 使用原始经纬度
+                position: new AMap.LngLat(cvtGps[0],cvtGps[1]),    // 使用转换为高德地图标记的经纬度
+                title: '定位'
+            });
+            map.setCenter(theGps);
+            map.add(marker);
+            //显示经纬度地址信息
+            geocoder.getAddress(cvtGps, function(status, result) {
+                if (status === 'complete'&&result.regeocode) {
+                    var address = result.regeocode.formattedAddress;
+                    $("#toLngLatInfo").text(address);
+                }else{
+                    log.error('根据经纬度查询地址失败');
+                }
+            });
+          }
+        });
+    }
+
+    /*************************************************************
+    * 根据gps点查询索引位置
+    *************************************************************/
+    function searchIndexByGpsPoint(){
+        var pointGps = $("#point_index_search").val();
+        var pointArr = pointGps.split(",");
+        var lng = (parseInt(parseFloat(pointArr[0]) * 100000)/100000).toFixed(5)
+        var lat = (parseInt(parseFloat(pointArr[1]) * 100000)/100000).toFixed(5)
+
+        var lineInputTxt = $("#lineData1").val();
+        try{                               //json格式的gpsline
+            $.parseJSON(lineInputTxt);
+            var lineInputShowOri = $.parseJSON(lineInputTxt)["GPSLine"];
+        }catch(e){                         //非json格式的gpsline
+            alert("请输入json格式的轨迹!");
+            console.log(e.message,e.name,e.lineNumber)
+            return 1;
+        }
+
+        var resultTxt = "";
+        for(var i = 0;i < lineInputShowOri.length;i++){
+            lng = lng.toString();
+            if(lineInputShowOri[i]["lng"].toString().includes(lng)){
+                lat = lat.toString();
+                if(lineInputShowOri[i]["lat"].toString().includes(lat)){
+                    if(resultTxt === ""){
+                        resultTxt = resultTxt + (i + 1).toString();
+                    }else{
+                        resultTxt = resultTxt + "," + (i + 1).toString();
+                    }
+                }
+            }
+        }
+        $("#point_index_search_result").val(resultTxt);
+    }
+
+    /*************************************************************
+    * 修改索引点的gps值
+    *************************************************************/
+    function modifyGpsPoint(){
+        var pointIndex = parseInt($("#point_index_change").val());
+        var pointContent = $("#point_index_change_content").val();
+        var pointArr = pointContent.split(",");
+
+        var lineInputTxt = $("#lineData1").val();
+        try{                               //json格式的gpsline
+            $.parseJSON(lineInputTxt);
+            var lineInputJson = $.parseJSON(lineInputTxt);
+            var lineInputShowOri = $.parseJSON(lineInputTxt)["GPSLine"];
+        }catch(e){                         //非json格式的gpsline
+            alert("请输入json格式的轨迹!");
+            console.log(e.message,e.name,e.lineNumber)
+            return 1;
+        }
+
+        pointIndex = pointIndex - 1;
+        lineInputShowOri[pointIndex]["lng"] = pointArr[0];
+        lineInputShowOri[pointIndex]["lat"] = pointArr[1];
+        lineInputJson["GPSLine"] = lineInputShowOri;
+        $("#lineData1").val(JSON.stringify(lineInputJson, null, 4));
+
+
+        var modGpsLines = lineInputJson["GPSLine"];
+        if(showLineObj != undefined){
+            map.remove(showLineObj);
+        }
+        var modGpsLines = lineInputJson["GPSLine"];
+        var lineInputShowArr1 = [];
+        $("#searched_gpsLen").val(modGpsLines.length);
+        for(var j = 0;j < modGpsLines.length;j++){
+            var temp = [];
+            temp[0] = parseFloat(modGpsLines[j]["lng"]);
+            temp[1] = parseFloat(modGpsLines[j]["lat"]);
+            var cvtGps = coordtransform.wgs84togcj02(temp[0], temp[1]);
+            temp[0] = cvtGps[0].toFixed(6);
+            temp[1] = cvtGps[1].toFixed(6);
+            lineInputShowArr1.push(temp);
+        }
+        modGpsLines = lineInputShowArr1;
+        var centerPoint = modGpsLines[parseInt(modGpsLines.length / 2)];
+        // 绘制轨迹
+        showLineObj = new AMap.Polyline({
+            map: map,
+            path: modGpsLines,
+            showDir:true,
+            strokeColor: "#28F",  //线颜色
+            // strokeOpacity: 1,     //线透明度
+            strokeWeight: 5,      //线宽
+            // strokeStyle: "solid"  //线样式
+        });
+        map.setCenter(centerPoint);
+    }
+
     </script>
     {% endblock %}
 </div>