图层初始化

src/views/ship-playback/index.vue

@@ -105,8 +105,26 @@ export default defineComponent({
     const mapLoad = (map, func) => {
       state.map = map
       state.mapFunc = func
+      initMap()
     }
     const initMap = () => {
+      // 线
+      state.webglLineLayer = new WebGLLineLayer({
+        zIndex: 20,
+        source: new source.Vector(),
+      })
+      state.map.addLayer(state.webglLineLayer)
+      // 点
+      state.webglPointLayer = new layer.WebGLPoints({
+        zIndex: 30,
+        source: new source.Vector(),
+        style: {
+          "icon-src": ShipImg,
+          "icon-color": '#095217',
+          "icon-rotation": ['get', 'course']
+        }
+      })
+      state.map.addLayer(state.webglPointLayer)
     }
     const onSearch = () => {
       ref_form.value.submit().then(() => {
@@ -177,37 +195,13 @@ export default defineComponent({
         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)
+      state.webglLineLayer.getSource().clear()
+      state.webglLineLayer.getSource().addFeatures(lineFeats)
       // 点
-      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)
+      state.webglPointLayer.getSource().clear()
+      state.webglPointLayer.getSource().addFeatures(pointFeats)
     }
     onMounted(() => {
-      initMap()
     })
     return {
       ...toRefs(state),

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

@@ -81,6 +81,7 @@ export default defineComponent({
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const state = reactive({
       isPlay: false,
+      isStart: false,
       currentTime: 0,
       speed: 1,
       barPointRadius: 16,
@@ -103,6 +104,7 @@ export default defineComponent({
     const ref_playBarMain = ref()
     watch(() => props.timeArea, (n) => {
       state.isPlay = false
+      state.isStart = false
       state.currentTime = GT(n[0])
     }, {deep: true})
     const barPointRadiusStr = computed(() => {
@@ -140,6 +142,7 @@ export default defineComponent({
           if (pro < props.cachePro) {
             setCurrentTimeByPro(pro)
             emit('refresh', {time: state.currentTime, flag: 'jump'})
+            state.isStart = true
           }
         }
       }
@@ -167,7 +170,8 @@ export default defineComponent({
           if (GT(state.currentTime) > props.timeArea[1]) {
             state.currentTime = GT(props.timeArea[1])
           }
-          emit('refresh', {time: state.currentTime, flag: 'play'})
+          emit('refresh', {time: state.currentTime, flag: !state.isStart ? 'start' : 'play'})
+          state.isStart = true
         }, 1000)
       }
     })