船舶回放v1

src/views/ship-playback/index.vue

@@ -1,6 +1,36 @@
 <template>
   <div class="main">
-    <div id="map"></div>
+    <EasyMapComponent
+      class="map"
+      layout="info"
+      @easyMapLoad="mapLoad"
+    />
+    <div class="filter">
+      <CusForm labelWidth="70px" ref="ref_form">
+        <CusFormColumn
+          :span="24"
+          required
+          label="时间"
+          link="datetime"
+          type="datetimerange"
+          v-model:param="queryForm.timeArea"/>
+        <CusFormColumn
+          :span="24"
+          required
+          label="数量"
+          link="number"
+          v-model:param="queryForm.total"/>
+        <el-button type="primary" @click="onSearch">查询</el-button>
+        <el-button type="primary" @click="mapFunc.toLocation({position: [109.6915958479584, 19.111636735969318], zoom: 9})">定位</el-button>
+      </CusForm>
+    </div>
+    <PlayBarCom
+      class="play-bar"
+      :timeArea="playBar.timeArea"
+      :cachePro="playBar.cachePro"
+      :total="playBar.total"
+      @refresh="onPlayRefresh"
+    />
   </div>
 </template>
 
@@ -20,15 +50,31 @@ import {
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from "element-plus";
-import Map from 'ol/Map.js';
-import View from 'ol/View.js';
-import TileLayer from 'ol/layer/Tile.js';
-import OSM from 'ol/source/OSM.js';
-import * as ol from 'ol'
+import PlayBarCom from "./play-bar.vue";
+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 ShipImg from './AIS.svg'
+
+class WebGLLineLayer extends layer.Layer {
+  createRenderer() {
+    return new WebGLVectorLayerRenderer(this, {
+      disableHitDetection: false,
+      style: {
+        'stroke-color': ['*', ['get', 'lineColor'], [220, 220, 220]],
+        'stroke-width': 2,
+        // 'stroke-line-dash': ['get', 'lineDasharray'],
+      },
+    });
+  }
+}
 
 export default defineComponent({
   name: '',
-  components: {},
+  components: {
+    PlayBarCom
+  },
   props: {},
   setup(props, {emit}) {
     const store = useStore();
@@ -37,27 +83,138 @@ export default defineComponent({
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const state = reactive({
       map: <any>null,
-      popupHover: <any>null
+      mapFunc: <any>null,
+      queryForm: {
+        timeArea: [
+          '2024-03-18 00:00:00',
+          '2024-03-19 00:00:00',
+        ],
+        total: 10
+      },
+      playBar: {
+        timeArea: [],
+        total: 0,
+        cache: 0,
+        cachePro: 0,
+      },
+      shipData: <any>{},
+      webglPointLayer: <any>null,
+      webglLineLayer: <any>null,
     })
+    const ref_form = ref()
+    const mapLoad = (map, func) => {
+      state.map = map
+      state.mapFunc = func
+    }
     const initMap = () => {
-      const map = new ol.Map({
-        view: new View({
-          center: [0, 0],
-          zoom: 1,
-        }),
-        layers: [
-          new TileLayer({
-            source: new OSM(),
-          }),
-        ],
-        target: 'map',
+    }
+    const onSearch = () => {
+      ref_form.value.submit().then(() => {
+        state.playBar.timeArea = JSON.parse(JSON.stringify(state.queryForm.timeArea))
+        state.playBar.cache = 0
+        state.playBar.total = JSON.parse(JSON.stringify(state.queryForm.total))
+        initWS()
+      }).catch((e) => {
+        ElMessage({
+          message: e[0].message,
+          grouping: true,
+          type: 'warning',
+        })
+      })
+    }
+    const initWS = () => {
+      const ws = new WebSocket(`ws://${location.host}/${store.state.app.apiProxy.shipPlaybackWSApi}`)
+      ws.onopen = (e) => {
+        const str = {
+          total: state.playBar.total,
+          timeArea: state.playBar.timeArea
+        }
+        ws.send(JSON.stringify(str))
+      }
+      ws.onmessage = (e) => {
+        try {
+          const json = JSON.parse(e.data)
+          state.playBar.cache++
+          const areaH = Math.ceil((new Date(state.playBar.timeArea[1]).getTime() - new Date(state.playBar.timeArea[0]).getTime()) / (1000 * 60 * 60))
+          state.playBar.cachePro = state.playBar.cache / areaH
+          setShipData(json)
+        } catch (e) {
+        }
+      }
+    }
+    const setShipData = (arr) => {
+      arr.forEach(v => {
+        if (state.shipData[v.id]) {
+          state.shipData[v.id].points.push(v)
+        } else {
+          state.shipData[v.id] = {
+            points: [v],
+            config: {
+              color: `rgb(${that.$util.randomNum(0, 255)}, ${that.$util.randomNum(0, 255)}, ${that.$util.randomNum(0, 255)})`
+            }
+          }
+        }
+      })
+    }
+    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
+          }
+          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)
       });
+      // 线
+      if (state.webglLineLayer) {
+        state.map.removeLayer(state.webglLineLayer)
+        state.webglLineLayer.dispose()
+      }
+      state.webglLineLayer = new WebGLLineLayer({
+        zIndex: 20,
+        source: new source.Vector({
+          features: lineFeats
+        }),
+      })
+      state.map.addLayer(state.webglLineLayer)
+      // 点
+      if (state.webglPointLayer) {
+        state.map.removeLayer(state.webglPointLayer)
+        state.webglPointLayer.dispose()
+      }
+      state.webglPointLayer = new layer.WebGLPoints({
+        zIndex: 30,
+        source: new source.Vector({
+          features: pointFeats
+        }),
+        style: {
+          "icon-src": ShipImg,
+          "icon-color": '#095217',
+          "icon-rotation": ['get', 'course']
+        }
+      })
+      state.map.addLayer(state.webglPointLayer)
     }
     onMounted(() => {
       initMap()
     })
     return {
       ...toRefs(state),
+      mapLoad,
+      onSearch,
+      ref_form,
+      onPlayRefresh
     }
   },
 })
