显示管网

src/component/rain-earthquake/ControlShowDetailComponent.vue

@@ -46,6 +46,14 @@
       useStatusStore().poiLayers.showPopulationGrid.loading
     "
   />
+
+  <!-- 管网系统 -->
+  <WaterPipeComponent
+    v-if="
+      useStatusStore().appLoadingCompleted &&
+      useStatusStore().infrastructureLayers.showNetworkSystem.loading
+    "
+  />
 </template>
 
 <script lang="ts" setup>
@@ -56,6 +64,7 @@
   import FireStationComponent from './FireStationComponent.vue';
   import StorePointsComponent from './StorePointsComponent.vue';
   import PopulationGridComponent from './PopulationGridComponent.vue';
+  import WaterPipeComponent from './WaterPipeComponent.vue';
 </script>
 
 <style scoped lang="less"></style>

src/component/rain-earthquake/PopulationGridComponent.vue

@@ -17,7 +17,7 @@
   let populationLayer: ImageryLayer | null = null;
 
   onMounted(() => {
-    // 监听显示隐藏风险点
+    // 监听显示
     watch(
       () => useStatusStore().poiLayers.showPopulationGrid.show,
       (newValue: boolean) => {

src/component/rain-earthquake/WaterPipeComponent.vue

@@ -0,0 +1,38 @@
+<!-- 供水管网 -->
+<template>
+  <LoadingGeoserverLayer
+    :id="`waterPipe`"
+    :layers="`xian:xian_water_pipe`"
+    @provide-layers="provideLayers"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { useStatusStore } from '@/stores/useStatusStore';
+  import type { ImageryLayer } from 'cesium';
+  import { onMounted, watch } from 'vue';
+  import LoadingGeoserverLayer from './LoadingGeoserverLayer.vue';
+
+  // 保存图层引用
+  let waterPipeLayer: ImageryLayer | null = null;
+
+  onMounted(() => {
+    // 监听显示隐藏
+    watch(
+      () => useStatusStore().infrastructureLayers.showNetworkSystem.show,
+      (newValue: boolean) => {
+        waterPipeLayer!.show = newValue;
+      }
+    );
+  });
+
+  /**
+   * 提供图层
+   * @param layer 图层
+   */
+  function provideLayers(layer: ImageryLayer) {
+    waterPipeLayer = layer;
+  }
+</script>
+
+<style scoped></style>

src/hooks/earthquake/useEarthquakeDisasterChain.ts

@@ -231,9 +231,7 @@ export const useEarthquakeDisasterChain = () => {
         name: '显示管网系统',
         statusStore: statusStore.infrastructureLayers,
         statusKey: 'showNetworkSystem' as const,
-        callback: (status: unknown) => {
-          console.log('显示管网系统', status);
-        },
+        callback: layerControl.clickWaterPipe,
       },
       {
         name: '显示交通道路',

src/hooks/rainstorm/useRainDisasterChain.ts

@@ -261,9 +261,7 @@ export const useRainDisasterChain = () => {
         name: '显示管网系统',
         statusStore: statusStore.infrastructureLayers,
         statusKey: 'showNetworkSystem' as const,
-        callback: (status: unknown) => {
-          console.log('显示管网系统', status);
-        },
+        callback: layerControl.clickWaterPipe,
       },
       {
         name: '显示交通道路',

src/hooks/useLayerControl.ts

@@ -61,6 +61,13 @@ export const useLayerControl = () => {
     useStatusStore().poiLayers.showPopulationGrid.loading = true;
   };
 
+  /**
+   * 显示管网
+   */
+  const clickWaterPipe = () => {
+    useStatusStore().infrastructureLayers.showNetworkSystem.loading = true;
+  };
+
   return {
     clickHiddenDangerPoint,
     clickHospital,
@@ -69,5 +76,6 @@ export const useLayerControl = () => {
     clickFireStation,
     clickStorePoints,
     clickPopulationGrid,
+    clickWaterPipe,
   };
 };