回放

src/components/easyMap/initMapInfo.ts

@@ -52,8 +52,8 @@ const baseMapLayers = [
     key: 'sea',
     name: 'base_haitu',
     label: '海图',
-    maxZoom: 20,
-    minZoom: 1,
+    maxZoom: 23,
+    minZoom: 0,
     visible: false,
     img: HaituImg
   },
@@ -61,8 +61,8 @@ const baseMapLayers = [
     key: 'tdtsl',
     name: 'base_tianditu',
     label: '陆图',
-    maxZoom: 20,
-    minZoom: 1,
+    maxZoom: 23,
+    minZoom: 0,
     visible: true,
     img: LutuImg
   },
@@ -70,8 +70,8 @@ const baseMapLayers = [
     key: 'hnimg',
     name: 'base_weixingtu',
     label: '卫星图',
-    maxZoom: 20,
-    minZoom: 1,
+    maxZoom: 23,
+    minZoom: 0,
     visible: false,
     img: WeixingImg
   },

src/views/ship-playback/index.vue

@@ -26,6 +26,7 @@
     </div>
     <PlayBarCom
       class="play-bar"
+      ref="ref_playBar"
       :timeArea="playBar.timeArea"
       :cachePro="playBar.cachePro"
       :total="playBar.total"
@@ -55,7 +56,9 @@ import * as layer from "ol/layer";
 import WebGLVectorLayerRenderer from "ol/renderer/webgl/VectorLayer";
 import * as format from "ol/format";
 import * as source from "ol/source";
+import * as ol from "ol"
 import ShipImg from './AIS.svg'
