Bläddra i källkod

refactor(map): 替换CesiumMap组件为mapScene并重构地图切换逻辑

- 删除旧的CesiumMap.vue组件文件
- 引入新的mapScene.vue组件并重构引用
- 实现地图场景的加载和播放功能
- 重构苏州和昆山地图切换逻辑,避免重复切换
BAI 2 veckor sedan
förälder
incheckning
4d6c4be8e4
2 ändrade filer med 15 tillägg och 112 borttagningar
  1. 0 108
      src/views/map/CesiumMap.vue
  2. 15 4
      src/views/map/index.vue

+ 0 - 108
src/views/map/CesiumMap.vue

@@ -1,108 +0,0 @@
-<template>
-  <div class="cesium-map-container">
-    <div id="cesiumContainer" ref="cesiumContainer"></div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted } from "vue"
-
-const cesiumContainer = ref(null)
-let viewer = null
-
-onMounted(() => {
-  // 使用 CDN 方式引入 Cesium
-  if (typeof Cesium === 'undefined') {
-    const script = document.createElement('script')
-    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Cesium.js'
-    script.onload = initCesium
-    document.head.appendChild(script)
-    
-    const link = document.createElement('link')
-    link.rel = 'stylesheet'
-    link.href = 'https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Widgets/widgets.css'
-    document.head.appendChild(link)
-  } else {
-    initCesium()
-  }
-})
-
-function initCesium() {
-  if (cesiumContainer.value && typeof Cesium !== 'undefined') {
-    // 初始化 Cesium 视图器
-    viewer = new Cesium.Viewer(cesiumContainer.value, {
-      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
-        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
-      }),
-      baseLayerPicker: true,
-      geocoder: true,
-      homeButton: true,
-      navigationHelpButton: true,
-      animation: false,
-      timeline: false,
-      fullscreenButton: true,
-      scene3DOnly: false
-    })
-    
-    // 设置初始视图为昆山地区
-    const kunshanPosition = Cesium.Cartesian3.fromDegrees(120.98422, 31.39244, 10000)
-    viewer.camera.flyTo({
-      destination: kunshanPosition,
-      duration: 3
-    })
-    
-    // 添加昆山区域标记
-    addKunshanMarker()
-  }
-}
-
-function addKunshanMarker() {
-  if (viewer) {
-    // 添加昆山区域的点标记
-    const kunshanPosition = Cesium.Cartesian3.fromDegrees(120.98422, 31.39244, 0)
-    
-    const pinBuilder = new Cesium.PinBuilder()
-    const pin = pinBuilder.fromText('昆山', Cesium.Color.RED, 48)
-    
-    viewer.entities.add({
-      position: kunshanPosition,
-      name: '昆山市',
-      billboard: {
-        image: pin.toDataURL(),
-        scale: 0.5
-      },
-      label: {
-        text: '昆山市',
-        font: '14pt monospace',
-        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-        outlineWidth: 2,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        pixelOffset: new Cesium.Cartesian2(0, -30)
-      }
-    })
-  }
-}
-
-onUnmounted(() => {
-  if (viewer) {
-    viewer.destroy()
-    viewer = null
-  }
-})
-</script>
-
-<style scoped>
-.cesium-map-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-}
-
-#cesiumContainer {
-  width: 100%;
-  height: 100%;
-}
-</style>

+ 15 - 4
src/views/map/index.vue

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