|
|
|
|
|
|
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import { defineComponent, computed, ref, reactive, toRefs, watch, nextTick } from 'vue' |
|
|
|
|
|
|
|
|
import { defineComponent, computed, ref, reactive, toRefs, watch, nextTick, onBeforeUnmount } from 'vue' |
|
|
import { Map, View, Feature } from 'ol' |
|
|
import { Map, View, Feature } from 'ol' |
|
|
import 'ol/ol.css' |
|
|
import 'ol/ol.css' |
|
|
import { Tile, Vector as VectorLayer } from 'ol/layer' |
|
|
import { Tile, Vector as VectorLayer } from 'ol/layer' |
|
|
|
|
|
|
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
liveStore.resetList() |
|
|
liveStore.resetList() |
|
|
|
|
|
originRef.value?.disposeVideo() |
|
|
|
|
|
data.videoInfo = { |
|
|
|
|
|
url: null, |
|
|
|
|
|
status: 'init' |
|
|
|
|
|
} |
|
|
|
|
|
data.mapData = null |
|
|
|
|
|
clearInterval(data.socket) |
|
|
|
|
|
data.socket = null |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 获取轨迹数据 */ |
|
|
/* 获取轨迹数据 */ |
|
|
|
|
|
|
|
|
zoom: false |
|
|
zoom: false |
|
|
}) |
|
|
}) |
|
|
}) |
|
|
}) |
|
|
data.mapData.render() |
|
|
|
|
|
|
|
|
// data.mapData.render() |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 处理轨迹列表 */ |
|
|
/* 处理轨迹列表 */ |
|
|
|
|
|
|
|
|
data.videoShow = value |
|
|
data.videoShow = value |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
onBeforeUnmount(() => { |
|
|
|
|
|
liveStore.resetList() |
|
|
|
|
|
originRef.value?.disposeVideo() |
|
|
|
|
|
data.videoInfo = { |
|
|
|
|
|
url: null, |
|
|
|
|
|
status: 'init' |
|
|
|
|
|
} |
|
|
|
|
|
data.mapData = null |
|
|
|
|
|
clearInterval(data.socket) |
|
|
|
|
|
data.socket = null |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
return { |
|
|
return { |
|
|
...toRefs(data), |
|
|
...toRefs(data), |
|
|
originRef, |
|
|
originRef, |