+import * as geom from "ol/geom";
 
 class WebGLLineLayer extends layer.Layer {
   createRenderer() {
@@ -102,6 +105,7 @@ export default defineComponent({
       webglLineLayer: <any>null,
     })
     const ref_form = ref()
+    const ref_playBar = ref()
     const mapLoad = (map, func) => {
       state.map = map
       state.mapFunc = func
@@ -174,32 +178,106 @@ export default defineComponent({
         }
       })
     }
-    const onPlayRefresh = ({time, flag}) => {
-      const pointFeats: any = []
-      const lineFeats: any = []
-      Object.entries(state.shipData).forEach(([id, value]: any) => {
-        const lines: any = []
-        let real: any = null
-        for (let i = 0; i < value.points.length; i++) {
-          if (new Date(value.points[i].time).getTime() > time) {
-            break
+    const onPlayRefresh = ({time, flag, speed}) => {
+      const sss = new Date()
+      if (flag === 'start' || flag === 'jump') {
+        const shipDataBack = JSON.parse(JSON.stringify(state.shipData))
+        const pointFeats: any = []
+        const lineFeats: any = []
+        Object.entries(shipDataBack).forEach(([id, value]: any) => {
+          const lines: any = []
+          let real: any = null
+          for (let i = 0; i < value.points.length; i++) {
+            if (new Date(value.points[i].time).getTime() > time) {
+              break
+            }
+            lines.push(value.points[i].wkt)
+            real = value.points[i]
           }
-          lines.push(value.points[i].wkt)
-          real = value.points[i]
-        }
-        const pf: any = new format.WKT().readFeature(real.wkt)
-        pf.set('course', real.cogs)
-        pointFeats.push(pf)
-        const lf: any = new format.WKT().readFeature(that.$easyMap.formatPosition.wptTwl(lines))
-        lf.set('lineColor', value.config.color)
-        lineFeats.push(lf)
-      });
-      // 线
-      state.webglLineLayer.getSource().clear()
-      state.webglLineLayer.getSource().addFeatures(lineFeats)
-      // 点
-      state.webglPointLayer.getSource().clear()
-      state.webglPointLayer.getSource().addFeatures(pointFeats)
+          const pf: any = new format.WKT().readFeature(real.wkt)
+          pf.set('course', real.cogs)
+          pf.set('ID', id)
+          pf.setId('point' + id)
+          pointFeats.push(pf)
+          let lf: any = new ol.Feature()
+          if (lines.length > 1) {
+            lf = new format.WKT().readFeature(that.$easyMap.formatPosition.wptTwl(lines))
+          } else if (lines.length === 1) {
+            lf.set('startCoor', lines[0])
+          }
+          lf.set('ID', id)
+          lf.setId('line' + id)
+          lf.set('lineColor', value.config.color)
+          lf.set('willPoints', value.points.slice(lines.length))
+          lineFeats.push(lf)
+        });
+        // 线
+        state.webglLineLayer.getSource().clear()
+        state.webglLineLayer.getSource().addFeatures(lineFeats)
+        // 点
+        state.webglPointLayer.getSource().clear()
+        state.webglPointLayer.getSource().addFeatures(pointFeats)
+      } else if (flag === 'play') {
+        state.webglLineLayer.getSource().forEachFeature(lineFeature => {
+          const wp = lineFeature.get('willPoints')
+          const lines: any = []
+          if (wp.length > 1) {
+            for (let i = 0; i < wp.length; i++) {
+              if (new Date(wp[i].time).getTime() > time) {
+                if (i > 0) {
+                  const pointFeature = state.webglPointLayer.getSource().getFeatureById('point' + lineFeature.get('ID'))
+                  pointFeature.getGeometry().setCoordinates(that.$easyMap.formatPosition.wptTcpt(wp[i - 1].wkt))
+                  pointFeature.set('course', wp[i - 1].cogs)
+                  lineFeature.set('willPoints', wp.slice(i - 1))
+                }
+                break
+              }
+              lines.push(that.$easyMap.formatPosition.wptTcpt(wp[i].wkt))
+            }
+            if (lines.length > 0) {
+              if (lineFeature.getGeometry()?.getType() === 'LineString') {
+                lineFeature.getGeometry().setCoordinates([...lineFeature.getGeometry().getCoordinates(), ...lines])
+              } else if (lineFeature.get('startCoor')) {
+                lineFeature.setGeometry(new geom.LineString([lineFeature.get('startCoor'), ...lines]))
+                lineFeature.unset('startCoor')
+              } else {
+                if (lines.length === 1) {
+                  lineFeature.set('startCoor', that.$easyMap.formatPosition.wptTcpt(lines[0]))
+                } else if (lines.length > 1) {
+                  lineFeature.setGeometry(new geom.LineString([...lines]))
+                }
+              }
+            }
+          } else if (wp.length === 1) {
+            if (new Date(wp[0].time).getTime() <= time) {
+              const pointFeature = state.webglPointLayer.getSource().getFeatureById('point' + lineFeature.get('ID'))
+              pointFeature.getGeometry().setCoordinates(that.$easyMap.formatPosition.wptTcpt(wp[0].wkt))
+              pointFeature.set('course', wp[0].cogs)
+              lineFeature.set('willPoints', [])
+              if (lineFeature.getGeometry()?.getType() === 'LineString') {
+                lineFeature.getGeometry().appendCoordinate(that.$easyMap.formatPosition.wptTcpt(wp[0].wkt))
+              } else if (lineFeature.get('startCoor')) {
+                lineFeature.setGeometry(new geom.LineString([lineFeature.get('startCoor'), that.$easyMap.formatPosition.wptTcpt(wp[0].wkt)]))
+                lineFeature.unset('startCoor')
+              } else {
+                lineFeature.set('startCoor', that.$easyMap.formatPosition.wptTcpt(wp[0].wkt))
+              }
+            }
+          }
+
+        })
+      }
+      console.log((new Date().getTime() - sss.getTime()) / 1000 + '秒')
+      if (speed > 50) {
+        setTimeout(() => {
+          ref_playBar.value.nextPlay()
+        }, 2000)
+      } else {
+        setTimeout(() => {
+          ref_playBar.value.nextPlay()
+        }, 1000)
+      }
+
     }
     onMounted(() => {
     })
@@ -208,7 +286,8 @@ export default defineComponent({
       mapLoad,
       onSearch,
       ref_form,
-      onPlayRefresh
+      onPlayRefresh,
+      ref_playBar
     }
   },
 })

src/views/ship-playback/play-bar.vue

@@ -31,7 +31,7 @@
             <el-dropdown-item :command="10">x10</el-dropdown-item>
             <el-dropdown-item :command="100">x100</el-dropdown-item>
             <el-dropdown-item :command="500">x500</el-dropdown-item>
-            <el-dropdown-item :command="2000">x2000</el-dropdown-item>
+            <el-dropdown-item :command="1000">x1000</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -95,6 +95,7 @@ export default defineComponent({
           right: 0,
         }
       },
+
     })
     const triggerRef = ref({
       getBoundingClientRect() {
@@ -141,7 +142,7 @@ export default defineComponent({
           const pro = getMouseProOnBar(e)
           if (pro < props.cachePro) {
             setCurrentTimeByPro(pro)
-            emit('refresh', {time: state.currentTime, flag: 'jump'})
+            emit('refresh', {time: state.currentTime, flag: 'jump', speed: state.speed})
             state.isStart = true
           }
         }
@@ -161,25 +162,42 @@ export default defineComponent({
         }
       }
     }
+    const nextPlay = () => {
+      if (state.isPlay) {
+        state.currentTime += 1000 * state.speed
+        if (GT(state.currentTime) > props.timeArea[1]) {
+          state.currentTime = GT(props.timeArea[1])
+        }
+        emit('refresh', {time: state.currentTime, flag: 'play', speed: state.speed})
+      }
+    }
     let timer: any = null
     watch(() => [state.isPlay, state.speed], () => {
-      clearInterval(timer)
       if (state.isPlay) {
-        timer = setInterval(() => {
-          state.currentTime += 1000 * state.speed
-          if (GT(state.currentTime) > props.timeArea[1]) {
-            state.currentTime = GT(props.timeArea[1])
-          }
-          emit('refresh', {time: state.currentTime, flag: !state.isStart ? 'start' : 'play'})
-          state.isStart = true
-        }, 1000)
+        state.currentTime += 1000 * state.speed
+        if (GT(state.currentTime) > props.timeArea[1]) {
+          state.currentTime = GT(props.timeArea[1])
+        }
+        emit('refresh', {time: state.currentTime, flag: !state.isStart ? 'start' : 'play', speed: state.speed})
+        state.isStart = true
       }
+      // clearInterval(timer)
+      // if (state.isPlay) {
+      //   timer = setInterval(() => {
+      //     state.currentTime += 1000 * state.speed
+      //     if (GT(state.currentTime) > props.timeArea[1]) {
+      //       state.currentTime = GT(props.timeArea[1])
+      //     }
+      //     emit('refresh', {time: state.currentTime, flag: !state.isStart ? 'start' : 'play'})
+      //     state.isStart = true
+      //   }, 1000)
+      // }
     })
     watch(() => playProgressCpt.value, (n) => {
       if (n > props.cachePro) {
         state.isPlay = false
         setCurrentTimeByPro(props.cachePro)
-        emit('refresh', {time: state.currentTime, flag: 'play'})
+        emit('refresh', {time: state.currentTime, flag: 'play', speed: state.speed})
       }
     })
     return {
@@ -191,7 +209,8 @@ export default defineComponent({
       barPointRadiusStr,
       onHoverBar,
       triggerRef,
-      isInitCpt
+      isInitCpt,
+      nextPlay
     }
   },
 })