燃气值班人员轨迹回放可暂停

gassafety-web/src/components/PopWindowGis/removeLineInfoWindow.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2021-08-06 17:32:12
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2023-05-29 11:03:05
+ * @FilePath: /gassafety-web/src/components/PopWindowGis/removeLineInfoWindow.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
-  <div @mousedown.stop="deleteLine" class="wrapper">
-    <el-button type="danger" icon="el-icon-delete" circle></el-button>
+  <div class="wrapper">
+    <!-- <template v-if="!marker.moveMarker.endFlag">
+      <el-button
+        @click.stop="markerPauseMove"
+        v-if="marker.moveMarker.animationFlag"
+      >
+        暂停</el-button
+      >
+      <el-button @click.stop="markerResumeMove" v-else> 继续</el-button>
+    </template>
+    <el-button @click.stop="deleteLine"> 删除</el-button> -->
+    <template v-if="!map.endFlag">
+      <el-button
+        v-if="map.animationFlag"
+        @click.stop="markerPauseMove"
+        icon="el-icon-video-pause"
+        circle
+      ></el-button>
+      <el-button
+        v-else
+        @click.stop="markerResumeMove"
+        icon="el-icon-video-play"
+        circle
+      ></el-button>
+    </template>
+    <el-button
+      @click.stop="deleteLine"
+      type="danger"
+      icon="el-icon-delete"
+      circle
+    ></el-button>
+    <!-- {{marker.moveMarker.animationFlag}} -->
   </div>
 </template>
 
@@ -8,30 +46,36 @@
 export default {
   props: {
     map: {
-      type: Object,
+      type: Object
     },
     marker: {
-      type: Object,
-    },
-  },
-  created() {
-
+      type: Object
+    }
   },
+  created() {},
   methods: {
     deleteLine() {
-      // console.log("999999")
+      console.log("999999");
       this.map.workerManAttrRemove(this.marker);
       this.marker.infoWindow.close();
-      
     },
+    markerPauseMove() {
+      this.map.markerPauseMove(this.marker);
     },
+    markerResumeMove() {
+      this.map.markerResumeMove(this.marker);
+    }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
 .wrapper {
-  width: 36px;
-  height: 36px;
+  // width: 100px;
+  // height: 36px;
   // background: #fff;
+  .el-button--medium{
+    font-size: 20px;
+  }
 }
 </style>

gassafety-web/src/utils/gaodeMapView.js

@@ -449,15 +449,15 @@ class gaodeMap {
   removeMarker(type) {
     // 获取过滤出来的marker
     // 如果打开的是档期那type人员，就清空infowindow
-    if(this.markerType == type){
-      this.closeInfoWindow()
+    if (this.markerType == type) {
+      this.closeInfoWindow();
     }
     const newOriginMaker = this.markers.filter(item => {
-      console.log(item.markerType)
+      console.log(item.markerType);
       return item.markerType == type;
     });
     newOriginMaker.forEach(item => {
-      this.myMap.remove(item)
+      this.myMap.remove(item);
     });
     console.log(newOriginMaker);
     newOriginMaker.forEach(item => {
@@ -791,12 +791,16 @@ class gaodeMap {
   }
 
   //
+  // 值班人员是否在移动
+  animationFlag = false;
+  // 本次回放是否结束
+  endFlag=false;
   trackBack(marker, arr, data) {
     this.tracMoveFlag = true;
     // 飞过去
     this.panTo(arr[0]);
     // 放大
-    this.myMap.setZoom(13);
+    // this.myMap.setZoom(13);
     // 值班人员轨迹回放
     AMap.plugin("AMap.MoveAnimation", () => {
       let lineArr = arr;
@@ -813,6 +817,10 @@ class gaodeMap {
         icon,
         offset: new AMap.Pixel(-13, -26)
       });
+      // 是否在移动
+      this.animationFlag = true;
+      // 本次回放开始
+      this.endFlag=false;
       
       marker.polyline = new AMap.Polyline({
         map: map,
@@ -874,6 +882,12 @@ class gaodeMap {
             lnglat: e.passedPos
           };
           map.remove(marker.moveMarker);
+          // 此次结束
+          this.endFlag = true;
+          // 值班人员marker不在移动
+          this.animationFlag = false;
+
+          console.log("删除自身");
         } else {
           workPoint = this.addMarker(DEVICE_TYPE.SMALLINSPECTOR, data[e.index]);
           // workPoint.infoWindow.open(map,e.passedPos);
@@ -890,7 +904,7 @@ class gaodeMap {
       });
       marker.moveMarker.moveAlong(lineArr, {
         // 每一段的时长
-        duration: 1200,
+        duration: 2000,
         // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
         autoRotation: false
       });
@@ -909,6 +923,21 @@ class gaodeMap {
     }
     marker.pointArr = [];
   }
+  // 暂停点暴击
+  markerPauseMove(animationMarker) {
+    animationMarker.moveMarker.pauseMove();
+    // 暂停移动的标记
+    this.animationFlag = false;
+
+    // animationMarker.moveMarker.animationFlag=false;
+  }
+  // 重启点标记
+  markerResumeMove(animationMarker) {
+    animationMarker.moveMarker.resumeMove();
+    // 继续移动的标记
+    // animationMarker.moveMarker.animationFlag=true;
+    this.animationFlag = true;
+  }
 
   /**
    * 添加折线