From 813b902385bd9e669a046a9eea17e556b882aecc Mon Sep 17 00:00:00 2001
From: zhuangzhuang2000 <73012624+zhuangzhuang2000@users.noreply.github.com>
Date: Sat, 25 Apr 2026 21:05:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BA=86=E4=BA=A4=E9=80=9A?=
 =?UTF-8?q?=E9=81=93=E8=B7=AF=E3=80=81=E9=AB=98=E9=80=9F=E3=80=81=E5=9B=BD?=
 =?UTF-8?q?=E9=81=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ControlShowDetailComponent.vue            | 16 ++++++++
 .../detail-panels/HighwayComponent.vue        | 38 +++++++++++++++++++
 .../detail-panels/NationRoadComponent.vue     | 38 +++++++++++++++++++
 .../earthquake/useEarthquakeDisasterChain.ts  |  8 +---
 src/hooks/rain-earthquake/useLayerControl.ts  | 18 ++++++++-
 src/hooks/rainstorm/useRainDisasterChain.ts   |  8 +---
 6 files changed, 113 insertions(+), 13 deletions(-)
 create mode 100644 src/component/rain-earthquake/detail-panels/HighwayComponent.vue
 create mode 100644 src/component/rain-earthquake/detail-panels/NationRoadComponent.vue

diff --git a/src/component/rain-earthquake/ControlShowDetailComponent.vue b/src/component/rain-earthquake/ControlShowDetailComponent.vue
index e77f142..cc6b315 100644
--- a/src/component/rain-earthquake/ControlShowDetailComponent.vue
+++ b/src/component/rain-earthquake/ControlShowDetailComponent.vue
@@ -70,6 +70,20 @@
       useStatusStore().infrastructureLayers.showTrafficRoad.loading
     "
   />
+  <!-- 高速 -->
+  <HighwayComponent
+    v-if="
+      useStatusStore().appLoadingCompleted &&
+      useStatusStore().infrastructureLayers.showHighway.loading
+    "
+  />
+  <!-- 国道 -->
+  <NationRoadComponent
+    v-if="
+      useStatusStore().appLoadingCompleted &&
+      useStatusStore().infrastructureLayers.showMainRoad.loading
+    "
+  />
 </template>
 
 <script lang="ts" setup>
@@ -83,6 +97,8 @@
   import WaterPipeComponent from './detail-panels/WaterPipeComponent.vue';
   import SchoolComponent from './detail-panels/SchoolComponent.vue';
   import TrafficRoadComponent from '@/component/rain-earthquake/detail-panels/TrafficRoadComponent.vue';
+  import HighwayComponent from '@/component/rain-earthquake/detail-panels/HighwayComponent.vue';
+  import NationRoadComponent from '@/component/rain-earthquake/detail-panels/NationRoadComponent.vue';
 </script>
 
 <style scoped lang="less"></style>
