加上轨迹点

gassafetyprogress-web/src/assets/mapImages/carTarget.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1647852854992" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2263" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M662.04973405 329.56834123l108.40905238-142.19888693c4.22372932-5.63163908 4.22372932-11.26327817 1.40790978-18.30282702-2.81581955-5.63163908-8.44745863-9.8553684-15.48700748-9.85536841H218.55815604c-9.8553684 0-16.89491725 7.03954885-16.89491725 16.89491726V867.38987389c0 9.8553684 7.03954885 16.89491725 16.89491725 16.89491726s16.89491725-7.03954885 16.89491726-16.89491726V487.25423562h522.33452519c7.03954885 0 12.67118794-4.22372932 15.48700749-9.8553684s1.40790977-12.67118794-2.81581955-18.30282703l-108.40905238-129.52769896z" fill="#EA4942" p-id="2264"></path></svg>
\ No newline at end of file

gassafetyprogress-web/src/utils/mapClass/map.js

 /*
  * @Author: your name
  * @Date: 2022-01-11 13:45:12
- * @LastEditTime: 2022-03-21 08:57:08
+ * @LastEditTime: 2022-03-21 17:43:29
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/utils/mapClass.js
@@ -313,9 +313,7 @@ export class EditorMap {
     this.allDevice[iconType].push(device);
     this.deviceEvent(device, compontent);
     // 设备的事件函数
-    if(iconType<10){
-      this.deviceEvent(device, compontent);
-    }
+    this.deviceEvent(device, compontent);
   }
   deviceEvent(device, compontent) {
     device.on("click", (e) => {
@@ -334,7 +332,11 @@ export class EditorMap {
       const data = target.getExtData();
       console.log(data);
       const name =
-        data.nickName || data.deviceName || data.videoName || data.stationName;
+        data.nickName ||
+        data.deviceName ||
+        data.videoName ||
+        data.stationName ||
+        data.time;
       target.setLabel({ content: name, direction: "top" });
     });
     device.on("mouseout", (e) => {
@@ -681,65 +683,95 @@ export class EditorMap {
    * @param {*} path 轨迹回访率丼
    * @return {*}
    */
-  backTrack(vehicleId, path) {
+  backTrack(vehicleId, path,times) {
     this.infowindowClose();
 
     AMap.plugin("AMap.MoveAnimation", () => {
-      let marker = this.allDevice[9].filter(item => item.getExtData().vehicleId == vehicleId)[0];
+      let marker = this.allDevice[9].filter(
+        (item) => item.getExtData().vehicleId == vehicleId
+      )[0];
 
-        // 绘制轨迹
-        marker.polyline = new AMap.Polyline({
-          map: this.map,
-          path,
-          showDir: true,
-          strokeColor: "#28F", //线颜色
-          // strokeOpacity: 1,     //线透明度
-          strokeWeight: 6, //线宽
-          // strokeStyle: "solid"  //线样式
-        });
-        marker.passedPolyline = new AMap.Polyline({
-          map: this.map,
-          strokeColor: "#AF5", //线颜色
-          strokeWeight: 6, //线宽
-        });
-        marker.on("moving", (e) => {
-          marker.passedPolyline.setPath(e.passedPath);
-          // this.map.setCenter(e.target.getPosition(), true);
-        });
+      // 绘制轨迹
+      marker.polyline = new AMap.Polyline({
+        map: this.map,
+        path,
+        showDir: true,
+        strokeColor: "#28F", //线颜色
+        // strokeOpacity: 1,     //线透明度
+        strokeWeight: 6, //线宽
+        // strokeStyle: "solid"  //线样式
+      });
+      marker.passedPolyline = new AMap.Polyline({
+        map: this.map,
+        strokeColor: "#AF5", //线颜色
+        strokeWeight: 6, //线宽
+      });
+      marker.on("moving", (e) => {
+        marker.passedPolyline.setPath(e.passedPath);
+        // this.map.setCenter(e.target.getPosition(), true);
+        // console.log(getPosition());
+      });
 
-        marker.moveAlong(path , {
-          // 每一段的时长
-          duration: 8000,//可根据实际采集时间间隔设置
-          // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
-          autoRotation: true,
-        });
+      // 每个path的点
+      marker.pointArr = [];
+      // carTarget
 
-    });
+      //点击的时候，先传进来一个点
+      const carPathData = { ...marker.getExtData() };
+      carPathData.iconType = 14;
+      this.addDevice(carPathData,null);
+      marker.on("moveend", (e) => {
+        // this.addDevice(carPathData,carBackComponent);
+        // 如果不是最后一个点，就创建一个新的worderpoint，如果是就不创建，并且把自身删除
 
-  }
+        let z = {
+          longitude: e.pos[0],
+          latitude: e.pos[1],
+          time: times[e.index],
+        };
+        if (e.index == path.length - 1) {
+        } else {
+          this.addDevice(z, null);
+          // workPoint.infoWindow.open(map,e.passedPos);
+          marker.pointArr.push(workPoint);
+        }
+        console.log("定点", e);
+      });
 
+      marker.moveAlong(path, {
+        // 每一段的时长
+        duration: 8000, //可根据实际采集时间间隔设置
+        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
+        autoRotation: true,
+      });
+    });
+  }
 
   clearbackTrack(vehicleId) {
     // let marker = this.allDevice[9].filter(
     //   (item) => item.getExtData().vehicleId == vehicleId
     // )[0];
-    this.allDevice["9"]?.forEach(item=>{
+    this.allDevice["9"]?.forEach((item) => {
       if (item) {
         // 停止运动
         item.stopMove();
-        if(item.polyline){
+        // 删除每个点
+        item.pointArr?.forEach((iten) => {
+          this.map.remove(iten);
+        });
+        if (item.polyline) {
           this.map.remove(item.polyline);
         }
-        if(item.passedPolyline){
+        if (item.passedPolyline) {
           this.map.remove(item.passedPolyline);
         }
         this.map.remove(item);
       }
-    })
+    });
     // 最后把数组清空
-    this.allDevice["9"]=[];
-
+    this.allDevice["9"] = [];
+    // 把car的路径点也清空
+    this.allDevice["14"] = [];
     this.infowindowClose();
-
   }
 }