refactor(components): 清理并合并CesiumMap组件文件

删除重复的CesiumMap组件文件，保留单一实现版本
修复代码格式问题并移除合并冲突标记
优化组件结构和代码可读性

src/components/CesiumMap.vue

@@ -1,10 +1,13 @@
 <template>
-  <div id="cesiumContainer" class="cesium-ignore-autofit" style="width: 100%; height: 100%; position: relative; z-index: 1; transform: none !important; zoom: 1 !important;"></div>
-  
+  <div id="cesiumContainer" class="cesium-ignore-autofit"
+    style="width: 100%; height: 100%; position: relative; z-index: 1; transform: none !important; zoom: 1 !important;">
+  </div>
+
   <!-- POI详情弹窗 -->
   <div v-if="showPopup" class="poi-popup" :style="popupStyle">
     <div class="popup-header">
-      <span class="popup-title">{{ poiData.name }} <a href="#" class="popup-detail" @click.prevent="goToTwinStation">详情</a></span>
+      <span class="popup-title">{{ poiData.name }} <a href="#" class="popup-detail"
+          @click.prevent="goToTwinStation">详情</a></span>
       <button class="popup-close" @click="closePopup">×</button>
     </div>
     <div class="popup-content">
@@ -27,7 +30,6 @@
 import * as Cesium from 'cesium'
 import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'
 