diff --git a/src/component/rain-earthquake/detail-panels/HighwayComponent.vue b/src/component/rain-earthquake/detail-panels/HighwayComponent.vue
new file mode 100644
index 0000000..6cb1b71
--- /dev/null
+++ b/src/component/rain-earthquake/detail-panels/HighwayComponent.vue
@@ -0,0 +1,38 @@
+<!-- 供水管网 -->
+<template>
+  <LoadingGeoserverLayer
+    :id="`highway`"
+    :layers="`xian:xian_highway`"
+    @provide-layers="provideLayers"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
+  import type { ImageryLayer } from 'cesium';
+  import { onMounted, watch } from 'vue';
+  import LoadingGeoserverLayer from '../../common/LoadingGeoserverLayer.vue';
+
+  // 保存图层引用
+  let highwayLayer: ImageryLayer | null = null;
+
+  onMounted(() => {
+    // 监听显示隐藏
+    watch(
+      () => useStatusStore().infrastructureLayers.showHighway.show,
+      (newValue: boolean) => {
+        highwayLayer!.show = newValue;
+      }
+    );
+  });
+
+  /**
+   * 提供图层
+   * @param layer 图层
+   */
+  function provideLayers(layer: ImageryLayer) {
+    highwayLayer = layer;
+  }
+</script>
+
+<style scoped></style>
diff --git a/src/component/rain-earthquake/detail-panels/NationRoadComponent.vue b/src/component/rain-earthquake/detail-panels/NationRoadComponent.vue
new file mode 100644
index 0000000..7e88acc
--- /dev/null
+++ b/src/component/rain-earthquake/detail-panels/NationRoadComponent.vue
@@ -0,0 +1,38 @@
+<!-- 供水管网 -->
+<template>
+  <LoadingGeoserverLayer
+    :id="`nationalRoad`"
+    :layers="`xian:xian_national_road`"
+    @provide-layers="provideLayers"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
+  import type { ImageryLayer } from 'cesium';
+  import { onMounted, watch } from 'vue';
+  import LoadingGeoserverLayer from '../../common/LoadingGeoserverLayer.vue';
+
+  // 保存图层引用
+  let mainRoadLayer: ImageryLayer | null = null;
+
+  onMounted(() => {
+    // 监听显示隐藏
+    watch(
+      () => useStatusStore().infrastructureLayers.showMainRoad.show,
+      (newValue: boolean) => {
+        mainRoadLayer!.show = newValue;
+      }
+    );
+  });
+
+  /**
+   * 提供图层
+   * @param layer 图层
+   */
+  function provideLayers(layer: ImageryLayer) {
+    mainRoadLayer = layer;
+  }
+</script>
+
+<style scoped></style>
diff --git a/src/hooks/earthquake/useEarthquakeDisasterChain.ts b/src/hooks/earthquake/useEarthquakeDisasterChain.ts
index eed2a83..1ac683e 100644
--- a/src/hooks/earthquake/useEarthquakeDisasterChain.ts
+++ b/src/hooks/earthquake/useEarthquakeDisasterChain.ts
@@ -249,17 +249,13 @@ export const useEarthquakeDisasterChain = () => {
         name: '显示高速',
         statusStore: statusStore.infrastructureLayers,
         statusKey: 'showHighway' as const,
-        callback: (status: unknown) => {
-          console.log('显示高速', status);
-        },
+        callback: layerControl.clickHighway,
       },
       {
         name: '显示国道',
         statusStore: statusStore.infrastructureLayers,
         statusKey: 'showMainRoad' as const,
-        callback: (status: unknown) => {
-          console.log('显示国道', status);
-        },
+        callback: layerControl.clickNationRoad,
       },
       {
         name: '显示水库',
diff --git a/src/hooks/rain-earthquake/useLayerControl.ts b/src/hooks/rain-earthquake/useLayerControl.ts
index f42c78c..70454b5 100644
--- a/src/hooks/rain-earthquake/useLayerControl.ts
+++ b/src/hooks/rain-earthquake/useLayerControl.ts
@@ -83,6 +83,20 @@ export const useLayerControl = () => {
     useStatusStore().infrastructureLayers.showTrafficRoad.loading = true;
   };
 
+  /**
+   * 显示高速
+   */
+  const clickHighway = () => {
+    useStatusStore().infrastructureLayers.showHighway.loading = true;
+  };
+  /**
+   * 显示国道
+   */
+  const clickNationRoad = () => {
+    useStatusStore().infrastructureLayers.showMainRoad.loading = true;
+  };
+
+
   return {
     clickHiddenDangerPoint,
     clickHospital,
@@ -93,6 +107,8 @@ export const useLayerControl = () => {
     clickSchool,
     clickPopulationGrid,
     clickWaterPipe,
-    clickTrafficRoad
+    clickTrafficRoad,
+    clickHighway,
+    clickNationRoad
   };
 };
diff --git a/src/hooks/rainstorm/useRainDisasterChain.ts b/src/hooks/rainstorm/useRainDisasterChain.ts
index 80661ec..ef6d51f 100644
--- a/src/hooks/rainstorm/useRainDisasterChain.ts
+++ b/src/hooks/rainstorm/useRainDisasterChain.ts
@@ -272,17 +272,13 @@ export const useRainDisasterChain = () => {
         name: '显示高速',
         statusStore: statusStore.infrastructureLayers,
         statusKey: 'showHighway' as const,
-        callback: (status: unknown) => {
-          console.log('显示高速', status);
-        },
+        callback: layerControl.clickHighway,
       },
       {
         name: '显示国道',
         statusStore: statusStore.infrastructureLayers,
         statusKey: 'showMainRoad' as const,
-        callback: (status: unknown) => {
-          console.log('显示国道', status);
-        },
+        callback: layerControl.clickNationRoad,
       },
       {
         name: '显示水库',