增加小汽车轨迹回放功能

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

 /*
  * @Author: your name
  * @Date: 2022-01-11 13:45:12
- * @LastEditTime: 2022-03-16 15:06:43
+ * @LastEditTime: 2022-03-18 10:59:31
  * @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
@@ -79,7 +79,7 @@ export class EditorMap {
       // 获取朝阳区的边界信息
       var bounds = result.districtList[0].boundaries;
       var polygons = [];
-      console.log("boundsboundsboundsboundsbounds",bounds)
+      console.log("boundsboundsboundsboundsbounds", bounds);
 
       if (bounds) {
         for (var i = 0, l = bounds.length; i < l; i++) {
@@ -97,7 +97,7 @@ export class EditorMap {
             strokeWeight: 4,
             strokeColor: "#09f",
             path: bounds[i],
-          })
+          });
           // polygons.push(polygon);
         }
       }
@@ -407,6 +407,7 @@ export class EditorMap {
   createMarker(MarkerOptions) {
     return new AMap.Marker(MarkerOptions);
   }
+
   // 地图上add管道
   addPipeLine(objData, component) {
     const { path, pipePressure, iconType } = objData;
@@ -670,4 +671,51 @@ export class EditorMap {
       }
     }
   }
+  // 轨迹回放
+  /**
+   * @description:
+   * @param {*} vehicleId 设备id
+   * @param {*} path 轨迹回访率丼
+   * @return {*}
+   */
+  backTrack(vehicleId, path) {
+    infowindowClose();
+    AMap.plugin("AMap.MoveAnimation", () => {
+      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", () => {
+        marker.passedPolyline.setPath(e.passedPath);
+        this.map.setCenter(e.target.getPosition(), true);
+      });
+    });
+  }
+  clearbackTrack(vehicleId) {
+    let marker = this.allDevice[9].filter(
+      (item) => item.getExtData().vehicleId == vehicleId
+    )[0];
+    if (marker) {
+      this.map.remove(marker);
+      this.map.remove(marker.polyline);
+      this.map.remove(marker.passedPolyline);
+      infowindowClose();
+    }
+  }
 }