-<<<<<<< HEAD
 export default {
   name: 'CesiumMap',
   props: {
@@ -53,70 +55,6 @@ export default {
         historyWaterLevel: '3.10',
         historyFlow: '11.8',
         device: 'HL-Sensor-001'
-=======
-const emit = defineEmits(['toggleMap'])
-
-const viewer = ref(null)
-const showPopup = ref(false)
-const popupPosition = ref({ x: 0, y: 0 })
-
-const router = useRouter()
-
-const DESIGN_WIDTH = 1920
-const DESIGN_HEIGHT = 1080
-
-const getScaleRatio = () => {
-  return Math.min(window.innerWidth / DESIGN_WIDTH, window.innerHeight / DESIGN_HEIGHT)
-}
-
-const poiData = ref({
-  name: '黑林水文站',
-  waterLevel: '3.25',
-  flow: '12.5',
-  rainfall: '0.5',
-  historyWaterLevel: '3.10',
-  historyFlow: '11.8',
-  device: 'HL-Sensor-001'
-})
-
-const popupStyle = computed(() => {
-  return {
-    left: popupPosition.value.x + 'px',
-    top: popupPosition.value.y + 'px'
-  }
-})
-
-let blinkInterval = null
-
-const addPoiMarker = () => {
-    // 添加黑林水文站POI
-    const heilinPosition = Cesium.Cartesian3.fromDegrees(118.8770798, 35.0320627)
-    
-    // 创建一个不可见的点实体，用于扩大点击区域
-    const clickEntity = viewer.value.entities.add({
-      id: 'heilin-station-click',
-      position: heilinPosition,
-      point: {
-        pixelSize: 30,
-        color: Cesium.Color.TRANSPARENT,
-        outlineColor: Cesium.Color.TRANSPARENT,
-        outlineWidth: 0
-      }
-    })
-    
-    const entity = viewer.value.entities.add({
-      id: 'heilin-station',
-      position: heilinPosition,
-      billboard: {
-        image: '/src/assets/images/水文站.png',
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-        pixelOffset: new Cesium.Cartesian2(0, -15),
-        scale: 0.8,
-        width: 30,
-        height: 37.5,
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
->>>>>>> origin/master
       },
       blinkInterval: null,
       heilinEntity: null,
@@ -145,7 +83,7 @@ const addPoiMarker = () => {
   methods: {
     addPoiMarker() {
       const heilinPosition = Cesium.Cartesian3.fromDegrees(118.8770798, 35.0320627)
-      
+
       const clickEntity = this.viewer.entities.add({
         id: 'heilin-station-click',
         position: heilinPosition,
@@ -156,7 +94,7 @@ const addPoiMarker = () => {
           outlineWidth: 0
         }
       })
-      
+
       this.heilinEntity = this.viewer.entities.add({
         id: 'heilin-station',
         position: heilinPosition,
@@ -186,7 +124,7 @@ const addPoiMarker = () => {
           disableDepthTestDistance: Number.POSITIVE_INFINITY
         }
       })
-      
+
       this.viewer.entities.add({
         id: 'heilin-station-title',
         position: heilinPosition,
@@ -207,9 +145,8 @@ const addPoiMarker = () => {
         }
       })
 
-<<<<<<< HEAD
       const reservoirPosition = Cesium.Cartesian3.fromDegrees(118.9540555, 34.9355329)
-      
+
       this.reservoirEntity = this.viewer.entities.add({
         id: 'tashan-reservoir',
         position: reservoirPosition,
@@ -239,7 +176,7 @@ const addPoiMarker = () => {
           disableDepthTestDistance: Number.POSITIVE_INFINITY
         }
       })
-      
+
       this.viewer.entities.add({
         id: 'tashan-reservoir-title',
         position: reservoirPosition,
@@ -261,7 +198,7 @@ const addPoiMarker = () => {
       })
 
       const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
-      
+
       handler.setInputAction((movement) => {
         const pickedObjects = this.viewer.scene.drillPick(movement.position)
         for (let i = 0; i < pickedObjects.length; i++) {
@@ -270,50 +207,31 @@ const addPoiMarker = () => {
             if (pickedObj.id.id === 'heilin-station' || pickedObj.id.id === 'heilin-station-click') {
               this.showPopup = true
               this.popupPosition = { x: movement.position.x - 120, y: movement.position.y - 150 }
+
               break
             }
-=======
-    const handler = new Cesium.ScreenSpaceEventHandler(viewer.value.scene.canvas)
-    
-    handler.setInputAction((movement) => {
-      const scaleRatio = getScaleRatio()
-      const correctedX = movement.position.x / scaleRatio
-      const correctedY = movement.position.y / scaleRatio
-      
-      const pickedObjects = viewer.value.scene.drillPick(new Cesium.Cartesian2(correctedX, correctedY))
-      for (let i = 0; i < pickedObjects.length; i++) {
-        const pickedObj = pickedObjects[i]
-        if (Cesium.defined(pickedObj) && pickedObj.id) {
-          if (pickedObj.id.id === 'heilin-station' || pickedObj.id.id === 'heilin-station-click') {
-            showPopup.value = true
-            popupPosition.value = { 
-              x: movement.position.x - 120, 
-              y: movement.position.y - 150 
-            }
-            break
->>>>>>> origin/master
           }
         }
       }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
     },
     updateMapMarkers(data) {
       if (!data) return
-      
+
       if (this.heilinEntity && data.heilinStation) {
         const waterLevel = data.heilinStation.waterLevel || '3.25'
         const flow = data.heilinStation.flow || '12.5'
         const rainfall = data.heilinStation.rainfall || '0.5'
-        
+
         this.heilinEntity.label.text = `水位 ${waterLevel}m\n流量 ${flow}m³/s\n降雨量 ${rainfall}mm/h`
         this.poiData.waterLevel = waterLevel
         this.poiData.flow = flow
         this.poiData.rainfall = rainfall
       }
-      
+
       if (this.reservoirEntity && data.reservoir) {
         const waterLevel = data.reservoir.waterLevel || '18.5'
         const storage = data.reservoir.storage || '2350.8'
-        
+
         this.reservoirEntity.label.text = `库水位 ${waterLevel}m\n库容 ${storage}万m³\n汛限 20.0m`
       }
     },
@@ -347,76 +265,76 @@ const addPoiMarker = () => {
       shouldAnimate: false,
       showRenderLoopErrors: false
     })
-    
+
     if (this.viewer.cesiumWidget.creditContainer) {
       this.viewer.cesiumWidget.creditContainer.style.display = 'none'
     }
-    
+
     const toolbar = this.viewer._element.querySelector('.cesium-viewer-toolbar')
     if (toolbar) toolbar.style.display = 'none'
-    
+
     const animationContainer = this.viewer._element.querySelector('.cesium-viewer-animationContainer')
     if (animationContainer) animationContainer.style.display = 'none'
-    
+
     const timelineContainer = this.viewer._element.querySelector('.cesium-viewer-timelineContainer')
     if (timelineContainer) timelineContainer.style.display = 'none'
 
     try {
       const response = await fetch('/Heilin.geojson')
       const geojson = await response.json()
-      
+
       const dataSource = await Cesium.GeoJsonDataSource.load(geojson, {
         stroke: Cesium.Color.fromCssColorString('#00d5ff'),
         strokeWidth: 3,
         fill: Cesium.Color.fromCssColorString('#00d5ff').withAlpha(0.1)
       })
-      
+
       this.viewer.dataSources.add(dataSource)
-      
+
       try {
         const waterResponse = await fetch('/黑林水系.geojson')
         const waterGeojson = await waterResponse.json()
-        
+
         const waterDataSource = await Cesium.GeoJsonDataSource.load(waterGeojson, {
           stroke: Cesium.Color.fromCssColorString('#62f6fb'),
           strokeWidth: 2,
           fill: Cesium.Color.fromCssColorString('#62f6fb').withAlpha(0.2)
         })
-        
+
         this.viewer.dataSources.add(waterDataSource)
       } catch (waterError) {
         console.error('加载水系GeoJSON失败:', waterError)
       }
-      
+
       try {
         const reservoirResponse = await fetch('/小塔山水库.geojson')
         const reservoirGeojson = await reservoirResponse.json()
-        
+
         const reservoirDataSource = await Cesium.GeoJsonDataSource.load(reservoirGeojson, {
           stroke: Cesium.Color.fromCssColorString('#00d4ff'),
           strokeWidth: 2,
           fill: Cesium.Color.fromCssColorString('#00d4ff').withAlpha(0.3)
         })
-        
+
         this.viewer.dataSources.add(reservoirDataSource)
       } catch (reservoirError) {
         console.error('加载小塔山水库GeoJSON失败:', reservoirError)
       }
-      
+
       const entities = dataSource.entities.values
       if (entities.length > 0) {
         let minLat = 90, maxLat = -90, minLon = 180, maxLon = -180
-        
+
         for (const entity of entities) {
           if (entity.polygon && entity.polygon.hierarchy) {
             const hierarchy = entity.polygon.hierarchy.getValue()
             const positions = hierarchy.positions
-            
+
             for (const pos of positions) {
               const cartographic = Cesium.Cartographic.fromCartesian(pos)
               const lat = Cesium.Math.toDegrees(cartographic.latitude)
               const lon = Cesium.Math.toDegrees(cartographic.longitude)
-              
+
               minLat = Math.min(minLat, lat)
               maxLat = Math.max(maxLat, lat)
               minLon = Math.min(minLon, lon)
@@ -424,7 +342,7 @@ const addPoiMarker = () => {
             }
           }
         }
-        
+
         this.viewer.camera.flyTo({
           destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
           duration: 0
@@ -433,25 +351,11 @@ const addPoiMarker = () => {
     } catch (error) {
       console.error('加载GeoJSON失败:', error)
       this.viewer.camera.flyTo({
-          destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
-          duration: 0
-        })
+        destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
+        duration: 0
+      })
     }
 
-<<<<<<< HEAD
-    this.addPoiMarker()
-    this.$nextTick(() => {
-      this.updateMapMarkers(this.simulationData)
-    })
-  },
-  beforeUnmount() {
-    if (this.blinkInterval) {
-      clearInterval(this.blinkInterval)
-    }
-    if (this.viewer) {
-      this.viewer.destroy()
-    }
-=======
   addPoiMarker()
   
   window.addEventListener('resize', handleResize)
@@ -467,7 +371,6 @@ onUnmounted(() => {
   window.removeEventListener('resize', handleResize)
   if (blinkInterval) {
     clearInterval(blinkInterval)
->>>>>>> origin/master
   }
 }
 </script>
@@ -556,4 +459,5 @@ onUnmounted(() => {
   margin-bottom: 5px;
   line-height: 1.5;
 }
+</script>
 </style>

src/components/CesiumMap_BACKUP_758.vue

@@ -1,559 +0,0 @@
-<template>
-  <div id="cesiumContainer" class="cesium-ignore-autofit" style="width: 100%; height: 100%; position: relative; z-index: 1; transform: none !important; zoom: 1 !important;"></div>
-  
-  <!-- POI详情弹窗 -->
-  <div v-if="showPopup" class="poi-popup" :style="popupStyle">
-    <div class="popup-header">
-      <span class="popup-title">{{ poiData.name }} <a href="#" class="popup-detail" @click.prevent="goToTwinStation">详情</a></span>
-      <button class="popup-close" @click="closePopup">×</button>
-    </div>
-    <div class="popup-content">
-      <div class="popup-section">
-        <div class="popup-label">实时数据</div>
-        <div class="popup-value">水位: {{ poiData.waterLevel }}m</div>
-        <div class="popup-value">流量: {{ poiData.flow }}m³/s</div>
-        <div class="popup-value">降雨量: {{ poiData.rainfall }}mm/h</div>
-      </div>
-      <div class="popup-section">
-        <div class="popup-label">历史同期值</div>
-        <div class="popup-value">水位: {{ poiData.historyWaterLevel }}m</div>
-        <div class="popup-value">流量: {{ poiData.historyFlow }}m³/s</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import * as Cesium from 'cesium'
-import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'
-
-<<<<<<< HEAD
-export default {
-  name: 'CesiumMap',
-  props: {
-    simulationTime: {
-      type: Number,
-      default: 0
-    },
-    simulationData: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      viewer: null,
-      showPopup: false,
-      popupPosition: { x: 0, y: 0 },
-      poiData: {
-        name: '黑林水文站',
-        waterLevel: '3.25',
-        flow: '12.5',
-        rainfall: '0.5',
-        historyWaterLevel: '3.10',
-        historyFlow: '11.8',
-        device: 'HL-Sensor-001'
-=======
-const emit = defineEmits(['toggleMap'])
-
-const viewer = ref(null)
-const showPopup = ref(false)
-const popupPosition = ref({ x: 0, y: 0 })
-
-const router = useRouter()
-
-const DESIGN_WIDTH = 1920
-const DESIGN_HEIGHT = 1080
-
-const getScaleRatio = () => {
-  return Math.min(window.innerWidth / DESIGN_WIDTH, window.innerHeight / DESIGN_HEIGHT)
-}
-
-const poiData = ref({
-  name: '黑林水文站',
-  waterLevel: '3.25',
-  flow: '12.5',
-  rainfall: '0.5',
-  historyWaterLevel: '3.10',
-  historyFlow: '11.8',
-  device: 'HL-Sensor-001'
-})
-
-const popupStyle = computed(() => {
-  return {
-    left: popupPosition.value.x + 'px',
-    top: popupPosition.value.y + 'px'
-  }
-})
-
-let blinkInterval = null
-
-const addPoiMarker = () => {
-    // 添加黑林水文站POI
-    const heilinPosition = Cesium.Cartesian3.fromDegrees(118.8770798, 35.0320627)
-    
-    // 创建一个不可见的点实体，用于扩大点击区域
-    const clickEntity = viewer.value.entities.add({
-      id: 'heilin-station-click',
-      position: heilinPosition,
-      point: {
-        pixelSize: 30,
-        color: Cesium.Color.TRANSPARENT,
-        outlineColor: Cesium.Color.TRANSPARENT,
-        outlineWidth: 0
-      }
-    })
-    
-    const entity = viewer.value.entities.add({
-      id: 'heilin-station',
-      position: heilinPosition,
-      billboard: {
-        image: '/src/assets/images/水文站.png',
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-        pixelOffset: new Cesium.Cartesian2(0, -15),
-        scale: 0.8,
-        width: 30,
-        height: 37.5,
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
->>>>>>> origin/master
-      },
-      blinkInterval: null,
-      heilinEntity: null,
-      reservoirEntity: null
-    }
-  },
-  computed: {
-    popupStyle() {
-      return {
-        left: this.popupPosition.x + 'px',
-        top: this.popupPosition.y + 'px'
-      }
-    }
-  },
-  watch: {
-    simulationData: {
-      handler(newData) {
-        this.$nextTick(() => {
-          this.updateMapMarkers(newData)
-        })
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  methods: {
-    addPoiMarker() {
-      const heilinPosition = Cesium.Cartesian3.fromDegrees(118.8770798, 35.0320627)
-      
-      const clickEntity = this.viewer.entities.add({
-        id: 'heilin-station-click',
-        position: heilinPosition,
-        point: {
-          pixelSize: 30,
-          color: Cesium.Color.TRANSPARENT,
-          outlineColor: Cesium.Color.TRANSPARENT,
-          outlineWidth: 0
-        }
-      })
-      
-      this.heilinEntity = this.viewer.entities.add({
-        id: 'heilin-station',
-        position: heilinPosition,
-        billboard: {
-          image: '/src/assets/images/水文站.png',
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-          pixelOffset: new Cesium.Cartesian2(0, -15),
-          scale: 0.8,
-          width: 30,
-          height: 37.5,
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        },
-        label: {
-          text: `水位 ${this.simulationData.heilinStation?.waterLevel || '3.25'}m\n流量 ${this.simulationData.heilinStation?.flow || '12.5'}m³/s\n降雨量 ${this.simulationData.heilinStation?.rainfall || '0.5'}mm/h`,
-          font: 'bold 14px 黑体',
-          fillColor: Cesium.Color.WHITE,
-          outlineColor: Cesium.Color.fromCssColorString('#003860'),
-          outlineWidth: 2,
-          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-          pixelOffset: new Cesium.Cartesian2(0, -30),
-          showBackground: true,
-          backgroundColor: new Cesium.Color(0, 0.3, 0.5, 0.7),
-          backgroundPadding: new Cesium.Cartesian2(8, 4),
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        }
-      })
-      
-      this.viewer.entities.add({
-        id: 'heilin-station-title',
-        position: heilinPosition,
-        label: {
-          text: '黑林水文站',
-          font: 'bold 14px sans-serif',
-          fillColor: Cesium.Color.WHITE,
-          outlineColor: Cesium.Color.fromCssColorString('#003860'),
-          outlineWidth: 2,
-          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-          pixelOffset: new Cesium.Cartesian2(0, -85),
-          showBackground: true,
-          backgroundColor: new Cesium.Color(0, 0.2, 0.4, 0.9),
-          backgroundPadding: new Cesium.Cartesian2(22, 4),
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        }
-      })
-
-<<<<<<< HEAD
-      const reservoirPosition = Cesium.Cartesian3.fromDegrees(118.9540555, 34.9355329)
-      
-      this.reservoirEntity = this.viewer.entities.add({
-        id: 'tashan-reservoir',
-        position: reservoirPosition,
-        billboard: {
-          image: '/src/assets/images/水库蓝.png',
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-          pixelOffset: new Cesium.Cartesian2(0, -15),
-          scale: 0.8,
-          width: 30,
-          height: 30,
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        },
-        label: {
-          text: `库水位 ${this.simulationData.reservoir?.waterLevel || '18.5'}m\n库容 ${this.simulationData.reservoir?.storage || '2350.8'}万m³\n汛限 20.0m`,
-          font: 'bold 14px 黑体',
-          fillColor: Cesium.Color.WHITE,
-          outlineColor: Cesium.Color.fromCssColorString('#003860'),
-          outlineWidth: 2,
-          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-          pixelOffset: new Cesium.Cartesian2(0, -30),
-          showBackground: true,
-          backgroundColor: new Cesium.Color(0, 0.3, 0.5, 0.7),
-          backgroundPadding: new Cesium.Cartesian2(8, 4),
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        }
-      })
-      
-      this.viewer.entities.add({
-        id: 'tashan-reservoir-title',
-        position: reservoirPosition,
-        label: {
-          text: '小塔山水库',
-          font: 'bold 14px sans-serif',
-          fillColor: Cesium.Color.WHITE,
-          outlineColor: Cesium.Color.fromCssColorString('#003860'),
-          outlineWidth: 2,
-          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-          pixelOffset: new Cesium.Cartesian2(0, -85),
-          showBackground: true,
-          backgroundColor: new Cesium.Color(0, 0.2, 0.4, 0.9),
-          backgroundPadding: new Cesium.Cartesian2(22, 4),
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        }
-      })
-
-      const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
-      
-      handler.setInputAction((movement) => {
-        const pickedObjects = this.viewer.scene.drillPick(movement.position)
-        for (let i = 0; i < pickedObjects.length; i++) {
-          const pickedObj = pickedObjects[i]
-          if (Cesium.defined(pickedObj) && pickedObj.id) {
-            if (pickedObj.id.id === 'heilin-station' || pickedObj.id.id === 'heilin-station-click') {
-              this.showPopup = true
-              this.popupPosition = { x: movement.position.x - 120, y: movement.position.y - 150 }
-              break
-            }
-=======
-    const handler = new Cesium.ScreenSpaceEventHandler(viewer.value.scene.canvas)
-    
-    handler.setInputAction((movement) => {
-      const scaleRatio = getScaleRatio()
-      const correctedX = movement.position.x / scaleRatio
-      const correctedY = movement.position.y / scaleRatio
-      
-      const pickedObjects = viewer.value.scene.drillPick(new Cesium.Cartesian2(correctedX, correctedY))
-      for (let i = 0; i < pickedObjects.length; i++) {
-        const pickedObj = pickedObjects[i]
-        if (Cesium.defined(pickedObj) && pickedObj.id) {
-          if (pickedObj.id.id === 'heilin-station' || pickedObj.id.id === 'heilin-station-click') {
-            showPopup.value = true
-            popupPosition.value = { 
-              x: movement.position.x - 120, 
-              y: movement.position.y - 150 
-            }
-            break
->>>>>>> origin/master
-          }
-        }
-      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
-    },
-    updateMapMarkers(data) {
-      if (!data) return
-      
-      if (this.heilinEntity && data.heilinStation) {
-        const waterLevel = data.heilinStation.waterLevel || '3.25'
-        const flow = data.heilinStation.flow || '12.5'
-        const rainfall = data.heilinStation.rainfall || '0.5'
-        
-        this.heilinEntity.label.text = `水位 ${waterLevel}m\n流量 ${flow}m³/s\n降雨量 ${rainfall}mm/h`
-        this.poiData.waterLevel = waterLevel
-        this.poiData.flow = flow
-        this.poiData.rainfall = rainfall
-      }
-      
-      if (this.reservoirEntity && data.reservoir) {
-        const waterLevel = data.reservoir.waterLevel || '18.5'
-        const storage = data.reservoir.storage || '2350.8'
-        
-        this.reservoirEntity.label.text = `库水位 ${waterLevel}m\n库容 ${storage}万m³\n汛限 20.0m`
-      }
-    },
-    closePopup() {
-      this.showPopup = false
-    },
-    goToTwinStation() {
-      const heilinPosition = Cesium.Cartesian3.fromDegrees(118.8770798, 35.0320627, 10000)
-      this.viewer.camera.flyTo({
-        destination: heilinPosition,
-        duration: 2.0,
-        easingFunction: Cesium.EasingFunction.SINE_IN_OUT
-      })
-      this.closePopup()
-    }
-  },
-  async mounted() {
-    this.viewer = new Cesium.Viewer('cesiumContainer', {
-      terrainProvider: await Cesium.createWorldTerrainAsync(),
-      animation: false,
-      baseLayerPicker: false,
-      fullscreenButton: false,
-      geocoder: false,
-      homeButton: false,
-      infoBox: false,
-      sceneModePicker: false,
-      selectionIndicator: false,
-      timeline: false,
-      navigationHelpButton: false,
-      navigationInstructionsInitiallyVisible: false,
-      shouldAnimate: false,
-      showRenderLoopErrors: false
-    })
-    
-    if (this.viewer.cesiumWidget.creditContainer) {
-      this.viewer.cesiumWidget.creditContainer.style.display = 'none'
-    }
-    
-    const toolbar = this.viewer._element.querySelector('.cesium-viewer-toolbar')
-    if (toolbar) toolbar.style.display = 'none'
-    
-    const animationContainer = this.viewer._element.querySelector('.cesium-viewer-animationContainer')
-    if (animationContainer) animationContainer.style.display = 'none'
-    
-    const timelineContainer = this.viewer._element.querySelector('.cesium-viewer-timelineContainer')
-    if (timelineContainer) timelineContainer.style.display = 'none'
-
-    try {
-      const response = await fetch('/Heilin.geojson')
-      const geojson = await response.json()
-      
-      const dataSource = await Cesium.GeoJsonDataSource.load(geojson, {
-        stroke: Cesium.Color.fromCssColorString('#00d5ff'),
-        strokeWidth: 3,
-        fill: Cesium.Color.fromCssColorString('#00d5ff').withAlpha(0.1)
-      })
-      
-      this.viewer.dataSources.add(dataSource)
-      
-      try {
-        const waterResponse = await fetch('/黑林水系.geojson')
-        const waterGeojson = await waterResponse.json()
-        
-        const waterDataSource = await Cesium.GeoJsonDataSource.load(waterGeojson, {
-          stroke: Cesium.Color.fromCssColorString('#62f6fb'),
-          strokeWidth: 2,
-          fill: Cesium.Color.fromCssColorString('#62f6fb').withAlpha(0.2)
-        })
-        
-        this.viewer.dataSources.add(waterDataSource)
-      } catch (waterError) {
-        console.error('加载水系GeoJSON失败:', waterError)
-      }
-      
-      try {
-        const reservoirResponse = await fetch('/小塔山水库.geojson')
-        const reservoirGeojson = await reservoirResponse.json()
-        
-        const reservoirDataSource = await Cesium.GeoJsonDataSource.load(reservoirGeojson, {
-          stroke: Cesium.Color.fromCssColorString('#00d4ff'),
-          strokeWidth: 2,
-          fill: Cesium.Color.fromCssColorString('#00d4ff').withAlpha(0.3)
-        })
-        
-        this.viewer.dataSources.add(reservoirDataSource)
-      } catch (reservoirError) {
-        console.error('加载小塔山水库GeoJSON失败:', reservoirError)
-      }
-      
-      const entities = dataSource.entities.values
-      if (entities.length > 0) {
-        let minLat = 90, maxLat = -90, minLon = 180, maxLon = -180
-        
-        for (const entity of entities) {
-          if (entity.polygon && entity.polygon.hierarchy) {
-            const hierarchy = entity.polygon.hierarchy.getValue()
-            const positions = hierarchy.positions
-            
-            for (const pos of positions) {
-              const cartographic = Cesium.Cartographic.fromCartesian(pos)
-              const lat = Cesium.Math.toDegrees(cartographic.latitude)
-              const lon = Cesium.Math.toDegrees(cartographic.longitude)
-              
-              minLat = Math.min(minLat, lat)
-              maxLat = Math.max(maxLat, lat)
-              minLon = Math.min(minLon, lon)
-              maxLon = Math.max(maxLon, lon)
-            }
-          }
-        }
-        
-        this.viewer.camera.flyTo({
-          destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
-          duration: 0
-        })
-      }
-    } catch (error) {
-      console.error('加载GeoJSON失败:', error)
-      this.viewer.camera.flyTo({
-          destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
-          duration: 0
-        })
-    }
-
-<<<<<<< HEAD
-    this.addPoiMarker()
-    this.$nextTick(() => {
-      this.updateMapMarkers(this.simulationData)
-    })
-  },
-  beforeUnmount() {
-    if (this.blinkInterval) {
-      clearInterval(this.blinkInterval)
-    }
-    if (this.viewer) {
-      this.viewer.destroy()
-    }
-=======
-  addPoiMarker()
-  
-  window.addEventListener('resize', handleResize)
-})
-
-const handleResize = () => {
-  if (viewer.value) {
-    viewer.value.resize()
-  }
-}
-
-onUnmounted(() => {
-  window.removeEventListener('resize', handleResize)
-  if (blinkInterval) {
-    clearInterval(blinkInterval)
->>>>>>> origin/master
-  }
-}
-</script>
-
-<style scoped>
-.poi-popup {
-  position: fixed;
-  width: 240px;
-  background: rgba(0, 20, 40, 0.95);
-  border: 1px solid rgba(0, 213, 255, 0.6);
-  border-radius: 8px;
-  box-shadow: 0 0 20px rgba(0, 213, 255, 0.4);
-  z-index: 10;
-  pointer-events: auto;
-  overflow: hidden;
-}
-
-.popup-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 15px;
-  background: linear-gradient(90deg, rgba(0, 60, 120, 0.9), rgba(0, 100, 150, 0.7));
-  border-bottom: 1px solid rgba(0, 213, 255, 0.4);
-}
-
-.popup-title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #00ffff;
-  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
-}
-
-.popup-detail {
-  font-size: 12px;
-  color: #62f6fb;
-  text-decoration: none;
-  margin-left: 8px;
-  cursor: pointer;
-  transition: color 0.3s;
-}
-
-.popup-detail:hover {
-  color: #ffffff;
-  text-decoration: underline;
-}
-
-.popup-close {
-  background: none;
-  border: none;
-  color: #7bbef6;
-  font-size: 20px;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-  transition: color 0.3s;
-}
-
-.popup-close:hover {
-  color: #ffffff;
-}
-
-.popup-content {
-  padding: 15px;
-}
-
-.popup-section {
-  margin-bottom: 15px;
-}
-
-.popup-section:last-child {
-  margin-bottom: 0;
-}
-
-.popup-label {
-  font-size: 14px;
-  font-weight: bold;
-  color: #62f6fb;
-  margin-bottom: 8px;
-  text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
-}
-
-.popup-value {
-  font-size: 13px;
-  color: #e0fcff;
-  margin-bottom: 5px;
-  line-height: 1.5;
-}
-</style>

src/components/CesiumMap_BACKUP_843.vue

@@ -1,559 +0,0 @@
-<template>
-  <div id="cesiumContainer" class="cesium-ignore-autofit" style="width: 100%; height: 100%; position: relative; z-index: 1; transform: none !important; zoom: 1 !important;"></div>
-  
-  <!-- POI详情弹窗 -->
-  <div v-if="showPopup" class="poi-popup" :style="popupStyle">
-    <div class="popup-header">
-      <span class="popup-title">{{ poiData.name }} <a href="#" class="popup-detail" @click.prevent="goToTwinStation">详情</a></span>
-      <button class="popup-close" @click="closePopup">×</button>
-    </div>
-    <div class="popup-content">
-      <div class="popup-section">
-        <div class="popup-label">实时数据</div>
-        <div class="popup-value">水位: {{ poiData.waterLevel }}m</div>
-        <div class="popup-value">流量: {{ poiData.flow }}m³/s</div>
-        <div class="popup-value">降雨量: {{ poiData.rainfall }}mm/h</div>
-      </div>
-      <div class="popup-section">
-        <div class="popup-label">历史同期值</div>
-        <div class="popup-value">水位: {{ poiData.historyWaterLevel }}m</div>
-        <div class="popup-value">流量: {{ poiData.historyFlow }}m³/s</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import * as Cesium from 'cesium'
-import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'
-
-<<<<<<< HEAD
-export default {
-  name: 'CesiumMap',
-  props: {
-    simulationTime: {
-      type: Number,
-      default: 0
-    },
-    simulationData: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      viewer: null,
-      showPopup: false,
-      popupPosition: { x: 0, y: 0 },
-      poiData: {
-        name: '黑林水文站',
-        waterLevel: '3.25',
-        flow: '12.5',
-        rainfall: '0.5',
-        historyWaterLevel: '3.10',
-        historyFlow: '11.8',
-        device: 'HL-Sensor-001'
-=======
-const emit = defineEmits(['toggleMap'])
-
-const viewer = ref(null)
-const showPopup = ref(false)
-const popupPosition = ref({ x: 0, y: 0 })
-
-const router = useRouter()
-
-const DESIGN_WIDTH = 1920
-const DESIGN_HEIGHT = 1080
-
-const getScaleRatio = () => {
-  return Math.min(window.innerWidth / DESIGN_WIDTH, window.innerHeight / DESIGN_HEIGHT)
-}
-
-const poiData = ref({
-  name: '黑林水文站',
-  waterLevel: '3.25',
-  flow: '12.5',
-  rainfall: '0.5',
-  historyWaterLevel: '3.10',
-  historyFlow: '11.8',
-  device: 'HL-Sensor-001'
-})
-
-const popupStyle = computed(() => {
-  return {
-    left: popupPosition.value.x + 'px',
-    top: popupPosition.value.y + 'px'
-  }
-})
-
-let blinkInterval = null
-
-const addPoiMarker = () => {
-    // 添加黑林水文站POI
-    const heilinPosition = Cesium.Cartesian3.fromDegrees(118.8770798, 35.0320627)
-    
-    // 创建一个不可见的点实体，用于扩大点击区域
-    const clickEntity = viewer.value.entities.add({
-      id: 'heilin-station-click',
-      position: heilinPosition,
-      point: {
-        pixelSize: 30,
-        color: Cesium.Color.TRANSPARENT,
-        outlineColor: Cesium.Color.TRANSPARENT,
-        outlineWidth: 0
-      }
-    })
-    
-    const entity = viewer.value.entities.add({
-      id: 'heilin-station',
-      position: heilinPosition,
-      billboard: {
-        image: '/src/assets/images/水文站.png',
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-        pixelOffset: new Cesium.Cartesian2(0, -15),
-        scale: 0.8,
-        width: 30,
-        height: 37.5,
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
->>>>>>> origin/master
-      },
-      blinkInterval: null,
-      heilinEntity: null,
-      reservoirEntity: null
-    }
-  },
-  computed: {
-    popupStyle() {
-      return {
-        left: this.popupPosition.x + 'px',
-        top: this.popupPosition.y + 'px'
-      }
-    }
-  },
-  watch: {
-    simulationData: {
-      handler(newData) {
-        this.$nextTick(() => {
-          this.updateMapMarkers(newData)
-        })
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  methods: {
-    addPoiMarker() {
-      const heilinPosition = Cesium.Cartesian3.fromDegrees(118.8770798, 35.0320627)
-      
-      const clickEntity = this.viewer.entities.add({
-        id: 'heilin-station-click',
-        position: heilinPosition,
-        point: {
-          pixelSize: 30,
-          color: Cesium.Color.TRANSPARENT,
-          outlineColor: Cesium.Color.TRANSPARENT,
-          outlineWidth: 0
-        }
-      })
-      
-      this.heilinEntity = this.viewer.entities.add({
-        id: 'heilin-station',
-        position: heilinPosition,
-        billboard: {
-          image: '/src/assets/images/水文站.png',
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-          pixelOffset: new Cesium.Cartesian2(0, -15),
-          scale: 0.8,
-          width: 30,
-          height: 37.5,
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        },
-        label: {
-          text: `水位 ${this.simulationData.heilinStation?.waterLevel || '3.25'}m\n流量 ${this.simulationData.heilinStation?.flow || '12.5'}m³/s\n降雨量 ${this.simulationData.heilinStation?.rainfall || '0.5'}mm/h`,
-          font: 'bold 14px 黑体',
-          fillColor: Cesium.Color.WHITE,
-          outlineColor: Cesium.Color.fromCssColorString('#003860'),
-          outlineWidth: 2,
-          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-          pixelOffset: new Cesium.Cartesian2(0, -30),
-          showBackground: true,
-          backgroundColor: new Cesium.Color(0, 0.3, 0.5, 0.7),
-          backgroundPadding: new Cesium.Cartesian2(8, 4),
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        }
-      })
-      
-      this.viewer.entities.add({
-        id: 'heilin-station-title',
-        position: heilinPosition,
-        label: {
-          text: '黑林水文站',
-          font: 'bold 14px sans-serif',
-          fillColor: Cesium.Color.WHITE,
-          outlineColor: Cesium.Color.fromCssColorString('#003860'),
-          outlineWidth: 2,
-          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-          pixelOffset: new Cesium.Cartesian2(0, -85),
-          showBackground: true,
-          backgroundColor: new Cesium.Color(0, 0.2, 0.4, 0.9),
-          backgroundPadding: new Cesium.Cartesian2(22, 4),
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        }
-      })
-
-<<<<<<< HEAD
-      const reservoirPosition = Cesium.Cartesian3.fromDegrees(118.9540555, 34.9355329)
-      
-      this.reservoirEntity = this.viewer.entities.add({
-        id: 'tashan-reservoir',
-        position: reservoirPosition,
-        billboard: {
-          image: '/src/assets/images/水库蓝.png',
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-          pixelOffset: new Cesium.Cartesian2(0, -15),
-          scale: 0.8,
-          width: 30,
-          height: 30,
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        },
-        label: {
-          text: `库水位 ${this.simulationData.reservoir?.waterLevel || '18.5'}m\n库容 ${this.simulationData.reservoir?.storage || '2350.8'}万m³\n汛限 20.0m`,
-          font: 'bold 14px 黑体',
-          fillColor: Cesium.Color.WHITE,
-          outlineColor: Cesium.Color.fromCssColorString('#003860'),
-          outlineWidth: 2,
-          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-          pixelOffset: new Cesium.Cartesian2(0, -30),
-          showBackground: true,
-          backgroundColor: new Cesium.Color(0, 0.3, 0.5, 0.7),
-          backgroundPadding: new Cesium.Cartesian2(8, 4),
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        }
-      })
-      
-      this.viewer.entities.add({
-        id: 'tashan-reservoir-title',
-        position: reservoirPosition,
-        label: {
-          text: '小塔山水库',
-          font: 'bold 14px sans-serif',
-          fillColor: Cesium.Color.WHITE,
-          outlineColor: Cesium.Color.fromCssColorString('#003860'),
-          outlineWidth: 2,
-          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-          pixelOffset: new Cesium.Cartesian2(0, -85),
-          showBackground: true,
-          backgroundColor: new Cesium.Color(0, 0.2, 0.4, 0.9),
-          backgroundPadding: new Cesium.Cartesian2(22, 4),
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        }
-      })
-
-      const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
-      
-      handler.setInputAction((movement) => {
-        const pickedObjects = this.viewer.scene.drillPick(movement.position)
-        for (let i = 0; i < pickedObjects.length; i++) {
-          const pickedObj = pickedObjects[i]
-          if (Cesium.defined(pickedObj) && pickedObj.id) {
-            if (pickedObj.id.id === 'heilin-station' || pickedObj.id.id === 'heilin-station-click') {
-              this.showPopup = true
-              this.popupPosition = { x: movement.position.x - 120, y: movement.position.y - 150 }
-              break
-            }
-=======
-    const handler = new Cesium.ScreenSpaceEventHandler(viewer.value.scene.canvas)
-    
-    handler.setInputAction((movement) => {
-      const scaleRatio = getScaleRatio()
-      const correctedX = movement.position.x / scaleRatio
-      const correctedY = movement.position.y / scaleRatio
-      
-      const pickedObjects = viewer.value.scene.drillPick(new Cesium.Cartesian2(correctedX, correctedY))
-      for (let i = 0; i < pickedObjects.length; i++) {
-        const pickedObj = pickedObjects[i]
-        if (Cesium.defined(pickedObj) && pickedObj.id) {
-          if (pickedObj.id.id === 'heilin-station' || pickedObj.id.id === 'heilin-station-click') {
-            showPopup.value = true
-            popupPosition.value = { 
-              x: movement.position.x - 120, 
-              y: movement.position.y - 150 
-            }
-            break
->>>>>>> origin/master
-          }
-        }
-      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
-    },
-    updateMapMarkers(data) {
-      if (!data) return
-      
-      if (this.heilinEntity && data.heilinStation) {
-        const waterLevel = data.heilinStation.waterLevel || '3.25'
-        const flow = data.heilinStation.flow || '12.5'
-        const rainfall = data.heilinStation.rainfall || '0.5'
-        
-        this.heilinEntity.label.text = `水位 ${waterLevel}m\n流量 ${flow}m³/s\n降雨量 ${rainfall}mm/h`
-        this.poiData.waterLevel = waterLevel
-        this.poiData.flow = flow
-        this.poiData.rainfall = rainfall
-      }
-      
-      if (this.reservoirEntity && data.reservoir) {
-        const waterLevel = data.reservoir.waterLevel || '18.5'
-        const storage = data.reservoir.storage || '2350.8'
-        
-        this.reservoirEntity.label.text = `库水位 ${waterLevel}m\n库容 ${storage}万m³\n汛限 20.0m`
-      }
-    },
-    closePopup() {
-      this.showPopup = false
-    },
-    goToTwinStation() {
-      const heilinPosition = Cesium.Cartesian3.fromDegrees(118.8770798, 35.0320627, 10000)
-      this.viewer.camera.flyTo({
-        destination: heilinPosition,
-        duration: 2.0,
-        easingFunction: Cesium.EasingFunction.SINE_IN_OUT
-      })
-      this.closePopup()
-    }
-  },
-  async mounted() {
-    this.viewer = new Cesium.Viewer('cesiumContainer', {
-      terrainProvider: await Cesium.createWorldTerrainAsync(),
-      animation: false,
-      baseLayerPicker: false,
-      fullscreenButton: false,
-      geocoder: false,
-      homeButton: false,
-      infoBox: false,
-      sceneModePicker: false,
-      selectionIndicator: false,
-      timeline: false,
-      navigationHelpButton: false,
-      navigationInstructionsInitiallyVisible: false,
-      shouldAnimate: false,
-      showRenderLoopErrors: false
-    })
-    
-    if (this.viewer.cesiumWidget.creditContainer) {
-      this.viewer.cesiumWidget.creditContainer.style.display = 'none'
-    }
-    
-    const toolbar = this.viewer._element.querySelector('.cesium-viewer-toolbar')
-    if (toolbar) toolbar.style.display = 'none'
-    
-    const animationContainer = this.viewer._element.querySelector('.cesium-viewer-animationContainer')
-    if (animationContainer) animationContainer.style.display = 'none'
-    
-    const timelineContainer = this.viewer._element.querySelector('.cesium-viewer-timelineContainer')
-    if (timelineContainer) timelineContainer.style.display = 'none'
-
-    try {
-      const response = await fetch('/Heilin.geojson')
-      const geojson = await response.json()
-      
-      const dataSource = await Cesium.GeoJsonDataSource.load(geojson, {
-        stroke: Cesium.Color.fromCssColorString('#00d5ff'),
-        strokeWidth: 3,
-        fill: Cesium.Color.fromCssColorString('#00d5ff').withAlpha(0.1)
-      })
-      
-      this.viewer.dataSources.add(dataSource)
-      
-      try {
-        const waterResponse = await fetch('/黑林水系.geojson')
-        const waterGeojson = await waterResponse.json()
-        
-        const waterDataSource = await Cesium.GeoJsonDataSource.load(waterGeojson, {
-          stroke: Cesium.Color.fromCssColorString('#62f6fb'),
-          strokeWidth: 2,
-          fill: Cesium.Color.fromCssColorString('#62f6fb').withAlpha(0.2)
-        })
-        
-        this.viewer.dataSources.add(waterDataSource)
-      } catch (waterError) {
-        console.error('加载水系GeoJSON失败:', waterError)
-      }
-      
-      try {
-        const reservoirResponse = await fetch('/小塔山水库.geojson')
-        const reservoirGeojson = await reservoirResponse.json()
-        
-        const reservoirDataSource = await Cesium.GeoJsonDataSource.load(reservoirGeojson, {
-          stroke: Cesium.Color.fromCssColorString('#00d4ff'),
-          strokeWidth: 2,
-          fill: Cesium.Color.fromCssColorString('#00d4ff').withAlpha(0.3)
-        })
-        
-        this.viewer.dataSources.add(reservoirDataSource)
-      } catch (reservoirError) {
-        console.error('加载小塔山水库GeoJSON失败:', reservoirError)
-      }
-      
-      const entities = dataSource.entities.values
-      if (entities.length > 0) {
-        let minLat = 90, maxLat = -90, minLon = 180, maxLon = -180
-        
-        for (const entity of entities) {
-          if (entity.polygon && entity.polygon.hierarchy) {
-            const hierarchy = entity.polygon.hierarchy.getValue()
-            const positions = hierarchy.positions
-            
-            for (const pos of positions) {
-              const cartographic = Cesium.Cartographic.fromCartesian(pos)
-              const lat = Cesium.Math.toDegrees(cartographic.latitude)
-              const lon = Cesium.Math.toDegrees(cartographic.longitude)
-              
-              minLat = Math.min(minLat, lat)
-              maxLat = Math.max(maxLat, lat)
-              minLon = Math.min(minLon, lon)
-              maxLon = Math.max(maxLon, lon)
-            }
-          }
-        }
-        
-        this.viewer.camera.flyTo({
-          destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
-          duration: 0
-        })
-      }
-    } catch (error) {
-      console.error('加载GeoJSON失败:', error)
-      this.viewer.camera.flyTo({
-          destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
-          duration: 0
-        })
-    }
-
-<<<<<<< HEAD
-    this.addPoiMarker()
-    this.$nextTick(() => {
-      this.updateMapMarkers(this.simulationData)
-    })
-  },
-  beforeUnmount() {
-    if (this.blinkInterval) {
-      clearInterval(this.blinkInterval)
-    }
-    if (this.viewer) {
-      this.viewer.destroy()
-    }
-=======
-  addPoiMarker()
-  
-  window.addEventListener('resize', handleResize)
-})
-
-const handleResize = () => {
-  if (viewer.value) {
-    viewer.value.resize()
-  }
-}
-
-onUnmounted(() => {
-  window.removeEventListener('resize', handleResize)
-  if (blinkInterval) {
-    clearInterval(blinkInterval)
->>>>>>> origin/master
-  }
-}
-</script>
-
-<style scoped>
-.poi-popup {
-  position: fixed;
-  width: 240px;
-  background: rgba(0, 20, 40, 0.95);
-  border: 1px solid rgba(0, 213, 255, 0.6);
-  border-radius: 8px;
-  box-shadow: 0 0 20px rgba(0, 213, 255, 0.4);
-  z-index: 10;
-  pointer-events: auto;
-  overflow: hidden;
-}
-
-.popup-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 15px;
-  background: linear-gradient(90deg, rgba(0, 60, 120, 0.9), rgba(0, 100, 150, 0.7));
-  border-bottom: 1px solid rgba(0, 213, 255, 0.4);
-}
-
-.popup-title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #00ffff;
-  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
-}
-
-.popup-detail {
-  font-size: 12px;
-  color: #62f6fb;
-  text-decoration: none;
-  margin-left: 8px;
-  cursor: pointer;
-  transition: color 0.3s;
-}
-
-.popup-detail:hover {
-  color: #ffffff;
-  text-decoration: underline;
-}
-
-.popup-close {
-  background: none;
-  border: none;
-  color: #7bbef6;
-  font-size: 20px;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-  transition: color 0.3s;
-}
-
-.popup-close:hover {
-  color: #ffffff;
-}
-
-.popup-content {
-  padding: 15px;
-}
-
-.popup-section {
-  margin-bottom: 15px;
-}
-
-.popup-section:last-child {
-  margin-bottom: 0;
-}
-
-.popup-label {
-  font-size: 14px;
-  font-weight: bold;
-  color: #62f6fb;
-  margin-bottom: 8px;
-  text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
-}
-
-.popup-value {
-  font-size: 13px;
-  color: #e0fcff;
-  margin-bottom: 5px;
-  line-height: 1.5;
-}
-</style>

src/components/CesiumMap_BASE_758.vue

@@ -1,457 +0,0 @@
-<template>
-  <div id="cesiumContainer" class="cesium-ignore-autofit" style="width: 100%; height: 100%; position: relative; z-index: 1; transform: none !important; zoom: 1 !important;"></div>
-  
-  <!-- POI详情弹窗 -->
-  <div v-if="showPopup" class="poi-popup" :style="popupStyle">
-    <div class="popup-header">
-      <span class="popup-title">{{ poiData.name }} <a href="#" class="popup-detail" @click.prevent="goToTwinStation">详情</a></span>
-      <button class="popup-close" @click="closePopup">×</button>
-    </div>
-    <div class="popup-content">
-      <div class="popup-section">
-        <div class="popup-label">实时数据</div>
-        <div class="popup-value">水位: {{ poiData.waterLevel }}m</div>
-        <div class="popup-value">流量: {{ poiData.flow }}m³/s</div>
-        <div class="popup-value">降雨量: {{ poiData.rainfall }}mm/h</div>
-      </div>
-      <div class="popup-section">
-        <div class="popup-label">历史同期值</div>
-        <div class="popup-value">水位: {{ poiData.historyWaterLevel }}m</div>
-        <div class="popup-value">流量: {{ poiData.historyFlow }}m³/s</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted, computed } from 'vue'
-import * as Cesium from 'cesium'
-import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'
-import { useRouter } from 'vue-router'
-
-const emit = defineEmits(['toggleMap'])
-
-const viewer = ref(null)
-const showPopup = ref(false)
-const popupPosition = ref({ x: 0, y: 0 })
-
-const router = useRouter()
-
-const poiData = ref({
-  name: '黑林水文站',
-  waterLevel: '3.25',
-  flow: '12.5',
-  rainfall: '0.5',
-  historyWaterLevel: '3.10',
-  historyFlow: '11.8',
-  device: 'HL-Sensor-001'
-})
-
-const popupStyle = computed(() => {
-  return {
-    left: popupPosition.value.x + 'px',
-    top: popupPosition.value.y + 'px'
-  }
-})
-
-let blinkInterval = null
-
-const addPoiMarker = () => {
-    // 添加黑林水文站POI
-    const heilinPosition = Cesium.Cartesian3.fromDegrees(118.8770798, 35.0320627)
-    
-    // 创建一个不可见的点实体，用于扩大点击区域
-    const clickEntity = viewer.value.entities.add({
-      id: 'heilin-station-click',
-      position: heilinPosition,
-      point: {
-        pixelSize: 30,
-        color: Cesium.Color.TRANSPARENT,
-        outlineColor: Cesium.Color.TRANSPARENT,
-        outlineWidth: 0
-      }
-    })
-    
-    const entity = viewer.value.entities.add({
-      id: 'heilin-station',
-      position: heilinPosition,
-      billboard: {
-        image: '/src/assets/images/水文站.png',
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-        pixelOffset: new Cesium.Cartesian2(0, -15),
-        scale: 0.8,
-        width: 30,
-        height: 37.5,
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      },
-      label: {
-        text: '水位 3.25m\n流量 12.5m³/s\n降雨量 0.5mm/h',
-        font: 'bold 14px 黑体',
-        fillColor: Cesium.Color.WHITE,
-        outlineColor: Cesium.Color.fromCssColorString('#003860'),
-        outlineWidth: 2,
-        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-        pixelOffset: new Cesium.Cartesian2(0, -30),
-        showBackground: true,
-        backgroundColor: new Cesium.Color(0, 0.3, 0.5, 0.7),
-        backgroundPadding: new Cesium.Cartesian2(8, 4),
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      }
-    })
-    
-    // 添加标题标签
-    viewer.value.entities.add({
-      id: 'heilin-station-title',
-      position: heilinPosition,
-      label: {
-        text: '黑林水文站',
-        font: 'bold 14px sans-serif',
-        fillColor: Cesium.Color.WHITE,
-        outlineColor: Cesium.Color.fromCssColorString('#003860'),
-        outlineWidth: 2,
-        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-        pixelOffset: new Cesium.Cartesian2(0, -85),
-        showBackground: true,
-        backgroundColor: new Cesium.Color(0, 0.2, 0.4, 0.9),
-        backgroundPadding: new Cesium.Cartesian2(22, 4),
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      }
-    })
-
-    // 添加塔山小水库POI
-    const reservoirPosition = Cesium.Cartesian3.fromDegrees(118.9540555, 34.9355329)
-    
-    const reservoirEntity = viewer.value.entities.add({
-      id: 'tashan-reservoir',
-      position: reservoirPosition,
-      billboard: {
-        image: '/src/assets/images/水库蓝.png',
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-        pixelOffset: new Cesium.Cartesian2(0, -15),
-        scale: 0.8,
-        width: 30,
-        height: 30,
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      },
-      label: {
-        text: '库水位 18.5m\n库容 2350.8万m³\n汛限 20.0m',
-        font: 'bold 14px 黑体',
-        fillColor: Cesium.Color.WHITE,
-        outlineColor: Cesium.Color.fromCssColorString('#003860'),
-        outlineWidth: 2,
-        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-        pixelOffset: new Cesium.Cartesian2(0, -30),
-        showBackground: true,
-        backgroundColor: new Cesium.Color(0, 0.3, 0.5, 0.7),
-        backgroundPadding: new Cesium.Cartesian2(8, 4),
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      }
-    })
-    
-    // 添加标题标签
-    viewer.value.entities.add({
-      id: 'tashan-reservoir-title',
-      position: reservoirPosition,
-      label: {
-        text: '小塔山水库',
-        font: 'bold 14px sans-serif',
-        fillColor: Cesium.Color.WHITE,
-        outlineColor: Cesium.Color.fromCssColorString('#003860'),
-        outlineWidth: 2,
-        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-        pixelOffset: new Cesium.Cartesian2(0, -85),
-        showBackground: true,
-        backgroundColor: new Cesium.Color(0, 0.2, 0.4, 0.9),
-        backgroundPadding: new Cesium.Cartesian2(22, 4),
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      }
-    })
-
-    const handler = new Cesium.ScreenSpaceEventHandler(viewer.value.scene.canvas)
-    
-    handler.setInputAction((movement) => {
-      // 尝试拾取所有对象
-      const pickedObjects = viewer.value.scene.drillPick(movement.position)
-      for (let i = 0; i < pickedObjects.length; i++) {
-        const pickedObj = pickedObjects[i]
-        if (Cesium.defined(pickedObj) && pickedObj.id) {
-          if (pickedObj.id.id === 'heilin-station' || pickedObj.id.id === 'heilin-station-click') {
-            showPopup.value = true
-            popupPosition.value = { x: movement.position.x - 120, y: movement.position.y - 150 }
-            break
-          }
-        }
-      }
-    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
-
-    // 移除闪烁效果
-    entity.billboard.scale = 0.8
-    reservoirEntity.billboard.scale = 0.8
-  }
-
-const createPoiImage = () => {
-  const canvas = document.createElement('canvas')
-  canvas.width = 40
-  canvas.height = 50
-  const ctx = canvas.getContext('2d')
-  
-  ctx.beginPath()
-  ctx.moveTo(20, 0)
-  ctx.lineTo(40, 30)
-  ctx.lineTo(20, 50)
-  ctx.lineTo(0, 30)
-  ctx.closePath()
-  
-  const gradient = ctx.createRadialGradient(20, 25, 5, 20, 25, 25)
-  gradient.addColorStop(0, '#00ffff')
-  gradient.addColorStop(1, '#0066ff')
-  ctx.fillStyle = gradient
-  ctx.fill()
-  
-  ctx.strokeStyle = '#ffffff'
-  ctx.lineWidth = 2
-  ctx.stroke()
-  
-  return canvas
-}
-
-const closePopup = () => {
-  showPopup.value = false
-}
-
-const goToTwinStation = () => {
-  // 执行平滑flyto动画到黑林水文站位置
-  const heilinPosition = Cesium.Cartesian3.fromDegrees(118.8770798, 35.0320627, 10000)
-  viewer.value.camera.flyTo({
-    destination: heilinPosition,
-    duration: 2.0,
-    easingFunction: Cesium.EasingFunction.SINE_IN_OUT
-  })
-  
-  // 延迟跳转到水文站详情页面
-  setTimeout(() => {
-    router.push('/heilin-station')
-  }, 2000)
-  
-  closePopup()
-}
-
-onMounted(async () => {
-  viewer.value = new Cesium.Viewer('cesiumContainer', {
-    terrainProvider: await Cesium.createWorldTerrainAsync(),
-    animation: false,
-    baseLayerPicker: false,
-    fullscreenButton: false,
-    geocoder: false,
-    homeButton: false,
-    infoBox: false,
-    sceneModePicker: false,
-    selectionIndicator: false,
-    timeline: false,
-    navigationHelpButton: false,
-    navigationInstructionsInitiallyVisible: false,
-    shouldAnimate: false,
-    showRenderLoopErrors: false
-  })
-  
-  if (viewer.value.cesiumWidget.creditContainer) {
-    viewer.value.cesiumWidget.creditContainer.style.display = 'none'
-  }
-  
-  const toolbar = viewer.value._element.querySelector('.cesium-viewer-toolbar')
-  if (toolbar) toolbar.style.display = 'none'
-  
-  const animationContainer = viewer.value._element.querySelector('.cesium-viewer-animationContainer')
-  if (animationContainer) animationContainer.style.display = 'none'
-  
-  const timelineContainer = viewer.value._element.querySelector('.cesium-viewer-timelineContainer')
-  if (timelineContainer) timelineContainer.style.display = 'none'
-
-  try {
-    // 加载流域边界GeoJSON
-    const response = await fetch('/Heilin.geojson')
-    const geojson = await response.json()
-    
-    const dataSource = await Cesium.GeoJsonDataSource.load(geojson, {
-      stroke: Cesium.Color.fromCssColorString('#00d5ff'),
-      strokeWidth: 3,
-      fill: Cesium.Color.fromCssColorString('#00d5ff').withAlpha(0.1)
-    })
-    
-    viewer.value.dataSources.add(dataSource)
-    
-    // 加载水系GeoJSON
-    try {
-      const waterResponse = await fetch('/黑林水系.geojson')
-      const waterGeojson = await waterResponse.json()
-      
-      const waterDataSource = await Cesium.GeoJsonDataSource.load(waterGeojson, {
-        stroke: Cesium.Color.fromCssColorString('#62f6fb'),
-        strokeWidth: 2,
-        fill: Cesium.Color.fromCssColorString('#62f6fb').withAlpha(0.2)
-      })
-      
-      viewer.value.dataSources.add(waterDataSource)
-    } catch (waterError) {
-      console.error('加载水系GeoJSON失败:', waterError)
-    }
-    
-    // 加载小塔山水库GeoJSON
-    try {
-      const reservoirResponse = await fetch('/小塔山水库.geojson')
-      const reservoirGeojson = await reservoirResponse.json()
-      
-      const reservoirDataSource = await Cesium.GeoJsonDataSource.load(reservoirGeojson, {
-        stroke: Cesium.Color.fromCssColorString('#00d4ff'),
-        strokeWidth: 2,
-        fill: Cesium.Color.fromCssColorString('#00d4ff').withAlpha(0.3)
-      })
-      
-      viewer.value.dataSources.add(reservoirDataSource)
-    } catch (reservoirError) {
-      console.error('加载小塔山水库GeoJSON失败:', reservoirError)
-    }
-    
-    const entities = dataSource.entities.values
-    if (entities.length > 0) {
-      let minLat = 90, maxLat = -90, minLon = 180, maxLon = -180
-      
-      for (const entity of entities) {
-        if (entity.polygon && entity.polygon.hierarchy) {
-          const hierarchy = entity.polygon.hierarchy.getValue()
-          const positions = hierarchy.positions
-          
-          for (const pos of positions) {
-            const cartographic = Cesium.Cartographic.fromCartesian(pos)
-            const lat = Cesium.Math.toDegrees(cartographic.latitude)
-            const lon = Cesium.Math.toDegrees(cartographic.longitude)
-            
-            minLat = Math.min(minLat, lat)
-            maxLat = Math.max(maxLat, lat)
-            minLon = Math.min(minLon, lon)
-            maxLon = Math.max(maxLon, lon)
-          }
-        }
-      }
-      
-      viewer.value.camera.flyTo({
-        destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
-        duration: 0
-      })
-    }
-  } catch (error) {
-    console.error('加载GeoJSON失败:', error)
-    viewer.value.camera.flyTo({
-        destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
-        duration: 0
-      })
-  }
-
-  addPoiMarker()
-})
-
-onUnmounted(() => {
-  if (blinkInterval) {
-    clearInterval(blinkInterval)
-  }
-  if (viewer.value) {
-    viewer.value.destroy()
-  }
-})
-</script>
-
-<style scoped>
-.poi-popup {
-  position: fixed;
-  width: 240px;
-  background: rgba(0, 20, 40, 0.95);
-  border: 1px solid rgba(0, 213, 255, 0.6);
-  border-radius: 8px;
-  box-shadow: 0 0 20px rgba(0, 213, 255, 0.4);
-  z-index: 10;
-  pointer-events: auto;
-  overflow: hidden;
-}
-
-.popup-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 15px;
-  background: linear-gradient(90deg, rgba(0, 60, 120, 0.9), rgba(0, 100, 150, 0.7));
-  border-bottom: 1px solid rgba(0, 213, 255, 0.4);
-}
-
-.popup-title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #00ffff;
-  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
-}
-
-.popup-detail {
-  font-size: 12px;
-  color: #62f6fb;
-  text-decoration: none;
-  margin-left: 8px;
-  cursor: pointer;
-  transition: color 0.3s;
-}
-
-.popup-detail:hover {
-  color: #ffffff;
-  text-decoration: underline;
-}
-
-.popup-close {
-  background: none;
-  border: none;
-  color: #7bbef6;
-  font-size: 20px;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-  transition: color 0.3s;
-}
-
-.popup-close:hover {
-  color: #ffffff;
-}
-
-.popup-content {
-  padding: 15px;
-}
-
-.popup-section {
-  margin-bottom: 15px;
-}
-
-.popup-section:last-child {
-  margin-bottom: 0;
-}
-
-.popup-label {
-  font-size: 14px;
-  font-weight: bold;
-  color: #62f6fb;
-  margin-bottom: 8px;
-  text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
-}
-
-.popup-value {
-  font-size: 13px;
-  color: #e0fcff;
-  margin-bottom: 5px;
-  line-height: 1.5;
-}
-</style>

src/components/CesiumMap_BASE_843.vue

@@ -1,457 +0,0 @@
-<template>
-  <div id="cesiumContainer" class="cesium-ignore-autofit" style="width: 100%; height: 100%; position: relative; z-index: 1; transform: none !important; zoom: 1 !important;"></div>
-  
-  <!-- POI详情弹窗 -->
-  <div v-if="showPopup" class="poi-popup" :style="popupStyle">
-    <div class="popup-header">
-      <span class="popup-title">{{ poiData.name }} <a href="#" class="popup-detail" @click.prevent="goToTwinStation">详情</a></span>
-      <button class="popup-close" @click="closePopup">×</button>
-    </div>
-    <div class="popup-content">
-      <div class="popup-section">
-        <div class="popup-label">实时数据</div>
-        <div class="popup-value">水位: {{ poiData.waterLevel }}m</div>
-        <div class="popup-value">流量: {{ poiData.flow }}m³/s</div>
-        <div class="popup-value">降雨量: {{ poiData.rainfall }}mm/h</div>
-      </div>
-      <div class="popup-section">
-        <div class="popup-label">历史同期值</div>
-        <div class="popup-value">水位: {{ poiData.historyWaterLevel }}m</div>
-        <div class="popup-value">流量: {{ poiData.historyFlow }}m³/s</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted, computed } from 'vue'
-import * as Cesium from 'cesium'
-import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'
-import { useRouter } from 'vue-router'
-
-const emit = defineEmits(['toggleMap'])
-
-const viewer = ref(null)
-const showPopup = ref(false)
-const popupPosition = ref({ x: 0, y: 0 })
-
-const router = useRouter()
-
-const poiData = ref({
-  name: '黑林水文站',
-  waterLevel: '3.25',
-  flow: '12.5',
-  rainfall: '0.5',
-  historyWaterLevel: '3.10',
-  historyFlow: '11.8',
-  device: 'HL-Sensor-001'
-})
-
-const popupStyle = computed(() => {
-  return {
-    left: popupPosition.value.x + 'px',
-    top: popupPosition.value.y + 'px'
-  }
-})
-
-let blinkInterval = null
-
-const addPoiMarker = () => {
-    // 添加黑林水文站POI
-    const heilinPosition = Cesium.Cartesian3.fromDegrees(118.8770798, 35.0320627)
-    
-    // 创建一个不可见的点实体，用于扩大点击区域
-    const clickEntity = viewer.value.entities.add({
-      id: 'heilin-station-click',
-      position: heilinPosition,
-      point: {
-        pixelSize: 30,
-        color: Cesium.Color.TRANSPARENT,
-        outlineColor: Cesium.Color.TRANSPARENT,
-        outlineWidth: 0
-      }
-    })
-    
-    const entity = viewer.value.entities.add({
-      id: 'heilin-station',
-      position: heilinPosition,
-      billboard: {
-        image: '/src/assets/images/水文站.png',
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-        pixelOffset: new Cesium.Cartesian2(0, -15),
-        scale: 0.8,
-        width: 30,
-        height: 37.5,
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      },
-      label: {
-        text: '水位 3.25m\n流量 12.5m³/s\n降雨量 0.5mm/h',
-        font: 'bold 14px 黑体',
-        fillColor: Cesium.Color.WHITE,
-        outlineColor: Cesium.Color.fromCssColorString('#003860'),
-        outlineWidth: 2,
-        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-        pixelOffset: new Cesium.Cartesian2(0, -30),
-        showBackground: true,
-        backgroundColor: new Cesium.Color(0, 0.3, 0.5, 0.7),
-        backgroundPadding: new Cesium.Cartesian2(8, 4),
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      }
-    })
-    
-    // 添加标题标签
-    viewer.value.entities.add({
-      id: 'heilin-station-title',
-      position: heilinPosition,
-      label: {
-        text: '黑林水文站',
-        font: 'bold 14px sans-serif',
-        fillColor: Cesium.Color.WHITE,
-        outlineColor: Cesium.Color.fromCssColorString('#003860'),
-        outlineWidth: 2,
-        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-        pixelOffset: new Cesium.Cartesian2(0, -85),
-        showBackground: true,
-        backgroundColor: new Cesium.Color(0, 0.2, 0.4, 0.9),
-        backgroundPadding: new Cesium.Cartesian2(22, 4),
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      }
-    })
-
-    // 添加塔山小水库POI
-    const reservoirPosition = Cesium.Cartesian3.fromDegrees(118.9540555, 34.9355329)
-    
-    const reservoirEntity = viewer.value.entities.add({
-      id: 'tashan-reservoir',
-      position: reservoirPosition,
-      billboard: {
-        image: '/src/assets/images/水库蓝.png',
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-        pixelOffset: new Cesium.Cartesian2(0, -15),
-        scale: 0.8,
-        width: 30,
-        height: 30,
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      },
-      label: {
-        text: '库水位 18.5m\n库容 2350.8万m³\n汛限 20.0m',
-        font: 'bold 14px 黑体',
-        fillColor: Cesium.Color.WHITE,
-        outlineColor: Cesium.Color.fromCssColorString('#003860'),
-        outlineWidth: 2,
-        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-        pixelOffset: new Cesium.Cartesian2(0, -30),
-        showBackground: true,
-        backgroundColor: new Cesium.Color(0, 0.3, 0.5, 0.7),
-        backgroundPadding: new Cesium.Cartesian2(8, 4),
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      }
-    })
-    
-    // 添加标题标签
-    viewer.value.entities.add({
-      id: 'tashan-reservoir-title',
-      position: reservoirPosition,
-      label: {
-        text: '小塔山水库',
-        font: 'bold 14px sans-serif',
-        fillColor: Cesium.Color.WHITE,
-        outlineColor: Cesium.Color.fromCssColorString('#003860'),
-        outlineWidth: 2,
-        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-        pixelOffset: new Cesium.Cartesian2(0, -85),
-        showBackground: true,
-        backgroundColor: new Cesium.Color(0, 0.2, 0.4, 0.9),
-        backgroundPadding: new Cesium.Cartesian2(22, 4),
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      }
-    })
-
-    const handler = new Cesium.ScreenSpaceEventHandler(viewer.value.scene.canvas)
-    
-    handler.setInputAction((movement) => {
-      // 尝试拾取所有对象
-      const pickedObjects = viewer.value.scene.drillPick(movement.position)
-      for (let i = 0; i < pickedObjects.length; i++) {
-        const pickedObj = pickedObjects[i]
-        if (Cesium.defined(pickedObj) && pickedObj.id) {
-          if (pickedObj.id.id === 'heilin-station' || pickedObj.id.id === 'heilin-station-click') {
-            showPopup.value = true
-            popupPosition.value = { x: movement.position.x - 120, y: movement.position.y - 150 }
-            break
-          }
-        }
-      }
-    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
-
-    // 移除闪烁效果
-    entity.billboard.scale = 0.8
-    reservoirEntity.billboard.scale = 0.8
-  }
-
-const createPoiImage = () => {
-  const canvas = document.createElement('canvas')
-  canvas.width = 40
-  canvas.height = 50
-  const ctx = canvas.getContext('2d')
-  
-  ctx.beginPath()
-  ctx.moveTo(20, 0)
-  ctx.lineTo(40, 30)
-  ctx.lineTo(20, 50)
-  ctx.lineTo(0, 30)
-  ctx.closePath()
-  
-  const gradient = ctx.createRadialGradient(20, 25, 5, 20, 25, 25)
-  gradient.addColorStop(0, '#00ffff')
-  gradient.addColorStop(1, '#0066ff')
-  ctx.fillStyle = gradient
-  ctx.fill()
-  
-  ctx.strokeStyle = '#ffffff'
-  ctx.lineWidth = 2
-  ctx.stroke()
-  
-  return canvas
-}
-
-const closePopup = () => {
-  showPopup.value = false
-}
-
-const goToTwinStation = () => {
-  // 执行平滑flyto动画到黑林水文站位置
-  const heilinPosition = Cesium.Cartesian3.fromDegrees(118.8770798, 35.0320627, 10000)
-  viewer.value.camera.flyTo({
-    destination: heilinPosition,
-    duration: 2.0,
-    easingFunction: Cesium.EasingFunction.SINE_IN_OUT
-  })
-  
-  // 延迟跳转到水文站详情页面
-  setTimeout(() => {
-    router.push('/heilin-station')
-  }, 2000)
-  
-  closePopup()
-}
-
-onMounted(async () => {
-  viewer.value = new Cesium.Viewer('cesiumContainer', {
-    terrainProvider: await Cesium.createWorldTerrainAsync(),
-    animation: false,
-    baseLayerPicker: false,
-    fullscreenButton: false,
-    geocoder: false,
-    homeButton: false,
-    infoBox: false,
-    sceneModePicker: false,
-    selectionIndicator: false,
-    timeline: false,
-    navigationHelpButton: false,
-    navigationInstructionsInitiallyVisible: false,
-    shouldAnimate: false,
-    showRenderLoopErrors: false
-  })
-  
-  if (viewer.value.cesiumWidget.creditContainer) {
-    viewer.value.cesiumWidget.creditContainer.style.display = 'none'
-  }
-  
-  const toolbar = viewer.value._element.querySelector('.cesium-viewer-toolbar')
-  if (toolbar) toolbar.style.display = 'none'
-  
-  const animationContainer = viewer.value._element.querySelector('.cesium-viewer-animationContainer')
-  if (animationContainer) animationContainer.style.display = 'none'
-  
-  const timelineContainer = viewer.value._element.querySelector('.cesium-viewer-timelineContainer')
-  if (timelineContainer) timelineContainer.style.display = 'none'
-
-  try {
-    // 加载流域边界GeoJSON
-    const response = await fetch('/Heilin.geojson')
-    const geojson = await response.json()
-    
-    const dataSource = await Cesium.GeoJsonDataSource.load(geojson, {
-      stroke: Cesium.Color.fromCssColorString('#00d5ff'),
-      strokeWidth: 3,
-      fill: Cesium.Color.fromCssColorString('#00d5ff').withAlpha(0.1)
-    })
-    
-    viewer.value.dataSources.add(dataSource)
-    
-    // 加载水系GeoJSON
-    try {
-      const waterResponse = await fetch('/黑林水系.geojson')
-      const waterGeojson = await waterResponse.json()
-      
-      const waterDataSource = await Cesium.GeoJsonDataSource.load(waterGeojson, {
-        stroke: Cesium.Color.fromCssColorString('#62f6fb'),
-        strokeWidth: 2,
-        fill: Cesium.Color.fromCssColorString('#62f6fb').withAlpha(0.2)
-      })
-      
-      viewer.value.dataSources.add(waterDataSource)
-    } catch (waterError) {
-      console.error('加载水系GeoJSON失败:', waterError)
-    }
-    
-    // 加载小塔山水库GeoJSON
-    try {
-      const reservoirResponse = await fetch('/小塔山水库.geojson')
-      const reservoirGeojson = await reservoirResponse.json()
-      
-      const reservoirDataSource = await Cesium.GeoJsonDataSource.load(reservoirGeojson, {
-        stroke: Cesium.Color.fromCssColorString('#00d4ff'),
-        strokeWidth: 2,
-        fill: Cesium.Color.fromCssColorString('#00d4ff').withAlpha(0.3)
-      })
-      
-      viewer.value.dataSources.add(reservoirDataSource)
-    } catch (reservoirError) {
-      console.error('加载小塔山水库GeoJSON失败:', reservoirError)
-    }
-    
-    const entities = dataSource.entities.values
-    if (entities.length > 0) {
-      let minLat = 90, maxLat = -90, minLon = 180, maxLon = -180
-      
-      for (const entity of entities) {
-        if (entity.polygon && entity.polygon.hierarchy) {
-          const hierarchy = entity.polygon.hierarchy.getValue()
-          const positions = hierarchy.positions
-          
-          for (const pos of positions) {
-            const cartographic = Cesium.Cartographic.fromCartesian(pos)
-            const lat = Cesium.Math.toDegrees(cartographic.latitude)
-            const lon = Cesium.Math.toDegrees(cartographic.longitude)
-            
-            minLat = Math.min(minLat, lat)
-            maxLat = Math.max(maxLat, lat)
-            minLon = Math.min(minLon, lon)
-            maxLon = Math.max(maxLon, lon)
-          }
-        }
-      }
-      
-      viewer.value.camera.flyTo({
-        destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
-        duration: 0
-      })
-    }
-  } catch (error) {
-    console.error('加载GeoJSON失败:', error)
-    viewer.value.camera.flyTo({
-        destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
-        duration: 0
-      })
-  }
-
-  addPoiMarker()
-})
-
-onUnmounted(() => {
-  if (blinkInterval) {
-    clearInterval(blinkInterval)
-  }
-  if (viewer.value) {
-    viewer.value.destroy()
-  }
-})
-</script>
-
-<style scoped>
-.poi-popup {
-  position: fixed;
-  width: 240px;
-  background: rgba(0, 20, 40, 0.95);
-  border: 1px solid rgba(0, 213, 255, 0.6);
-  border-radius: 8px;
-  box-shadow: 0 0 20px rgba(0, 213, 255, 0.4);
-  z-index: 10;
-  pointer-events: auto;
-  overflow: hidden;
-}
-
-.popup-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 15px;
-  background: linear-gradient(90deg, rgba(0, 60, 120, 0.9), rgba(0, 100, 150, 0.7));
-  border-bottom: 1px solid rgba(0, 213, 255, 0.4);
-}
-
-.popup-title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #00ffff;
-  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
-}
-
-.popup-detail {
-  font-size: 12px;
-  color: #62f6fb;
-  text-decoration: none;
-  margin-left: 8px;
-  cursor: pointer;
-  transition: color 0.3s;
-}
-
-.popup-detail:hover {
-  color: #ffffff;
-  text-decoration: underline;
-}
-
-.popup-close {
-  background: none;
-  border: none;
-  color: #7bbef6;
-  font-size: 20px;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-  transition: color 0.3s;
-}
-
-.popup-close:hover {
-  color: #ffffff;
-}
-
-.popup-content {
-  padding: 15px;
-}
-
-.popup-section {
-  margin-bottom: 15px;
-}
-
-.popup-section:last-child {
-  margin-bottom: 0;
-}
-
-.popup-label {
-  font-size: 14px;
-  font-weight: bold;
-  color: #62f6fb;
-  margin-bottom: 8px;
-  text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
-}
-
-.popup-value {
-  font-size: 13px;
-  color: #e0fcff;
-  margin-bottom: 5px;
-  line-height: 1.5;
-}
-</style>

src/components/CesiumMap_LOCAL_758.vue

@@ -1,455 +0,0 @@
-<template>
-  <div id="cesiumContainer" class="cesium-ignore-autofit" style="width: 100%; height: 100%; position: relative; z-index: 1; transform: none !important; zoom: 1 !important;"></div>
-  
-  <!-- POI详情弹窗 -->
-  <div v-if="showPopup" class="poi-popup" :style="popupStyle">
-    <div class="popup-header">
-      <span class="popup-title">{{ poiData.name }} <a href="#" class="popup-detail" @click.prevent="goToTwinStation">详情</a></span>
-      <button class="popup-close" @click="closePopup">×</button>
-    </div>
-    <div class="popup-content">
-      <div class="popup-section">
-        <div class="popup-label">实时数据</div>
-        <div class="popup-value">水位: {{ poiData.waterLevel }}m</div>
-        <div class="popup-value">流量: {{ poiData.flow }}m³/s</div>
-        <div class="popup-value">降雨量: {{ poiData.rainfall }}mm/h</div>
-      </div>
-      <div class="popup-section">
-        <div class="popup-label">历史同期值</div>
-        <div class="popup-value">水位: {{ poiData.historyWaterLevel }}m</div>
-        <div class="popup-value">流量: {{ poiData.historyFlow }}m³/s</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import * as Cesium from 'cesium'
-import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'
-
-export default {
-  name: 'CesiumMap',
-  props: {
-    simulationTime: {
-      type: Number,
-      default: 0
-    },
-    simulationData: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      viewer: null,
-      showPopup: false,
-      popupPosition: { x: 0, y: 0 },
-      poiData: {
-        name: '黑林水文站',
-        waterLevel: '3.25',
-        flow: '12.5',
-        rainfall: '0.5',
-        historyWaterLevel: '3.10',
-        historyFlow: '11.8',
-        device: 'HL-Sensor-001'
-      },
-      blinkInterval: null,
-      heilinEntity: null,
-      reservoirEntity: null
-    }
-  },
-  computed: {
-    popupStyle() {
-      return {
-        left: this.popupPosition.x + 'px',
-        top: this.popupPosition.y + 'px'
-      }
-    }
-  },
-  watch: {
-    simulationData: {
-      handler(newData) {
-        this.$nextTick(() => {
-          this.updateMapMarkers(newData)
-        })
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  methods: {
-    addPoiMarker() {
-      const heilinPosition = Cesium.Cartesian3.fromDegrees(118.8770798, 35.0320627)
-      
-      const clickEntity = this.viewer.entities.add({
-        id: 'heilin-station-click',
-        position: heilinPosition,
-        point: {
-          pixelSize: 30,
-          color: Cesium.Color.TRANSPARENT,
-          outlineColor: Cesium.Color.TRANSPARENT,
-          outlineWidth: 0
-        }
-      })
-      
-      this.heilinEntity = this.viewer.entities.add({
-        id: 'heilin-station',
-        position: heilinPosition,
-        billboard: {
-          image: '/src/assets/images/水文站.png',
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-          pixelOffset: new Cesium.Cartesian2(0, -15),
-          scale: 0.8,
-          width: 30,
-          height: 37.5,
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        },
-        label: {
-          text: `水位 ${this.simulationData.heilinStation?.waterLevel || '3.25'}m\n流量 ${this.simulationData.heilinStation?.flow || '12.5'}m³/s\n降雨量 ${this.simulationData.heilinStation?.rainfall || '0.5'}mm/h`,
-          font: 'bold 14px 黑体',
-          fillColor: Cesium.Color.WHITE,
-          outlineColor: Cesium.Color.fromCssColorString('#003860'),
-          outlineWidth: 2,
-          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-          pixelOffset: new Cesium.Cartesian2(0, -30),
-          showBackground: true,
-          backgroundColor: new Cesium.Color(0, 0.3, 0.5, 0.7),
-          backgroundPadding: new Cesium.Cartesian2(8, 4),
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        }
-      })
-      
-      this.viewer.entities.add({
-        id: 'heilin-station-title',
-        position: heilinPosition,
-        label: {
-          text: '黑林水文站',
-          font: 'bold 14px sans-serif',
-          fillColor: Cesium.Color.WHITE,
-          outlineColor: Cesium.Color.fromCssColorString('#003860'),
-          outlineWidth: 2,
-          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-          pixelOffset: new Cesium.Cartesian2(0, -85),
-          showBackground: true,
-          backgroundColor: new Cesium.Color(0, 0.2, 0.4, 0.9),
-          backgroundPadding: new Cesium.Cartesian2(22, 4),
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        }
-      })
-
-      const reservoirPosition = Cesium.Cartesian3.fromDegrees(118.9540555, 34.9355329)
-      
-      this.reservoirEntity = this.viewer.entities.add({
-        id: 'tashan-reservoir',
-        position: reservoirPosition,
-        billboard: {
-          image: '/src/assets/images/水库蓝.png',
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-          pixelOffset: new Cesium.Cartesian2(0, -15),
-          scale: 0.8,
-          width: 30,
-          height: 30,
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        },
-        label: {
-          text: `库水位 ${this.simulationData.reservoir?.waterLevel || '18.5'}m\n库容 ${this.simulationData.reservoir?.storage || '2350.8'}万m³\n汛限 20.0m`,
-          font: 'bold 14px 黑体',
-          fillColor: Cesium.Color.WHITE,
-          outlineColor: Cesium.Color.fromCssColorString('#003860'),
-          outlineWidth: 2,
-          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-          pixelOffset: new Cesium.Cartesian2(0, -30),
-          showBackground: true,
-          backgroundColor: new Cesium.Color(0, 0.3, 0.5, 0.7),
-          backgroundPadding: new Cesium.Cartesian2(8, 4),
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        }
-      })
-      
-      this.viewer.entities.add({
-        id: 'tashan-reservoir-title',
-        position: reservoirPosition,
-        label: {
-          text: '小塔山水库',
-          font: 'bold 14px sans-serif',
-          fillColor: Cesium.Color.WHITE,
-          outlineColor: Cesium.Color.fromCssColorString('#003860'),
-          outlineWidth: 2,
-          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-          pixelOffset: new Cesium.Cartesian2(0, -85),
-          showBackground: true,
-          backgroundColor: new Cesium.Color(0, 0.2, 0.4, 0.9),
-          backgroundPadding: new Cesium.Cartesian2(22, 4),
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        }
-      })
-
-      const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
-      
-      handler.setInputAction((movement) => {
-        const pickedObjects = this.viewer.scene.drillPick(movement.position)
-        for (let i = 0; i < pickedObjects.length; i++) {
-          const pickedObj = pickedObjects[i]
-          if (Cesium.defined(pickedObj) && pickedObj.id) {
-            if (pickedObj.id.id === 'heilin-station' || pickedObj.id.id === 'heilin-station-click') {
-              this.showPopup = true
-              this.popupPosition = { x: movement.position.x - 120, y: movement.position.y - 150 }
-              break
-            }
-          }
-        }
-      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
-    },
-    updateMapMarkers(data) {
-      if (!data) return
-      
-      if (this.heilinEntity && data.heilinStation) {
-        const waterLevel = data.heilinStation.waterLevel || '3.25'
-        const flow = data.heilinStation.flow || '12.5'
-        const rainfall = data.heilinStation.rainfall || '0.5'
-        
-        this.heilinEntity.label.text = `水位 ${waterLevel}m\n流量 ${flow}m³/s\n降雨量 ${rainfall}mm/h`
-        this.poiData.waterLevel = waterLevel
-        this.poiData.flow = flow
-        this.poiData.rainfall = rainfall
-      }
-      
-      if (this.reservoirEntity && data.reservoir) {
-        const waterLevel = data.reservoir.waterLevel || '18.5'
-        const storage = data.reservoir.storage || '2350.8'
-        
-        this.reservoirEntity.label.text = `库水位 ${waterLevel}m\n库容 ${storage}万m³\n汛限 20.0m`
-      }
-    },
-    closePopup() {
-      this.showPopup = false
-    },
-    goToTwinStation() {
-      const heilinPosition = Cesium.Cartesian3.fromDegrees(118.8770798, 35.0320627, 10000)
-      this.viewer.camera.flyTo({
-        destination: heilinPosition,
-        duration: 2.0,
-        easingFunction: Cesium.EasingFunction.SINE_IN_OUT
-      })
-      this.closePopup()
-    }
-  },
-  async mounted() {
-    this.viewer = new Cesium.Viewer('cesiumContainer', {
-      terrainProvider: await Cesium.createWorldTerrainAsync(),
-      animation: false,
-      baseLayerPicker: false,
-      fullscreenButton: false,
-      geocoder: false,
-      homeButton: false,
-      infoBox: false,
-      sceneModePicker: false,
-      selectionIndicator: false,
-      timeline: false,
-      navigationHelpButton: false,
-      navigationInstructionsInitiallyVisible: false,
-      shouldAnimate: false,
-      showRenderLoopErrors: false
-    })
-    
-    if (this.viewer.cesiumWidget.creditContainer) {
-      this.viewer.cesiumWidget.creditContainer.style.display = 'none'
-    }
-    
-    const toolbar = this.viewer._element.querySelector('.cesium-viewer-toolbar')
-    if (toolbar) toolbar.style.display = 'none'
-    
-    const animationContainer = this.viewer._element.querySelector('.cesium-viewer-animationContainer')
-    if (animationContainer) animationContainer.style.display = 'none'
-    
-    const timelineContainer = this.viewer._element.querySelector('.cesium-viewer-timelineContainer')
-    if (timelineContainer) timelineContainer.style.display = 'none'
-
-    try {
-      const response = await fetch('/Heilin.geojson')
-      const geojson = await response.json()
-      
-      const dataSource = await Cesium.GeoJsonDataSource.load(geojson, {
-        stroke: Cesium.Color.fromCssColorString('#00d5ff'),
-        strokeWidth: 3,
-        fill: Cesium.Color.fromCssColorString('#00d5ff').withAlpha(0.1)
-      })
-      
-      this.viewer.dataSources.add(dataSource)
-      
-      try {
-        const waterResponse = await fetch('/黑林水系.geojson')
-        const waterGeojson = await waterResponse.json()
-        
-        const waterDataSource = await Cesium.GeoJsonDataSource.load(waterGeojson, {
-          stroke: Cesium.Color.fromCssColorString('#62f6fb'),
-          strokeWidth: 2,
-          fill: Cesium.Color.fromCssColorString('#62f6fb').withAlpha(0.2)
-        })
-        
-        this.viewer.dataSources.add(waterDataSource)
-      } catch (waterError) {
-        console.error('加载水系GeoJSON失败:', waterError)
-      }
-      
-      try {
-        const reservoirResponse = await fetch('/小塔山水库.geojson')
-        const reservoirGeojson = await reservoirResponse.json()
-        
-        const reservoirDataSource = await Cesium.GeoJsonDataSource.load(reservoirGeojson, {
-          stroke: Cesium.Color.fromCssColorString('#00d4ff'),
-          strokeWidth: 2,
-          fill: Cesium.Color.fromCssColorString('#00d4ff').withAlpha(0.3)
-        })
-        
-        this.viewer.dataSources.add(reservoirDataSource)
-      } catch (reservoirError) {
-        console.error('加载小塔山水库GeoJSON失败:', reservoirError)
-      }
-      
-      const entities = dataSource.entities.values
-      if (entities.length > 0) {
-        let minLat = 90, maxLat = -90, minLon = 180, maxLon = -180
-        
-        for (const entity of entities) {
-          if (entity.polygon && entity.polygon.hierarchy) {
-            const hierarchy = entity.polygon.hierarchy.getValue()
-            const positions = hierarchy.positions
-            
-            for (const pos of positions) {
-              const cartographic = Cesium.Cartographic.fromCartesian(pos)
-              const lat = Cesium.Math.toDegrees(cartographic.latitude)
-              const lon = Cesium.Math.toDegrees(cartographic.longitude)
-              
-              minLat = Math.min(minLat, lat)
-              maxLat = Math.max(maxLat, lat)
-              minLon = Math.min(minLon, lon)
-              maxLon = Math.max(maxLon, lon)
-            }
-          }
-        }
-        
-        this.viewer.camera.flyTo({
-          destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
-          duration: 0
-        })
-      }
-    } catch (error) {
-      console.error('加载GeoJSON失败:', error)
-      this.viewer.camera.flyTo({
-          destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
-          duration: 0
-        })
-    }
-
-    this.addPoiMarker()
-    this.$nextTick(() => {
-      this.updateMapMarkers(this.simulationData)
-    })
-  },
-  beforeUnmount() {
-    if (this.blinkInterval) {
-      clearInterval(this.blinkInterval)
-    }
-    if (this.viewer) {
-      this.viewer.destroy()
-    }
-  }
-}
-</script>
-
-<style scoped>
-.poi-popup {
-  position: fixed;
-  width: 240px;
-  background: rgba(0, 20, 40, 0.95);
-  border: 1px solid rgba(0, 213, 255, 0.6);
-  border-radius: 8px;
-  box-shadow: 0 0 20px rgba(0, 213, 255, 0.4);
-  z-index: 10;
-  pointer-events: auto;
-  overflow: hidden;
-}
-
-.popup-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 15px;
-  background: linear-gradient(90deg, rgba(0, 60, 120, 0.9), rgba(0, 100, 150, 0.7));
-  border-bottom: 1px solid rgba(0, 213, 255, 0.4);
-}
-
-.popup-title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #00ffff;
-  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
-}
-
-.popup-detail {
-  font-size: 12px;
-  color: #62f6fb;
-  text-decoration: none;
-  margin-left: 8px;
-  cursor: pointer;
-  transition: color 0.3s;
-}
-
-.popup-detail:hover {
-  color: #ffffff;
-  text-decoration: underline;
-}
-
-.popup-close {
-  background: none;
-  border: none;
-  color: #7bbef6;
-  font-size: 20px;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-  transition: color 0.3s;
-}
-
-.popup-close:hover {
-  color: #ffffff;
-}
-
-.popup-content {
-  padding: 15px;
-}
-
-.popup-section {
-  margin-bottom: 15px;
-}
-
-.popup-section:last-child {
-  margin-bottom: 0;
-}
-
-.popup-label {
-  font-size: 14px;
-  font-weight: bold;
-  color: #62f6fb;
-  margin-bottom: 8px;
-  text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
-}
-
-.popup-value {
-  font-size: 13px;
-  color: #e0fcff;
-  margin-bottom: 5px;
-  line-height: 1.5;
-}
-</style>

src/components/CesiumMap_LOCAL_843.vue

@@ -1,455 +0,0 @@
-<template>
-  <div id="cesiumContainer" class="cesium-ignore-autofit" style="width: 100%; height: 100%; position: relative; z-index: 1; transform: none !important; zoom: 1 !important;"></div>
-  
-  <!-- POI详情弹窗 -->
-  <div v-if="showPopup" class="poi-popup" :style="popupStyle">
-    <div class="popup-header">
-      <span class="popup-title">{{ poiData.name }} <a href="#" class="popup-detail" @click.prevent="goToTwinStation">详情</a></span>
-      <button class="popup-close" @click="closePopup">×</button>
-    </div>
-    <div class="popup-content">
-      <div class="popup-section">
-        <div class="popup-label">实时数据</div>
-        <div class="popup-value">水位: {{ poiData.waterLevel }}m</div>
-        <div class="popup-value">流量: {{ poiData.flow }}m³/s</div>
-        <div class="popup-value">降雨量: {{ poiData.rainfall }}mm/h</div>
-      </div>
-      <div class="popup-section">
-        <div class="popup-label">历史同期值</div>
-        <div class="popup-value">水位: {{ poiData.historyWaterLevel }}m</div>
-        <div class="popup-value">流量: {{ poiData.historyFlow }}m³/s</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import * as Cesium from 'cesium'
-import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'
-
-export default {
-  name: 'CesiumMap',
-  props: {
-    simulationTime: {
-      type: Number,
-      default: 0
-    },
-    simulationData: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      viewer: null,
-      showPopup: false,
-      popupPosition: { x: 0, y: 0 },
-      poiData: {
-        name: '黑林水文站',
-        waterLevel: '3.25',
-        flow: '12.5',
-        rainfall: '0.5',
-        historyWaterLevel: '3.10',
-        historyFlow: '11.8',
-        device: 'HL-Sensor-001'
-      },
-      blinkInterval: null,
-      heilinEntity: null,
-      reservoirEntity: null
-    }
-  },
-  computed: {
-    popupStyle() {
-      return {
-        left: this.popupPosition.x + 'px',
-        top: this.popupPosition.y + 'px'
-      }
-    }
-  },
-  watch: {
-    simulationData: {
-      handler(newData) {
-        this.$nextTick(() => {
-          this.updateMapMarkers(newData)
-        })
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  methods: {
-    addPoiMarker() {
-      const heilinPosition = Cesium.Cartesian3.fromDegrees(118.8770798, 35.0320627)
-      
-      const clickEntity = this.viewer.entities.add({
-        id: 'heilin-station-click',
-        position: heilinPosition,
-        point: {
-          pixelSize: 30,
-          color: Cesium.Color.TRANSPARENT,
-          outlineColor: Cesium.Color.TRANSPARENT,
-          outlineWidth: 0
-        }
-      })
-      
-      this.heilinEntity = this.viewer.entities.add({
-        id: 'heilin-station',
-        position: heilinPosition,
-        billboard: {
-          image: '/src/assets/images/水文站.png',
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-          pixelOffset: new Cesium.Cartesian2(0, -15),
-          scale: 0.8,
-          width: 30,
-          height: 37.5,
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        },
-        label: {
-          text: `水位 ${this.simulationData.heilinStation?.waterLevel || '3.25'}m\n流量 ${this.simulationData.heilinStation?.flow || '12.5'}m³/s\n降雨量 ${this.simulationData.heilinStation?.rainfall || '0.5'}mm/h`,
-          font: 'bold 14px 黑体',
-          fillColor: Cesium.Color.WHITE,
-          outlineColor: Cesium.Color.fromCssColorString('#003860'),
-          outlineWidth: 2,
-          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-          pixelOffset: new Cesium.Cartesian2(0, -30),
-          showBackground: true,
-          backgroundColor: new Cesium.Color(0, 0.3, 0.5, 0.7),
-          backgroundPadding: new Cesium.Cartesian2(8, 4),
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        }
-      })
-      
-      this.viewer.entities.add({
-        id: 'heilin-station-title',
-        position: heilinPosition,
-        label: {
-          text: '黑林水文站',
-          font: 'bold 14px sans-serif',
-          fillColor: Cesium.Color.WHITE,
-          outlineColor: Cesium.Color.fromCssColorString('#003860'),
-          outlineWidth: 2,
-          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-          pixelOffset: new Cesium.Cartesian2(0, -85),
-          showBackground: true,
-          backgroundColor: new Cesium.Color(0, 0.2, 0.4, 0.9),
-          backgroundPadding: new Cesium.Cartesian2(22, 4),
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        }
-      })
-
-      const reservoirPosition = Cesium.Cartesian3.fromDegrees(118.9540555, 34.9355329)
-      
-      this.reservoirEntity = this.viewer.entities.add({
-        id: 'tashan-reservoir',
-        position: reservoirPosition,
-        billboard: {
-          image: '/src/assets/images/水库蓝.png',
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-          pixelOffset: new Cesium.Cartesian2(0, -15),
-          scale: 0.8,
-          width: 30,
-          height: 30,
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        },
-        label: {
-          text: `库水位 ${this.simulationData.reservoir?.waterLevel || '18.5'}m\n库容 ${this.simulationData.reservoir?.storage || '2350.8'}万m³\n汛限 20.0m`,
-          font: 'bold 14px 黑体',
-          fillColor: Cesium.Color.WHITE,
-          outlineColor: Cesium.Color.fromCssColorString('#003860'),
-          outlineWidth: 2,
-          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-          pixelOffset: new Cesium.Cartesian2(0, -30),
-          showBackground: true,
-          backgroundColor: new Cesium.Color(0, 0.3, 0.5, 0.7),
-          backgroundPadding: new Cesium.Cartesian2(8, 4),
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        }
-      })
-      
-      this.viewer.entities.add({
-        id: 'tashan-reservoir-title',
-        position: reservoirPosition,
-        label: {
-          text: '小塔山水库',
-          font: 'bold 14px sans-serif',
-          fillColor: Cesium.Color.WHITE,
-          outlineColor: Cesium.Color.fromCssColorString('#003860'),
-          outlineWidth: 2,
-          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-          pixelOffset: new Cesium.Cartesian2(0, -85),
-          showBackground: true,
-          backgroundColor: new Cesium.Color(0, 0.2, 0.4, 0.9),
-          backgroundPadding: new Cesium.Cartesian2(22, 4),
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
-        }
-      })
-
-      const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
-      
-      handler.setInputAction((movement) => {
-        const pickedObjects = this.viewer.scene.drillPick(movement.position)
-        for (let i = 0; i < pickedObjects.length; i++) {
-          const pickedObj = pickedObjects[i]
-          if (Cesium.defined(pickedObj) && pickedObj.id) {
-            if (pickedObj.id.id === 'heilin-station' || pickedObj.id.id === 'heilin-station-click') {
-              this.showPopup = true
-              this.popupPosition = { x: movement.position.x - 120, y: movement.position.y - 150 }
-              break
-            }
-          }
-        }
-      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
-    },
-    updateMapMarkers(data) {
-      if (!data) return
-      
-      if (this.heilinEntity && data.heilinStation) {
-        const waterLevel = data.heilinStation.waterLevel || '3.25'
-        const flow = data.heilinStation.flow || '12.5'
-        const rainfall = data.heilinStation.rainfall || '0.5'
-        
-        this.heilinEntity.label.text = `水位 ${waterLevel}m\n流量 ${flow}m³/s\n降雨量 ${rainfall}mm/h`
-        this.poiData.waterLevel = waterLevel
-        this.poiData.flow = flow
-        this.poiData.rainfall = rainfall
-      }
-      
-      if (this.reservoirEntity && data.reservoir) {
-        const waterLevel = data.reservoir.waterLevel || '18.5'
-        const storage = data.reservoir.storage || '2350.8'
-        
-        this.reservoirEntity.label.text = `库水位 ${waterLevel}m\n库容 ${storage}万m³\n汛限 20.0m`
-      }
-    },
-    closePopup() {
-      this.showPopup = false
-    },
-    goToTwinStation() {
-      const heilinPosition = Cesium.Cartesian3.fromDegrees(118.8770798, 35.0320627, 10000)
-      this.viewer.camera.flyTo({
-        destination: heilinPosition,
-        duration: 2.0,
-        easingFunction: Cesium.EasingFunction.SINE_IN_OUT
-      })
-      this.closePopup()
-    }
-  },
-  async mounted() {
-    this.viewer = new Cesium.Viewer('cesiumContainer', {
-      terrainProvider: await Cesium.createWorldTerrainAsync(),
-      animation: false,
-      baseLayerPicker: false,
-      fullscreenButton: false,
-      geocoder: false,
-      homeButton: false,
-      infoBox: false,
-      sceneModePicker: false,
-      selectionIndicator: false,
-      timeline: false,
-      navigationHelpButton: false,
-      navigationInstructionsInitiallyVisible: false,
-      shouldAnimate: false,
-      showRenderLoopErrors: false
-    })
-    
-    if (this.viewer.cesiumWidget.creditContainer) {
-      this.viewer.cesiumWidget.creditContainer.style.display = 'none'
-    }
-    
-    const toolbar = this.viewer._element.querySelector('.cesium-viewer-toolbar')
-    if (toolbar) toolbar.style.display = 'none'
-    
-    const animationContainer = this.viewer._element.querySelector('.cesium-viewer-animationContainer')
-    if (animationContainer) animationContainer.style.display = 'none'
-    
-    const timelineContainer = this.viewer._element.querySelector('.cesium-viewer-timelineContainer')
-    if (timelineContainer) timelineContainer.style.display = 'none'
-
-    try {
-      const response = await fetch('/Heilin.geojson')
-      const geojson = await response.json()
-      
-      const dataSource = await Cesium.GeoJsonDataSource.load(geojson, {
-        stroke: Cesium.Color.fromCssColorString('#00d5ff'),
-        strokeWidth: 3,
-        fill: Cesium.Color.fromCssColorString('#00d5ff').withAlpha(0.1)
-      })
-      
-      this.viewer.dataSources.add(dataSource)
-      
-      try {
-        const waterResponse = await fetch('/黑林水系.geojson')
-        const waterGeojson = await waterResponse.json()
-        
-        const waterDataSource = await Cesium.GeoJsonDataSource.load(waterGeojson, {
-          stroke: Cesium.Color.fromCssColorString('#62f6fb'),
-          strokeWidth: 2,
-          fill: Cesium.Color.fromCssColorString('#62f6fb').withAlpha(0.2)
-        })
-        
-        this.viewer.dataSources.add(waterDataSource)
-      } catch (waterError) {
-        console.error('加载水系GeoJSON失败:', waterError)
-      }
-      
-      try {
-        const reservoirResponse = await fetch('/小塔山水库.geojson')
-        const reservoirGeojson = await reservoirResponse.json()
-        
-        const reservoirDataSource = await Cesium.GeoJsonDataSource.load(reservoirGeojson, {
-          stroke: Cesium.Color.fromCssColorString('#00d4ff'),
-          strokeWidth: 2,
-          fill: Cesium.Color.fromCssColorString('#00d4ff').withAlpha(0.3)
-        })
-        
-        this.viewer.dataSources.add(reservoirDataSource)
-      } catch (reservoirError) {
-        console.error('加载小塔山水库GeoJSON失败:', reservoirError)
-      }
-      
-      const entities = dataSource.entities.values
-      if (entities.length > 0) {
-        let minLat = 90, maxLat = -90, minLon = 180, maxLon = -180
-        
-        for (const entity of entities) {
-          if (entity.polygon && entity.polygon.hierarchy) {
-            const hierarchy = entity.polygon.hierarchy.getValue()
-            const positions = hierarchy.positions
-            
-            for (const pos of positions) {
-              const cartographic = Cesium.Cartographic.fromCartesian(pos)
-              const lat = Cesium.Math.toDegrees(cartographic.latitude)
-              const lon = Cesium.Math.toDegrees(cartographic.longitude)
-              
-              minLat = Math.min(minLat, lat)
-              maxLat = Math.max(maxLat, lat)
-              minLon = Math.min(minLon, lon)
-              maxLon = Math.max(maxLon, lon)
-            }
-          }
-        }
-        
-        this.viewer.camera.flyTo({
-          destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
-          duration: 0
-        })
-      }
-    } catch (error) {
-      console.error('加载GeoJSON失败:', error)
-      this.viewer.camera.flyTo({
-          destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
-          duration: 0
-        })
-    }
-
-    this.addPoiMarker()
-    this.$nextTick(() => {
-      this.updateMapMarkers(this.simulationData)
-    })
-  },
-  beforeUnmount() {
-    if (this.blinkInterval) {
-      clearInterval(this.blinkInterval)
-    }
-    if (this.viewer) {
-      this.viewer.destroy()
-    }
-  }
-}
-</script>
-
-<style scoped>
-.poi-popup {
-  position: fixed;
-  width: 240px;
-  background: rgba(0, 20, 40, 0.95);
-  border: 1px solid rgba(0, 213, 255, 0.6);
-  border-radius: 8px;
-  box-shadow: 0 0 20px rgba(0, 213, 255, 0.4);
-  z-index: 10;
-  pointer-events: auto;
-  overflow: hidden;
-}
-
-.popup-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 15px;
-  background: linear-gradient(90deg, rgba(0, 60, 120, 0.9), rgba(0, 100, 150, 0.7));
-  border-bottom: 1px solid rgba(0, 213, 255, 0.4);
-}
-
-.popup-title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #00ffff;
-  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
-}
-
-.popup-detail {
-  font-size: 12px;
-  color: #62f6fb;
-  text-decoration: none;
-  margin-left: 8px;
-  cursor: pointer;
-  transition: color 0.3s;
-}
-
-.popup-detail:hover {
-  color: #ffffff;
-  text-decoration: underline;
-}
-
-.popup-close {
-  background: none;
-  border: none;
-  color: #7bbef6;
-  font-size: 20px;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-  transition: color 0.3s;
-}
-
-.popup-close:hover {
-  color: #ffffff;
-}
-
-.popup-content {
-  padding: 15px;
-}
-
-.popup-section {
-  margin-bottom: 15px;
-}
-
-.popup-section:last-child {
-  margin-bottom: 0;
-}
-
-.popup-label {
-  font-size: 14px;
-  font-weight: bold;
-  color: #62f6fb;
-  margin-bottom: 8px;
-  text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
-}
-
-.popup-value {
-  font-size: 13px;
-  color: #e0fcff;
-  margin-bottom: 5px;
-  line-height: 1.5;
-}
-</style>

src/components/CesiumMap_REMOTE_758.vue

@@ -1,479 +0,0 @@
-<template>
-  <div id="cesiumContainer" class="cesium-ignore-autofit" style="width: 100%; height: 100%; position: relative; z-index: 1; transform: none !important; zoom: 1 !important;"></div>
-  
-  <!-- POI详情弹窗 -->
-  <div v-if="showPopup" class="poi-popup" :style="popupStyle">
-    <div class="popup-header">
-      <span class="popup-title">{{ poiData.name }} <a href="#" class="popup-detail" @click.prevent="goToTwinStation">详情</a></span>
-      <button class="popup-close" @click="closePopup">×</button>
-    </div>
-    <div class="popup-content">
-      <div class="popup-section">
-        <div class="popup-label">实时数据</div>
-        <div class="popup-value">水位: {{ poiData.waterLevel }}m</div>
-        <div class="popup-value">流量: {{ poiData.flow }}m³/s</div>
-        <div class="popup-value">降雨量: {{ poiData.rainfall }}mm/h</div>
-      </div>
-      <div class="popup-section">
-        <div class="popup-label">历史同期值</div>
-        <div class="popup-value">水位: {{ poiData.historyWaterLevel }}m</div>
-        <div class="popup-value">流量: {{ poiData.historyFlow }}m³/s</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted, computed } from 'vue'
-import * as Cesium from 'cesium'
-import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'
-import { useRouter } from 'vue-router'
-
-const emit = defineEmits(['toggleMap'])
-
-const viewer = ref(null)
-const showPopup = ref(false)
-const popupPosition = ref({ x: 0, y: 0 })
-
-const router = useRouter()
-
-const DESIGN_WIDTH = 1920
-const DESIGN_HEIGHT = 1080
-
-const getScaleRatio = () => {
-  return Math.min(window.innerWidth / DESIGN_WIDTH, window.innerHeight / DESIGN_HEIGHT)
-}
-
-const poiData = ref({
-  name: '黑林水文站',
-  waterLevel: '3.25',
-  flow: '12.5',
-  rainfall: '0.5',
-  historyWaterLevel: '3.10',
-  historyFlow: '11.8',
-  device: 'HL-Sensor-001'
-})
-
-const popupStyle = computed(() => {
-  return {
-    left: popupPosition.value.x + 'px',
-    top: popupPosition.value.y + 'px'
-  }
-})
-
-let blinkInterval = null
-
-const addPoiMarker = () => {
-    // 添加黑林水文站POI
-    const heilinPosition = Cesium.Cartesian3.fromDegrees(118.8770798, 35.0320627)
-    
-    // 创建一个不可见的点实体，用于扩大点击区域
-    const clickEntity = viewer.value.entities.add({
-      id: 'heilin-station-click',
-      position: heilinPosition,
-      point: {
-        pixelSize: 30,
-        color: Cesium.Color.TRANSPARENT,
-        outlineColor: Cesium.Color.TRANSPARENT,
-        outlineWidth: 0
-      }
-    })
-    
-    const entity = viewer.value.entities.add({
-      id: 'heilin-station',
-      position: heilinPosition,
-      billboard: {
-        image: '/src/assets/images/水文站.png',
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-        pixelOffset: new Cesium.Cartesian2(0, -15),
-        scale: 0.8,
-        width: 30,
-        height: 37.5,
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      },
-      label: {
-        text: '水位 3.25m\n流量 12.5m³/s\n降雨量 0.5mm/h',
-        font: 'bold 14px 黑体',
-        fillColor: Cesium.Color.WHITE,
-        outlineColor: Cesium.Color.fromCssColorString('#003860'),
-        outlineWidth: 2,
-        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-        pixelOffset: new Cesium.Cartesian2(0, -30),
-        showBackground: true,
-        backgroundColor: new Cesium.Color(0, 0.3, 0.5, 0.7),
-        backgroundPadding: new Cesium.Cartesian2(8, 4),
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      }
-    })
-    
-    // 添加标题标签
-    viewer.value.entities.add({
-      id: 'heilin-station-title',
-      position: heilinPosition,
-      label: {
-        text: '黑林水文站',
-        font: 'bold 14px sans-serif',
-        fillColor: Cesium.Color.WHITE,
-        outlineColor: Cesium.Color.fromCssColorString('#003860'),
-        outlineWidth: 2,
-        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-        pixelOffset: new Cesium.Cartesian2(0, -85),
-        showBackground: true,
-        backgroundColor: new Cesium.Color(0, 0.2, 0.4, 0.9),
-        backgroundPadding: new Cesium.Cartesian2(22, 4),
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      }
-    })
-
-    // 添加塔山小水库POI
-    const reservoirPosition = Cesium.Cartesian3.fromDegrees(118.9540555, 34.9355329)
-    
-    const reservoirEntity = viewer.value.entities.add({
-      id: 'tashan-reservoir',
-      position: reservoirPosition,
-      billboard: {
-        image: '/src/assets/images/水库蓝.png',
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-        pixelOffset: new Cesium.Cartesian2(0, -15),
-        scale: 0.8,
-        width: 30,
-        height: 30,
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      },
-      label: {
-        text: '库水位 18.5m\n库容 2350.8万m³\n汛限 20.0m',
-        font: 'bold 14px 黑体',
-        fillColor: Cesium.Color.WHITE,
-        outlineColor: Cesium.Color.fromCssColorString('#003860'),
-        outlineWidth: 2,
-        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-        pixelOffset: new Cesium.Cartesian2(0, -30),
-        showBackground: true,
-        backgroundColor: new Cesium.Color(0, 0.3, 0.5, 0.7),
-        backgroundPadding: new Cesium.Cartesian2(8, 4),
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      }
-    })
-    
-    // 添加标题标签
-    viewer.value.entities.add({
-      id: 'tashan-reservoir-title',
-      position: reservoirPosition,
-      label: {
-        text: '小塔山水库',
-        font: 'bold 14px sans-serif',
-        fillColor: Cesium.Color.WHITE,
-        outlineColor: Cesium.Color.fromCssColorString('#003860'),
-        outlineWidth: 2,
-        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-        pixelOffset: new Cesium.Cartesian2(0, -85),
-        showBackground: true,
-        backgroundColor: new Cesium.Color(0, 0.2, 0.4, 0.9),
-        backgroundPadding: new Cesium.Cartesian2(22, 4),
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      }
-    })
-
-    const handler = new Cesium.ScreenSpaceEventHandler(viewer.value.scene.canvas)
-    
-    handler.setInputAction((movement) => {
-      const scaleRatio = getScaleRatio()
-      const correctedX = movement.position.x / scaleRatio
-      const correctedY = movement.position.y / scaleRatio
-      
-      const pickedObjects = viewer.value.scene.drillPick(new Cesium.Cartesian2(correctedX, correctedY))
-      for (let i = 0; i < pickedObjects.length; i++) {
-        const pickedObj = pickedObjects[i]
-        if (Cesium.defined(pickedObj) && pickedObj.id) {
-          if (pickedObj.id.id === 'heilin-station' || pickedObj.id.id === 'heilin-station-click') {
-            showPopup.value = true
-            popupPosition.value = { 
-              x: movement.position.x - 120, 
-              y: movement.position.y - 150 
-            }
-            break
-          }
-        }
-      }
-    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
-
-    // 移除闪烁效果
-    entity.billboard.scale = 0.8
-    reservoirEntity.billboard.scale = 0.8
-  }
-
-const createPoiImage = () => {
-  const canvas = document.createElement('canvas')
-  canvas.width = 40
-  canvas.height = 50
-  const ctx = canvas.getContext('2d')
-  
-  ctx.beginPath()
-  ctx.moveTo(20, 0)
-  ctx.lineTo(40, 30)
-  ctx.lineTo(20, 50)
-  ctx.lineTo(0, 30)
-  ctx.closePath()
-  
-  const gradient = ctx.createRadialGradient(20, 25, 5, 20, 25, 25)
-  gradient.addColorStop(0, '#00ffff')
-  gradient.addColorStop(1, '#0066ff')
-  ctx.fillStyle = gradient
-  ctx.fill()
-  
-  ctx.strokeStyle = '#ffffff'
-  ctx.lineWidth = 2
-  ctx.stroke()
-  
-  return canvas
-}
-
-const closePopup = () => {
-  showPopup.value = false
-}
-
-const goToTwinStation = () => {
-  // 执行平滑flyto动画到黑林水文站位置
-  const heilinPosition = Cesium.Cartesian3.fromDegrees(118.8770798, 35.0320627, 10000)
-  viewer.value.camera.flyTo({
-    destination: heilinPosition,
-    duration: 2.0,
-    easingFunction: Cesium.EasingFunction.SINE_IN_OUT
-  })
-  
-  // 延迟跳转到水文站详情页面
-  setTimeout(() => {
-    router.push('/heilin-station')
-  }, 2000)
-  
-  closePopup()
-}
-
-onMounted(async () => {
-  viewer.value = new Cesium.Viewer('cesiumContainer', {
-    terrainProvider: await Cesium.createWorldTerrainAsync(),
-    animation: false,
-    baseLayerPicker: false,
-    fullscreenButton: false,
-    geocoder: false,
-    homeButton: false,
-    infoBox: false,
-    sceneModePicker: false,
-    selectionIndicator: false,
-    timeline: false,
-    navigationHelpButton: false,
-    navigationInstructionsInitiallyVisible: false,
-    shouldAnimate: false,
-    showRenderLoopErrors: false
-  })
-  
-  if (viewer.value.cesiumWidget.creditContainer) {
-    viewer.value.cesiumWidget.creditContainer.style.display = 'none'
-  }
-  
-  const toolbar = viewer.value._element.querySelector('.cesium-viewer-toolbar')
-  if (toolbar) toolbar.style.display = 'none'
-  
-  const animationContainer = viewer.value._element.querySelector('.cesium-viewer-animationContainer')
-  if (animationContainer) animationContainer.style.display = 'none'
-  
-  const timelineContainer = viewer.value._element.querySelector('.cesium-viewer-timelineContainer')
-  if (timelineContainer) timelineContainer.style.display = 'none'
-
-  try {
-    // 加载流域边界GeoJSON
-    const response = await fetch('/Heilin.geojson')
-    const geojson = await response.json()
-    
-    const dataSource = await Cesium.GeoJsonDataSource.load(geojson, {
-      stroke: Cesium.Color.fromCssColorString('#00d5ff'),
-      strokeWidth: 3,
-      fill: Cesium.Color.fromCssColorString('#00d5ff').withAlpha(0.1)
-    })
-    
-    viewer.value.dataSources.add(dataSource)
-    
-    // 加载水系GeoJSON
-    try {
-      const waterResponse = await fetch('/黑林水系.geojson')
-      const waterGeojson = await waterResponse.json()
-      
-      const waterDataSource = await Cesium.GeoJsonDataSource.load(waterGeojson, {
-        stroke: Cesium.Color.fromCssColorString('#62f6fb'),
-        strokeWidth: 2,
-        fill: Cesium.Color.fromCssColorString('#62f6fb').withAlpha(0.2)
-      })
-      
-      viewer.value.dataSources.add(waterDataSource)
-    } catch (waterError) {
-      console.error('加载水系GeoJSON失败:', waterError)
-    }
-    
-    // 加载小塔山水库GeoJSON
-    try {
-      const reservoirResponse = await fetch('/小塔山水库.geojson')
-      const reservoirGeojson = await reservoirResponse.json()
-      
-      const reservoirDataSource = await Cesium.GeoJsonDataSource.load(reservoirGeojson, {
-        stroke: Cesium.Color.fromCssColorString('#00d4ff'),
-        strokeWidth: 2,
-        fill: Cesium.Color.fromCssColorString('#00d4ff').withAlpha(0.3)
-      })
-      
-      viewer.value.dataSources.add(reservoirDataSource)
-    } catch (reservoirError) {
-      console.error('加载小塔山水库GeoJSON失败:', reservoirError)
-    }
-    
-    const entities = dataSource.entities.values
-    if (entities.length > 0) {
-      let minLat = 90, maxLat = -90, minLon = 180, maxLon = -180
-      
-      for (const entity of entities) {
-        if (entity.polygon && entity.polygon.hierarchy) {
-          const hierarchy = entity.polygon.hierarchy.getValue()
-          const positions = hierarchy.positions
-          
-          for (const pos of positions) {
-            const cartographic = Cesium.Cartographic.fromCartesian(pos)
-            const lat = Cesium.Math.toDegrees(cartographic.latitude)
-            const lon = Cesium.Math.toDegrees(cartographic.longitude)
-            
-            minLat = Math.min(minLat, lat)
-            maxLat = Math.max(maxLat, lat)
-            minLon = Math.min(minLon, lon)
-            maxLon = Math.max(maxLon, lon)
-          }
-        }
-      }
-      
-      viewer.value.camera.flyTo({
-        destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
-        duration: 0
-      })
-    }
-  } catch (error) {
-    console.error('加载GeoJSON失败:', error)
-    viewer.value.camera.flyTo({
-        destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
-        duration: 0
-      })
-  }
-
-  addPoiMarker()
-  
-  window.addEventListener('resize', handleResize)
-})
-
-const handleResize = () => {
-  if (viewer.value) {
-    viewer.value.resize()
-  }
-}
-
-onUnmounted(() => {
-  window.removeEventListener('resize', handleResize)
-  if (blinkInterval) {
-    clearInterval(blinkInterval)
-  }
-  if (viewer.value) {
-    viewer.value.destroy()
-  }
-})
-</script>
-
-<style scoped>
-.poi-popup {
-  position: fixed;
-  width: 240px;
-  background: rgba(0, 20, 40, 0.95);
-  border: 1px solid rgba(0, 213, 255, 0.6);
-  border-radius: 8px;
-  box-shadow: 0 0 20px rgba(0, 213, 255, 0.4);
-  z-index: 10;
-  pointer-events: auto;
-  overflow: hidden;
-}
-
-.popup-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 15px;
-  background: linear-gradient(90deg, rgba(0, 60, 120, 0.9), rgba(0, 100, 150, 0.7));
-  border-bottom: 1px solid rgba(0, 213, 255, 0.4);
-}
-
-.popup-title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #00ffff;
-  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
-}
-
-.popup-detail {
-  font-size: 12px;
-  color: #62f6fb;
-  text-decoration: none;
-  margin-left: 8px;
-  cursor: pointer;
-  transition: color 0.3s;
-}
-
-.popup-detail:hover {
-  color: #ffffff;
-  text-decoration: underline;
-}
-
-.popup-close {
-  background: none;
-  border: none;
-  color: #7bbef6;
-  font-size: 20px;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-  transition: color 0.3s;
-}
-
-.popup-close:hover {
-  color: #ffffff;
-}
-
-.popup-content {
-  padding: 15px;
-}
-
-.popup-section {
-  margin-bottom: 15px;
-}
-
-.popup-section:last-child {
-  margin-bottom: 0;
-}
-
-.popup-label {
-  font-size: 14px;
-  font-weight: bold;
-  color: #62f6fb;
-  margin-bottom: 8px;
-  text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
-}
-
-.popup-value {
-  font-size: 13px;
-  color: #e0fcff;
-  margin-bottom: 5px;
-  line-height: 1.5;
-}
-</style>

src/components/CesiumMap_REMOTE_843.vue

@@ -1,479 +0,0 @@
-<template>
-  <div id="cesiumContainer" class="cesium-ignore-autofit" style="width: 100%; height: 100%; position: relative; z-index: 1; transform: none !important; zoom: 1 !important;"></div>
-  
-  <!-- POI详情弹窗 -->
-  <div v-if="showPopup" class="poi-popup" :style="popupStyle">
-    <div class="popup-header">
-      <span class="popup-title">{{ poiData.name }} <a href="#" class="popup-detail" @click.prevent="goToTwinStation">详情</a></span>
-      <button class="popup-close" @click="closePopup">×</button>
-    </div>
-    <div class="popup-content">
-      <div class="popup-section">
-        <div class="popup-label">实时数据</div>
-        <div class="popup-value">水位: {{ poiData.waterLevel }}m</div>
-        <div class="popup-value">流量: {{ poiData.flow }}m³/s</div>
-        <div class="popup-value">降雨量: {{ poiData.rainfall }}mm/h</div>
-      </div>
-      <div class="popup-section">
-        <div class="popup-label">历史同期值</div>
-        <div class="popup-value">水位: {{ poiData.historyWaterLevel }}m</div>
-        <div class="popup-value">流量: {{ poiData.historyFlow }}m³/s</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted, computed } from 'vue'
-import * as Cesium from 'cesium'
-import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'
-import { useRouter } from 'vue-router'
-
-const emit = defineEmits(['toggleMap'])
-
-const viewer = ref(null)
-const showPopup = ref(false)
-const popupPosition = ref({ x: 0, y: 0 })
-
-const router = useRouter()
-
-const DESIGN_WIDTH = 1920
-const DESIGN_HEIGHT = 1080
-
-const getScaleRatio = () => {
-  return Math.min(window.innerWidth / DESIGN_WIDTH, window.innerHeight / DESIGN_HEIGHT)
-}
-
-const poiData = ref({
-  name: '黑林水文站',
-  waterLevel: '3.25',
-  flow: '12.5',
-  rainfall: '0.5',
-  historyWaterLevel: '3.10',
-  historyFlow: '11.8',
-  device: 'HL-Sensor-001'
-})
-
-const popupStyle = computed(() => {
-  return {
-    left: popupPosition.value.x + 'px',
-    top: popupPosition.value.y + 'px'
-  }
-})
-
-let blinkInterval = null
-
-const addPoiMarker = () => {
-    // 添加黑林水文站POI
-    const heilinPosition = Cesium.Cartesian3.fromDegrees(118.8770798, 35.0320627)
-    
-    // 创建一个不可见的点实体，用于扩大点击区域
-    const clickEntity = viewer.value.entities.add({
-      id: 'heilin-station-click',
-      position: heilinPosition,
-      point: {
-        pixelSize: 30,
-        color: Cesium.Color.TRANSPARENT,
-        outlineColor: Cesium.Color.TRANSPARENT,
-        outlineWidth: 0
-      }
-    })
-    
-    const entity = viewer.value.entities.add({
-      id: 'heilin-station',
-      position: heilinPosition,
-      billboard: {
-        image: '/src/assets/images/水文站.png',
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-        pixelOffset: new Cesium.Cartesian2(0, -15),
-        scale: 0.8,
-        width: 30,
-        height: 37.5,
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      },
-      label: {
-        text: '水位 3.25m\n流量 12.5m³/s\n降雨量 0.5mm/h',
-        font: 'bold 14px 黑体',
-        fillColor: Cesium.Color.WHITE,
-        outlineColor: Cesium.Color.fromCssColorString('#003860'),
-        outlineWidth: 2,
-        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-        pixelOffset: new Cesium.Cartesian2(0, -30),
-        showBackground: true,
-        backgroundColor: new Cesium.Color(0, 0.3, 0.5, 0.7),
-        backgroundPadding: new Cesium.Cartesian2(8, 4),
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      }
-    })
-    
-    // 添加标题标签
-    viewer.value.entities.add({
-      id: 'heilin-station-title',
-      position: heilinPosition,
-      label: {
-        text: '黑林水文站',
-        font: 'bold 14px sans-serif',
-        fillColor: Cesium.Color.WHITE,
-        outlineColor: Cesium.Color.fromCssColorString('#003860'),
-        outlineWidth: 2,
-        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-        pixelOffset: new Cesium.Cartesian2(0, -85),
-        showBackground: true,
-        backgroundColor: new Cesium.Color(0, 0.2, 0.4, 0.9),
-        backgroundPadding: new Cesium.Cartesian2(22, 4),
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      }
-    })
-
-    // 添加塔山小水库POI
-    const reservoirPosition = Cesium.Cartesian3.fromDegrees(118.9540555, 34.9355329)
-    
-    const reservoirEntity = viewer.value.entities.add({
-      id: 'tashan-reservoir',
-      position: reservoirPosition,
-      billboard: {
-        image: '/src/assets/images/水库蓝.png',
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-        pixelOffset: new Cesium.Cartesian2(0, -15),
-        scale: 0.8,
-        width: 30,
-        height: 30,
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      },
-      label: {
-        text: '库水位 18.5m\n库容 2350.8万m³\n汛限 20.0m',
-        font: 'bold 14px 黑体',
-        fillColor: Cesium.Color.WHITE,
-        outlineColor: Cesium.Color.fromCssColorString('#003860'),
-        outlineWidth: 2,
-        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-        pixelOffset: new Cesium.Cartesian2(0, -30),
-        showBackground: true,
-        backgroundColor: new Cesium.Color(0, 0.3, 0.5, 0.7),
-        backgroundPadding: new Cesium.Cartesian2(8, 4),
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      }
-    })
-    
-    // 添加标题标签
-    viewer.value.entities.add({
-      id: 'tashan-reservoir-title',
-      position: reservoirPosition,
-      label: {
-        text: '小塔山水库',
-        font: 'bold 14px sans-serif',
-        fillColor: Cesium.Color.WHITE,
-        outlineColor: Cesium.Color.fromCssColorString('#003860'),
-        outlineWidth: 2,
-        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-        pixelOffset: new Cesium.Cartesian2(0, -85),
-        showBackground: true,
-        backgroundColor: new Cesium.Color(0, 0.2, 0.4, 0.9),
-        backgroundPadding: new Cesium.Cartesian2(22, 4),
-        disableDepthTestDistance: Number.POSITIVE_INFINITY
-      }
-    })
-
-    const handler = new Cesium.ScreenSpaceEventHandler(viewer.value.scene.canvas)
-    
-    handler.setInputAction((movement) => {
-      const scaleRatio = getScaleRatio()
-      const correctedX = movement.position.x / scaleRatio
-      const correctedY = movement.position.y / scaleRatio
-      
-      const pickedObjects = viewer.value.scene.drillPick(new Cesium.Cartesian2(correctedX, correctedY))
-      for (let i = 0; i < pickedObjects.length; i++) {
-        const pickedObj = pickedObjects[i]
-        if (Cesium.defined(pickedObj) && pickedObj.id) {
-          if (pickedObj.id.id === 'heilin-station' || pickedObj.id.id === 'heilin-station-click') {
-            showPopup.value = true
-            popupPosition.value = { 
-              x: movement.position.x - 120, 
-              y: movement.position.y - 150 
-            }
-            break
-          }
-        }
-      }
-    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
-
-    // 移除闪烁效果
-    entity.billboard.scale = 0.8
-    reservoirEntity.billboard.scale = 0.8
-  }
-
-const createPoiImage = () => {
-  const canvas = document.createElement('canvas')
-  canvas.width = 40
-  canvas.height = 50
-  const ctx = canvas.getContext('2d')
-  
-  ctx.beginPath()
-  ctx.moveTo(20, 0)
-  ctx.lineTo(40, 30)
-  ctx.lineTo(20, 50)
-  ctx.lineTo(0, 30)
-  ctx.closePath()
-  
-  const gradient = ctx.createRadialGradient(20, 25, 5, 20, 25, 25)
-  gradient.addColorStop(0, '#00ffff')
-  gradient.addColorStop(1, '#0066ff')
-  ctx.fillStyle = gradient
-  ctx.fill()
-  
-  ctx.strokeStyle = '#ffffff'
-  ctx.lineWidth = 2
-  ctx.stroke()
-  
-  return canvas
-}
-
-const closePopup = () => {
-  showPopup.value = false
-}
-
-const goToTwinStation = () => {
-  // 执行平滑flyto动画到黑林水文站位置
-  const heilinPosition = Cesium.Cartesian3.fromDegrees(118.8770798, 35.0320627, 10000)
-  viewer.value.camera.flyTo({
-    destination: heilinPosition,
-    duration: 2.0,
-    easingFunction: Cesium.EasingFunction.SINE_IN_OUT
-  })
-  
-  // 延迟跳转到水文站详情页面
-  setTimeout(() => {
-    router.push('/heilin-station')
-  }, 2000)
-  
-  closePopup()
-}
-
-onMounted(async () => {
-  viewer.value = new Cesium.Viewer('cesiumContainer', {
-    terrainProvider: await Cesium.createWorldTerrainAsync(),
-    animation: false,
-    baseLayerPicker: false,
-    fullscreenButton: false,
-    geocoder: false,
-    homeButton: false,
-    infoBox: false,
-    sceneModePicker: false,
-    selectionIndicator: false,
-    timeline: false,
-    navigationHelpButton: false,
-    navigationInstructionsInitiallyVisible: false,
-    shouldAnimate: false,
-    showRenderLoopErrors: false
-  })
-  
-  if (viewer.value.cesiumWidget.creditContainer) {
-    viewer.value.cesiumWidget.creditContainer.style.display = 'none'
-  }
-  
-  const toolbar = viewer.value._element.querySelector('.cesium-viewer-toolbar')
-  if (toolbar) toolbar.style.display = 'none'
-  
-  const animationContainer = viewer.value._element.querySelector('.cesium-viewer-animationContainer')
-  if (animationContainer) animationContainer.style.display = 'none'
-  
-  const timelineContainer = viewer.value._element.querySelector('.cesium-viewer-timelineContainer')
-  if (timelineContainer) timelineContainer.style.display = 'none'
-
-  try {
-    // 加载流域边界GeoJSON
-    const response = await fetch('/Heilin.geojson')
-    const geojson = await response.json()
-    
-    const dataSource = await Cesium.GeoJsonDataSource.load(geojson, {
-      stroke: Cesium.Color.fromCssColorString('#00d5ff'),
-      strokeWidth: 3,
-      fill: Cesium.Color.fromCssColorString('#00d5ff').withAlpha(0.1)
-    })
-    
-    viewer.value.dataSources.add(dataSource)
-    
-    // 加载水系GeoJSON
-    try {
-      const waterResponse = await fetch('/黑林水系.geojson')
-      const waterGeojson = await waterResponse.json()
-      
-      const waterDataSource = await Cesium.GeoJsonDataSource.load(waterGeojson, {
-        stroke: Cesium.Color.fromCssColorString('#62f6fb'),
-        strokeWidth: 2,
-        fill: Cesium.Color.fromCssColorString('#62f6fb').withAlpha(0.2)
-      })
-      
-      viewer.value.dataSources.add(waterDataSource)
-    } catch (waterError) {
-      console.error('加载水系GeoJSON失败:', waterError)
-    }
-    
-    // 加载小塔山水库GeoJSON
-    try {
-      const reservoirResponse = await fetch('/小塔山水库.geojson')
-      const reservoirGeojson = await reservoirResponse.json()
-      
-      const reservoirDataSource = await Cesium.GeoJsonDataSource.load(reservoirGeojson, {
-        stroke: Cesium.Color.fromCssColorString('#00d4ff'),
-        strokeWidth: 2,
-        fill: Cesium.Color.fromCssColorString('#00d4ff').withAlpha(0.3)
-      })
-      
-      viewer.value.dataSources.add(reservoirDataSource)
-    } catch (reservoirError) {
-      console.error('加载小塔山水库GeoJSON失败:', reservoirError)
-    }
-    
-    const entities = dataSource.entities.values
-    if (entities.length > 0) {
-      let minLat = 90, maxLat = -90, minLon = 180, maxLon = -180
-      
-      for (const entity of entities) {
-        if (entity.polygon && entity.polygon.hierarchy) {
-          const hierarchy = entity.polygon.hierarchy.getValue()
-          const positions = hierarchy.positions
-          
-          for (const pos of positions) {
-            const cartographic = Cesium.Cartographic.fromCartesian(pos)
-            const lat = Cesium.Math.toDegrees(cartographic.latitude)
-            const lon = Cesium.Math.toDegrees(cartographic.longitude)
-            
-            minLat = Math.min(minLat, lat)
-            maxLat = Math.max(maxLat, lat)
-            minLon = Math.min(minLon, lon)
-            maxLon = Math.max(maxLon, lon)
-          }
-        }
-      }
-      
-      viewer.value.camera.flyTo({
-        destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
-        duration: 0
-      })
-    }
-  } catch (error) {
-    console.error('加载GeoJSON失败:', error)
-    viewer.value.camera.flyTo({
-        destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
-        duration: 0
-      })
-  }
-
-  addPoiMarker()
-  
-  window.addEventListener('resize', handleResize)
-})
-
-const handleResize = () => {
-  if (viewer.value) {
-    viewer.value.resize()
-  }
-}
-
-onUnmounted(() => {
-  window.removeEventListener('resize', handleResize)
-  if (blinkInterval) {
-    clearInterval(blinkInterval)
-  }
-  if (viewer.value) {
-    viewer.value.destroy()
-  }
-})
-</script>
-
-<style scoped>
-.poi-popup {
-  position: fixed;
-  width: 240px;
-  background: rgba(0, 20, 40, 0.95);
-  border: 1px solid rgba(0, 213, 255, 0.6);
-  border-radius: 8px;
-  box-shadow: 0 0 20px rgba(0, 213, 255, 0.4);
-  z-index: 10;
-  pointer-events: auto;
-  overflow: hidden;
-}
-
-.popup-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 15px;
-  background: linear-gradient(90deg, rgba(0, 60, 120, 0.9), rgba(0, 100, 150, 0.7));
-  border-bottom: 1px solid rgba(0, 213, 255, 0.4);
-}
-
-.popup-title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #00ffff;
-  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
-}
-
-.popup-detail {
-  font-size: 12px;
-  color: #62f6fb;
-  text-decoration: none;
-  margin-left: 8px;
-  cursor: pointer;
-  transition: color 0.3s;
-}
-
-.popup-detail:hover {
-  color: #ffffff;
-  text-decoration: underline;
-}
-
-.popup-close {
-  background: none;
-  border: none;
-  color: #7bbef6;
-  font-size: 20px;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-  transition: color 0.3s;
-}
-
-.popup-close:hover {
-  color: #ffffff;
-}
-
-.popup-content {
-  padding: 15px;
-}
-
-.popup-section {
-  margin-bottom: 15px;
-}
-
-.popup-section:last-child {
-  margin-bottom: 0;
-}
-
-.popup-label {
-  font-size: 14px;
-  font-weight: bold;
-  color: #62f6fb;
-  margin-bottom: 8px;
-  text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
-}
-
-.popup-value {
-  font-size: 13px;
-  color: #e0fcff;
-  margin-bottom: 5px;
-  line-height: 1.5;
-}
-</style>

src/views/LiangShuiYanView.vue

@@ -1,60 +1,322 @@
 <template>
-    <div class="dashboard">
-        <!-- 背景和基础元素 -->
-        <div class="station-bg"></div>
-
-        <div class="bottom-bg"></div>
-        <div class="top-title"></div>
-        <div class="system-title">数字孪生黑林小流域</div>
-
-        <!-- 顶部按钮 -->
-        <div class="sub-title left-1" @click="goBack">
-            首页
+  <div class="dashboard">
+    <div class="station-bg"></div>
+    <div class="bottom-bg"></div>
+    <div class="top-title"></div>
+    <div class="system-title">数字孪生黑林小流域</div>
+    <div class="sub-title left-1" @click="goBack">
+      首页
+    </div>
+    <div class="sub-title left-2" @click="showDetailModal = true">
+      测站详情
+    </div>
+    <div class="sub-title right-2" @click="goToSimulation">
+      测控平台
+    </div>
+    <div class="sub-title right-3" @click="showDetailModal = true">
+      更多
+    </div>
+    <div class="main-content">
+      <div class="left-sidebar">
+        <div class="left-container">
+          <div class="data-card station-intro">
+            <div class="panel-header">
+              <h3>水文站介绍</h3>
+              <span class="more-btn" @click="showDetailModal = true">更多</span>
+            </div>
+            <div class="panel-content">
+              <div class="image-section">
+                <div class="thumbnail-list">
+                  <img src="/src/assets/images/Heilin/图2.jpeg" alt="水文站图片2" @click="changeMainImage('/src/assets/images/Heilin/图2.jpeg')" />
+                  <img src="/src/assets/images/Heilin/图3.jpeg" alt="水文站图片3" @click="changeMainImage('/src/assets/images/Heilin/图3.jpeg')" />
+                  <img src="/src/assets/images/Heilin/图4.jpeg" alt="水文站图片4" @click="changeMainImage('/src/assets/images/Heilin/图4.jpeg')" />
+                  <img src="/src/assets/images/Heilin/图5.jpeg" alt="水文站图片5" @click="changeMainImage('/src/assets/images/Heilin/图5.jpeg')" />
+                  <img src="/src/assets/images/Heilin/图6.png" alt="水文站图片6" @click="changeMainImage('/src/assets/images/Heilin/图6.png')" />
+                </div>
+                <div class="main-image">
+                  <img :src="mainImageUrl" :alt="mainImageAlt" />
+                </div>
+              </div>
+              <div class="station-text">
+                <p>黑林水文站位于江苏省连云港市赣榆区黑林镇，是沭河上游的重要水文监测站点。</p>
+                <p>建站于1958年，占地面积约2000平方米，主要负责监测沭河上游的水位、流量、降雨量等水文要素。</p>
+                <p>该站配备了先进的水文监测设备，包括自动水位计、流量计、雨量计等，实现了数据的自动采集和传输。</p>
+                <p>多年来，黑林水文站为当地的防洪抗旱、水资源管理和水环境保护提供了重要的科学依据。</p>
+              </div>
+            </div>
+          </div>
+          <div class="data-card video-monitor">
+            <div class="panel-header">
+              <h3>监控画面列表</h3>
+            </div>
+            <div class="panel-content">
+              <div class="monitor-select">
+                <div class="select-wrapper">
+                  <span class="camera-icon">📹</span>
+                  <select v-model="selectedMonitor">
+                    <option value="图5">七星关区赤水河赤水河河道</option>
+                    <option value="图2">监控点 2 - 河道</option>
+                    <option value="图3">监控点 3 - 大坝</option>
+                    <option value="图4">监控点 4 - 泵站</option>
+                    <option value="图5">监控点 5 - 变电站</option>
+                    <option value="图6">监控点 6 - 仓库</option>
+                  </select>
+                </div>
+              </div>
+              <div class="monitor-image">
+                <img :src="'/src/assets/images/Heilin/' + (selectedMonitor === '图6' ? selectedMonitor + '.png' : selectedMonitor + '.jpeg')" :alt="selectedMonitor" />
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="sub-title left-2" @click="showDetailModal = true">
-            测站详情
+      </div>
+      <div class="center-space">
+        <div class="poi-container">
+          <div class="poi-item" style="left: 512px; top: 704px;">
+            <div class="poi-label">水位自记台</div>
+            <img src="/src/assets/images/Heilin/POI.png" alt="POI图标" class="poi-icon" />
+          </div>
+          <div class="poi-item" style="left: 1260px; top: 980px;">
+            <div class="poi-label">水土保持观测场</div>
+            <img src="/src/assets/images/Heilin/POI.png" alt="POI图标" class="poi-icon" />
+          </div>
+          <div class="poi-item" style="left: 724px; top: 883px;">
+            <div class="poi-label">缆道房</div>
+            <img src="/src/assets/images/Heilin/POI.png" alt="POI图标" class="poi-icon" />
+          </div>
+          <div class="poi-item" style="left: 979px; top: 855px;">
+            <div class="poi-label">降雨观测场</div>
+            <img src="/src/assets/images/Heilin/POI.png" alt="POI图标" class="poi-icon" />
+          </div>
+          <div class="poi-item" style="left: 1173px; top: 801px;">
+            <div class="poi-label">地下水监测井</div>
+            <img src="/src/assets/images/Heilin/POI.png" alt="POI图标" class="poi-icon" />
+          </div>
         </div>
-        <div class="sub-title right-2" @click="goToSimulation">
-            测控平台
+      </div>
+      <div class="right-sidebar">
+        <div class="right-container">
+          <div class="data-card data-card-1">
+            <div class="panel-header">
+              <h3>监测数据</h3>
+            </div>
+            <div class="panel-content">
+              <div class="water-level-cards">
+                <div class="water-card">
+                  <div class="card-title">实时水位</div>
+                  <div class="card-value">36.25<span class="unit">m</span></div>
+                </div>
+                <div class="water-card">
+                  <div class="card-title">警戒水位</div>
+                  <div class="card-value warning">35.00<span class="unit">m</span></div>
+                </div>
+                <div class="water-card">
+                  <div class="card-title">保证水位</div>
+                  <div class="card-value danger">36.50<span class="unit">m</span></div>
+                </div>
+                <div class="water-card">
+                  <div class="card-title">最高水位</div>
+                  <div class="card-value highlight">36.46<span class="unit">m</span></div>
+                </div>
+              </div>
+              <div class="water-level-cards" style="margin-top: 10px;">
+                <div class="water-card">
+                  <div class="card-title">实时流量</div>
+                  <div class="card-value">25.6<span class="unit">m³/s</span></div>
+                </div>
+                <div class="water-card">
+                  <div class="card-title">日降雨量</div>
+                  <div class="card-value">12.5<span class="unit">mm</span></div>
+                </div>
+                <div class="water-card">
+                  <div class="card-title">月降雨量</div>
+                  <div class="card-value">85.3<span class="unit">mm</span></div>
+                </div>
+                <div class="water-card">
+                  <div class="card-title">年降雨量</div>
+                  <div class="card-value">780.2<span class="unit">mm</span></div>
+                </div>
+              </div>
+              <div class="chart-container">
+                <div ref="combinedChart" style="width: 100%; height: 100%;"></div>
+              </div>
+            </div>
+          </div>
+          <div class="data-card data-card-2">
+            <div class="panel-header">
+              <h3>蒸发量过程线</h3>
+            </div>
+            <div class="panel-content">
+              <div class="water-level-cards">
+                <div class="water-card">
+                  <div class="card-title">今日蒸发量</div>
+                  <div class="card-value">4.2<span class="unit">mm</span></div>
+                </div>
+                <div class="water-card">
+                  <div class="card-title">昨日蒸发量</div>
+                  <div class="card-value">3.8<span class="unit">mm</span></div>
+                </div>
+                <div class="water-card">
+                  <div class="card-title">月均蒸发量</div>
+                  <div class="card-value">95.6<span class="unit">mm</span></div>
+                </div>
+                <div class="water-card">
+                  <div class="card-title">年均蒸发量</div>
+                  <div class="card-value">845.7<span class="unit">mm</span></div>
+                </div>
+              </div>
+              <div class="chart-container" style="margin-top: 10px;">
+                <div ref="evaporationChart" style="width: 100%; height: 100%;"></div>
+              </div>
+            </div>
+          </div>
+          <div class="data-card data-card-3">
+            <div class="panel-header">
+              <h3>土壤含水量过程线</h3>
+            </div>
+            <div class="panel-content">
+              <div class="water-level-cards">
+                <div class="water-card">
+                  <div class="card-title">≤10cm含水量</div>
+                  <div class="card-value">22.5<span class="unit">%</span></div>
+                </div>
+                <div class="water-card">
+                  <div class="card-title">≤20cm含水量</div>
+                  <div class="card-value">25.8<span class="unit">%</span></div>
+                </div>
+                <div class="water-card">
+                  <div class="card-title">≤30cm含水量</div>
+                  <div class="card-value">28.2<span class="unit">%</span></div>
+                </div>
+                <div class="water-card">
+                  <div class="card-title">平均含水量</div>
+                  <div class="card-value">25.5<span class="unit">%</span></div>
+                </div>
+              </div>
+              <div class="chart-container" style="margin-top: 10px;">
+                <div ref="soilMoistureChart" style="width: 100%; height: 100%;"></div>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="sub-title right-3" @click="showDetailModal = true">
-            更多
+      </div>
+    </div>
+    <GradientOverlay />
+    <div v-if="showDetailModal" class="modal-overlay" @click="closeModal">
+      <div class="modal-content" @click.stop>
+        <div class="modal-header">
+          <h2>水文站详细信息</h2>
+          <span class="close-btn" @click="closeModal">×</span>
         </div>
-
-        <!-- 主要内容区域 -->
-        <div class="main-content">
-
-            <!-- 中间空间 -->
-            <div class="center-space">
-                <div class="poi-container">
-                    <div class="poi-item" style="left: 512px; top: 704px;">
-                        <div class="poi-label">水位自记台</div>
-                        <img src="/src/assets/images/Heilin/POI.png" alt="POI图标" class="poi-icon" />
-                    </div>
-                    <div class="poi-item" style="left: 1260px; top: 980px;">
-                        <div class="poi-label">水土保持观测场</div>
-                        <img src="/src/assets/images/Heilin/POI.png" alt="POI图标" class="poi-icon" />
-                    </div>
-                    <div class="poi-item" style="left: 724px; top: 883px;">
-                        <div class="poi-label">缆道房</div>
-                        <img src="/src/assets/images/Heilin/POI.png" alt="POI图标" class="poi-icon" />
-                    </div>
-                    <div class="poi-item" style="left: 979px; top: 855px;">
-                        <div class="poi-label">降雨观测场</div>
-                        <img src="/src/assets/images/Heilin/POI.png" alt="POI图标" class="poi-icon" />
-                    </div>
-                    <div class="poi-item" style="left: 1173px; top: 801px;">
-                        <div class="poi-label">地下水监测井</div>
-                        <img src="/src/assets/images/Heilin/POI.png" alt="POI图标" class="poi-icon" />
-                    </div>
-                </div>
+        <div class="modal-body">
+          <div class="station-info-header">
+            <div class="station-basic">
+              <h3 class="station-name">黑林水文站</h3>
+              <p class="station-code">测站编码：640324</p>
+              <p class="station-basin">所在流域：青口河</p>
             </div>
-
+            <div class="station-qr">
+              <img src="/src/assets/images/Heilin/测站二维码.png" alt="测站二维码" />
+            </div>
+          </div>
+          <div class="detail-section">
+            <h4>测站沿革</h4>
+            <p>黑林水文站位于青口河中游，是集水面积 190 km²的重要控制站，也是小塔山水库入库控制断面。该站于 1976 年 7 月建站，采用黑林站冻结基面（1976 年设站时冻结，非黄海基面）。</p>
+          </div>
+          <div class="detail-section">
+            <h4>监测项目</h4>
+            <p>水位、流量、降雨量、水质、蒸发量、水土流失监测、地下水</p>
+          </div>
+          <div class="detail-section">
+            <h4>历史数据</h4>
+            <div class="data-grid">
+              <div class="data-item">
+                <span class="data-label">2024 年实测最大洪峰</span>
+                <span class="data-value">371 m³/s</span>
+              </div>
+              <div class="data-item">
+                <span class="data-label">多年平均蒸发量</span>
+                <span class="data-value">845.7 mm</span>
+              </div>
+            </div>
+          </div>
+          <div class="detail-section">
+            <h4>历史最高水位</h4>
+            <div class="extreme-data">
+              <div class="data-row">
+                <span class="data-label">水位：</span>
+                <span class="data-value highlight">36.46 m</span>
+              </div>
+              <div class="data-row">
+                <span class="data-label">出现时间：</span>
+                <span class="data-text">2024 年 7 月 7 日 11 时 36 分</span>
+              </div>
+              <div class="data-row">
+                <span class="data-label">对应洪峰：</span>
+                <span class="data-text">371 m³/s（2024 年 7 月实测）</span>
+              </div>
+              <div class="data-row">
+                <span class="data-label">背景：</span>
+                <span class="data-text">受沂沭河 1 号洪水与区域特大暴雨影响，为设站以来实测最高水位</span>
+              </div>
+            </div>
+          </div>
+          <div class="detail-section">
+            <h4>历史最低水位</h4>
+            <div class="extreme-data">
+              <div class="data-row">
+                <span class="data-label">水位：</span>
+                <span class="data-value low">32.10 m</span>
+              </div>
+              <div class="data-row">
+                <span class="data-label">出现时间：</span>
+                <span class="data-text">2019 年 12 月（枯水期）</span>
+              </div>
+              <div class="data-row">
+                <span class="data-label">说明：</span>
+                <span class="data-text">为长期监测资料整编成果，属流域典型枯水极值</span>
+              </div>
+            </div>
+          </div>
+          <div class="detail-section">
+            <h4>水位基面与说明</h4>
+            <div class="base-info">
+              <div class="data-row">
+                <span class="data-label">基面：</span>
+                <span class="data-text">黑林站冻结基面（1976 年设站时冻结，非黄海基面）</span>
+              </div>
+              <div class="data-row">
+                <span class="data-label">警戒水位：</span>
+                <span class="data-value warning">35.00 m</span>
+              </div>
+              <div class="data-row">
+                <span class="data-label">保证水位：</span>
+                <span class="data-value danger">36.50 m</span>
+                <span class="data-note">（2024 年最高水位接近保证水位）</span>
+              </div>
+            </div>
+          </div>
+          <div class="detail-section">
+            <h4>补充信息</h4>
+            <div class="supplement-info">
+              <div class="data-row">
+                <span class="data-label">集水面积：</span>
+                <span class="data-text">190 km²（青口河中游控制站，小塔山水库入库控制断面）</span>
+              </div>
+              <div class="data-row">
+                <span class="data-label">建站时间：</span>
+                <span class="data-text">1976 年 7 月</span>
+              </div>
+              <div class="data-row">
+                <span class="data-label">监测项目：</span>
+                <span class="data-text">水位、流量、降水、含沙量、水质、气象辅助等</span>
+              </div>
+            </div>
+          </div>
         </div>
-
-        <!-- 渐变装饰层（四周暗角） -->
-        <GradientOverlay />
-
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>