添加了交通道路、高速、国道

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>

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>