修改标签标题

src/components/CesiumMap.vue

@@ -82,20 +82,41 @@ const addPoiMarker = () => {
       },
       label: {
         text: '水位 3.25m\n流量 12.5m³/s\n降雨量 0.5mm/h',
-        font: 'bold 12px sans-serif',
+        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.CENTER,
-        pixelOffset: new Cesium.Cartesian2(0, -45),
+        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)
@@ -115,20 +136,41 @@ const addPoiMarker = () => {
       },
       label: {
         text: '库水位 18.5m\n库容 2350.8万m³\n汛限 20.0m',
-        font: 'bold 12px sans-serif',
+        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.CENTER,
-        pixelOffset: new Cesium.Cartesian2(0, -45),
+        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)
     
@@ -287,23 +329,17 @@ onMounted(async () => {
         }
       }
       
-      const padding = 0.05
       viewer.value.camera.flyTo({
-        destination: Cesium.Rectangle.fromDegrees(
-          minLon - padding,
-          minLat - padding,
-          maxLon + padding,
-          maxLat + padding
-        ),
+        destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
         duration: 0
       })
     }
   } catch (error) {
     console.error('加载GeoJSON失败:', error)
     viewer.value.camera.flyTo({
-      destination: Cesium.Rectangle.fromDegrees(118.77, 34.99, 118.83, 35.02),
-      duration: 0
-    })
+        destination: Cesium.Cartesian3.fromDegrees(118.9019, 34.985, 33000),
+        duration: 0
+      })
   }
 
   addPoiMarker()