@@ -68,8 +225,23 @@ export default defineComponent({
   width: 100%;
   height: 100vh;
   display: flex;
-  >div {
-    flex: 1;
+  position: relative;
+  justify-content: center;
+  .play-bar {
+    position: absolute;
+    z-index: 2;
+    bottom: 20px;
+    left: 20px;
+    width: calc(100% - 400px);
+  }
+  .filter {
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    width: 450px;
+    background-color: #FFFFFF;
+    padding: 10px;
   }
 }
 </style>

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

@@ -0,0 +1,258 @@
+<template>
+  <div class="play-bar-com">
+    <div class="play-button-main">
+      <template v-if="isPlay">
+        <img class="__hover" @click="isPlay = false" src="./status-pause.png" alt=""/>
+      </template>
+      <template v-else>
+        <img class="__hover" @click="isInitCpt ? isPlay = true : undefined" src="./status-play.png" alt=""/>
+      </template>
+    </div>
+    <div class="play-bar-main" ref="ref_playBarMain" @click="onClickBar" @mousemove="onHoverBar" @mouseenter="timeHover.visible = true">
+      <div class="play-bar-cache" :style="`width: ${cachePro * 100}%;`"/>
+      <div class="play-bar-line" :style="`width: ${playProgressCpt * 100}%;`"/>
+      <div class="play-bar-point" :style="`left: calc(${playProgressCpt * 100}% - (${barPointRadiusStr} / 2));`"/>
+      <template v-if="timeArea?.length > 0">
+        <div class="play-bar-time start">{{$util.YMDHms(timeArea[0])}}</div>
+        <div class="play-bar-time center">{{$util.YMDHms(currentTime)}}</div>
+        <div class="play-bar-time end">{{$util.YMDHms(timeArea[1])}}</div>
+      </template>
+    </div>
+    <div class="play-speed-main">
+      <el-dropdown @command="switchSpeed">
+        <el-button type="primary">
+          x{{speed}}
+        </el-button>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item :command="1">x1</el-dropdown-item>
+            <el-dropdown-item :command="2">x2</el-dropdown-item>
+            <el-dropdown-item :command="3">x3</el-dropdown-item>
+            <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-menu>
+        </template>
+      </el-dropdown>
+    </div>
+    <el-tooltip
+      v-if="timeArea?.length > 0"
+      v-model:visible="timeHover.visible"
+      :content="timeHover.time"
+      placement="top"
+      effect="light"
+      trigger="click"
+      virtual-triggering
+      :virtual-ref="triggerRef"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    timeArea: <any>{}, //  时间范围
+    cachePro: <any>{},
+    total: {},
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      isPlay: false,
+      currentTime: 0,
+      speed: 1,
+      barPointRadius: 16,
+      timeHover: {
+        visible: false,
+        time: '',
+        position: {
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+        }
+      },
+    })
+    const triggerRef = ref({
+      getBoundingClientRect() {
+        return state.timeHover.position
+      },
+    })
+    const ref_playBarMain = ref()
+    watch(() => props.timeArea, (n) => {
+      state.isPlay = false
+      state.currentTime = GT(n[0])
+    }, {deep: true})
+    const barPointRadiusStr = computed(() => {
+      return state.barPointRadius + 'px'
+    })
+    const switchSpeed = (val) => {
+      state.speed = val
+    }
+    const GT = (d) => new Date(d).getTime()
+    const playProgressCpt = computed(() => {
+      let pro = 0
+      if (props.timeArea.length > 0 && state.currentTime) {
+        pro = (GT(state.currentTime) - GT(props.timeArea[0])) / (GT(props.timeArea[1]) - GT(props.timeArea[0]))
+      }
+      return pro
+    })
+    const setCurrentTimeByPro = (pro) => {
+      state.currentTime = GT((GT(props.timeArea[1]) - GT(props.timeArea[0])) * pro + GT(props.timeArea[0]))
+    }
+    const getMouseProOnBar = (e) => {
+      let pro = e.offsetX / ref_playBarMain.value.clientWidth
+      if (e.target.className.includes('play-bar-point')) {
+        pro = (ref_playBarMain.value.clientWidth * playProgressCpt.value + e.offsetX - state.barPointRadius / 2) / ref_playBarMain.value.clientWidth
+      }
+      return pro
+    }
+    const isInitCpt = computed(() => {
+      return props.timeArea?.length > 0
+    })
+    const onClickBar = (e) => {
+      if (isInitCpt.value) {
+        if (!e.target.className.includes('play-bar-time')) {
+          state.isPlay = false
+          const pro = getMouseProOnBar(e)
+          if (pro < props.cachePro) {
+            setCurrentTimeByPro(pro)
+            emit('refresh', {time: state.currentTime, flag: 'jump'})
+          }
+        }
+      }
+    }
+    const onHoverBar = (e) => {
+      if (isInitCpt.value) {
+        if (!e.target.className.includes('play-bar-time')) {
+          state.timeHover.position = DOMRect.fromRect({
+            width: 0,
+            height: 0,
+            x: e.clientX,
+            y: e.clientY,
+          })
+          const pro = getMouseProOnBar(e)
+          state.timeHover.time = that.$util.YMDHms(GT((GT(props.timeArea[1]) - GT(props.timeArea[0])) * pro + GT(props.timeArea[0])))
+        }
+      }
+    }
+    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: 'play'})
+        }, 1000)
+      }
+    })
+    watch(() => playProgressCpt.value, (n) => {
+      if (n > props.cachePro) {
+        state.isPlay = false
+        setCurrentTimeByPro(props.cachePro)
+        emit('refresh', {time: state.currentTime, flag: 'play'})
+      }
+    })
+    return {
+      ...toRefs(state),
+      switchSpeed,
+      playProgressCpt,
+      onClickBar,
+      ref_playBarMain,
+      barPointRadiusStr,
+      onHoverBar,
+      triggerRef,
+      isInitCpt
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.play-bar-com {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  .play-button-main {
+    width: 40px;
+    height: 40px;
+    >img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  $borderRadius: 10px;
+  .play-bar-main {
+    flex: 1;
+    margin: 0 10px;
+    height: 10px;
+    background-color: #CECECE;
+    border-radius: $borderRadius;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .play-bar-cache {
+      position: absolute;
+      left: 0;
+      background-color: red;
+      height: 100%;
+      z-index: 2;
+      border-radius: $borderRadius;
+    }
+    $barPointRadius: v-bind(barPointRadiusStr);
+    .play-bar-line {
+      position: absolute;
+      left: 0;
+      z-index: 3;
+      border-radius: $borderRadius;
+    }
+    .play-bar-point {
+      width: $barPointRadius;
+      height: $barPointRadius;
+      background-color: #000000;
+      border-radius: 50%;
+      position: absolute;
+      z-index: 4;
+    }
+    .play-bar-time {
+      position: absolute;
+      bottom: -24px;
+      &.start {
+        left: 0;
+      }
+      &.center {
+      }
+      &.end {
+        right: 0;
+      }
+    }
+  }
+  .play-speed-main {}
+}
+</style>