|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="large-screen">
|
|
<div class="large-screen">
|
|
|
<!-- 地图 -->
|
|
<!-- 地图 -->
|
|
|
- <CesiumMap v-show="state.activeIndex === '1' && !state.showVideoPlayer"></CesiumMap>
|
|
|
|
|
|
|
+ <mapScene ref="mapSceneRef" v-show="state.activeIndex === '1' && !state.showVideoPlayer"></mapScene>
|
|
|
<div class="fusion-bg" v-show="state.activeIndex === '2'">
|
|
<div class="fusion-bg" v-show="state.activeIndex === '2'">
|
|
|
<img src="@/assets/images/昆山水文站.jpg" alt="昆山水文站" />
|
|
<img src="@/assets/images/昆山水文站.jpg" alt="昆山水文站" />
|
|
|
</div>
|
|
</div>
|
|
@@ -191,7 +191,7 @@
|
|
|
</template>
|
|
</template>
|
|
|
<script setup>
|
|
<script setup>
|
|
|
import { shallowRef, ref, reactive, onMounted, onBeforeUnmount, nextTick, provide } from "vue"
|
|
import { shallowRef, ref, reactive, onMounted, onBeforeUnmount, nextTick, provide } from "vue"
|
|
|
-import CesiumMap from "./CesiumMap.vue"
|
|
|
|
|
|
|
+import mapScene from "./map.vue"
|
|
|
import mHeader from "@/components/mHeader/index.vue"
|
|
import mHeader from "@/components/mHeader/index.vue"
|
|
|
import mCountCard from "@/components/mCountCard/index.vue"
|
|
import mCountCard from "@/components/mCountCard/index.vue"
|
|
|
import mMenu from "@/components/mMenu/index.vue"
|
|
import mMenu from "@/components/mMenu/index.vue"
|
|
@@ -219,6 +219,7 @@ import gsap from "gsap"
|
|
|
import autofit from "autofit.js"
|
|
import autofit from "autofit.js"
|
|
|
|
|
|
|
|
const assets = shallowRef(null)
|
|
const assets = shallowRef(null)
|
|
|
|
|
+const mapSceneRef = ref(null)
|
|
|
const historyVideoRef = ref(null)
|
|
const historyVideoRef = ref(null)
|
|
|
|
|
|
|
|
// 提供资源给子组件
|
|
// 提供资源给子组件
|
|
@@ -336,8 +337,12 @@ onMounted(() => {
|
|
|
})
|
|
})
|
|
|
// 初始化资源
|
|
// 初始化资源
|
|
|
initAssets(async () => {
|
|
initAssets(async () => {
|
|
|
|
|
+ // 加载地图
|
|
|
|
|
+ emitter.$emit("loadMap", assets.value)
|
|
|
// 隐藏loading
|
|
// 隐藏loading
|
|
|
await hideLoading()
|
|
await hideLoading()
|
|
|
|
|
+ // 播放场景
|
|
|
|
|
+ mapSceneRef.value.play()
|
|
|
})
|
|
})
|
|
|
})
|
|
})
|
|
|
onBeforeUnmount(() => {
|
|
onBeforeUnmount(() => {
|
|
@@ -361,12 +366,18 @@ function handleSwitchToRegionOverview() {
|
|
|
|
|
|
|
|
// 切换到苏州地图
|
|
// 切换到苏州地图
|
|
|
function switchToSuzhouMap() {
|
|
function switchToSuzhouMap() {
|
|
|
- state.currentMapMode = 'suzhou'
|
|
|
|
|
|
|
+ if (state.currentMapMode === 'suzhou') return
|
|
|
|
|
+ if (mapSceneRef.value) {
|
|
|
|
|
+ mapSceneRef.value.switchToSuzhou()
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 切换到昆山地图
|
|
// 切换到昆山地图
|
|
|
function switchToKunshanMap() {
|
|
function switchToKunshanMap() {
|
|
|
- state.currentMapMode = 'kunshan'
|
|
|
|
|
|
|
+ if (state.currentMapMode === 'kunshan') return
|
|
|
|
|
+ if (mapSceneRef.value) {
|
|
|
|
|
+ mapSceneRef.value.switchToKunshan()
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 处理水文站图标点击事件
|
|
// 处理水文站图标点击事件
|