添加水库

src/api/api.ts

@@ -9,6 +9,7 @@ import { getBasePoints as getFirefighterBasePoints, getPointDetailById as getFir
 import { getBasePoints as getStorePointsBasePoints, getPointDetailById as getStorePointsPointDetailById} from './store-points'
 import { getBasePoints as getSchoolsBasePoints, getPointDetailById as getSchoolsPointDetailById} from './schools'
 import { getBasePoints as getBridgesBasePoints, getPointDetailById as getBridgesPointDetailById} from './bridges'
+import { getBasePoints as getReservoirsBasePoints, getPointDetailById as getReservoirsPointDetailById} from './reservoirs'
 import type { ApiResponse } from '@/types/ApiResponse'
 import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots'
 import type { XianRiskSpots } from '@/types/base/XianRiskSpots'
@@ -19,6 +20,7 @@ import type { XianFirefighter } from '@/types/base/XianFirefighter'
 import type { XianStorePoints } from '@/types/base/XianStorePoints'
 import type { XianSchool } from '@/types/base/XianSchool'
 import type { XianBridge } from '@/types/base/XianBridge.ts';
+import type { XianReservoirList } from '@/types/base/XianReservoirList';
 
 /**
  * API接口统一导出对象
@@ -178,4 +180,20 @@ export const $api = {
      */
     getPointDetailById: (id: number): Promise<ApiResponse<XianBridge>> => getBridgesPointDetailById(id),
   },
+
+  // 水库信息
+  reservoirs: {
+    /**
+     * 获取所有基础水库
+     * @returns 水库数据数组
+     */
+    getBasePoints: (): Promise<ApiResponse<XianReservoirList[]>> => getReservoirsBasePoints(),
+
+    /**
+     * 根据id获取水库详情
+     * @param id - 水库id
+     * @returns 水库详情
+     */
+    getPointDetailById: (id: number): Promise<ApiResponse<XianReservoirList>> => getReservoirsPointDetailById(id),
+  },
 }

src/api/reservoirs.ts

@@ -0,0 +1,20 @@
+import type { ApiResponse } from "@/types/ApiResponse"
+import type { XianReservoirList } from "@/types/base/XianReservoirList"
+import httpInstance from "@/utils/request/http"
+
+/**
+ * 获取水库基础数据
+ * @returns 水库数据数组
+ */
+export const getBasePoints = (): Promise<ApiResponse<XianReservoirList[]>> => {
+    return httpInstance.get('/reservoir/base-points')
+}
+
+/**
+ * 根据id获取水库详情
+ * @param id - 水库id
+ * @returns 水库详情
+ */
+export const getPointDetailById = (id: number): Promise<ApiResponse<XianReservoirList>> => {
+    return httpInstance.get(`/reservoir/point-detail/${id}`)
+}

src/assets/index.ts

@@ -13,6 +13,8 @@ export { default as firefighterIcon } from '@/assets/images/icon/firefighter.png
 export { default as storePointsIcon } from '@/assets/images/icon/store-points.jpg';
 export { default as schoolIcon } from '@/assets/images/icon/school.png';
 export { default as bridgeIcon } from '@/assets/images/icon/bridge.png';
+export { default as reservoirIcon } from '@/assets/images/icon/reservoir.png';
+export { default as subwayIcon } from '@/assets/images/icon/subway.png';
 
 // 图片
 export { default as backgroundImage } from '@/assets/images/background-image.png';

src/component/rain-earthquake/ControlShowDetailComponent.vue

@@ -91,6 +91,14 @@
       useStatusStore().infrastructureLayers.showBridge.loading
     "
   />
+
+  <!-- 水库 -->
+  <ReservoirComponent
+    v-if="
+      useStatusStore().appLoadingCompleted &&
+      useStatusStore().infrastructureLayers.showReservoir.loading
+    "
+  />
 </template>
 
 <script lang="ts" setup>
@@ -107,6 +115,7 @@
   import HighwayComponent from '@/component/rain-earthquake/detail-panels/HighwayComponent.vue';
   import NationRoadComponent from '@/component/rain-earthquake/detail-panels/NationRoadComponent.vue';
   import BridgeComponent from '@/component/rain-earthquake/detail-panels/BridgeComponent.vue';
+  import ReservoirComponent from '@/component/rain-earthquake/detail-panels/ReservoirComponent.vue';
 </script>
 
 <style scoped lang="less"></style>

src/component/rain-earthquake/detail-panels/ReservoirComponent.vue

@@ -0,0 +1,114 @@
+<!-- 水库组件 -->
+<template>
+  <div>
+    <!-- 加载水库点位 -->
+    <LoadingPoints
+      v-if="useStatusStore().appLoadingCompleted && reservoirList.length > 0"
+      :base-points="reservoirList"
+      :get-disaster-icon="getDisasterIcon"
+      :prefix="config.prefix.reservoirPointId"
+      :is-default="false"
+      :loading-resource-field="LoadingResource.RESERVOIR"
+    />
+
+    <!-- 显示信息框 -->
+    <InformationBox
+      :data="reservoirDetail as Record<string, any>"
+      :field="field"
+      v-if="useLoadingInformationStore().reservoir.loading"
+      :title="informationBoxTitle"
+      :offset-x="offsetX"
+      :offset-y="offsetY"
+      :key="useLoadingInformationStore().reservoir.id"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+  import { $api } from '@/api/api.ts';
+  import type { Point } from '@/types/base/Point.ts';
+  import LoadingPoints from '@/component/common/LoadingPoints.vue';
+  import config from '@/config/config.json';
+  import InformationBox from '@/component/common/InformationBox.vue';
+  import { useStatusStore } from '@/stores/useStatusStore.ts';
+  import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
+  import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
+  import { useReservoirPoint } from '@/hooks/rain-earthquake/useReservoirPoint.ts';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
+
+  const reservoirList = ref<Point[]>([]);
+
+  // 信息框相关配置
+  const offsetX = ref(0);
+  const offsetY = ref(0);
+  const reservoirDetail = ref<Point>();
+  const informationBoxTitle = ref('');
+
+  // 获取钩子函数
+  const { field, getDisasterIcon } = useReservoirPoint();
+
+  $api.reservoirs.getBasePoints().then((res) => {
+    reservoirList.value = res.data;
+  });
+
+  // 监听id变化
+  watch(
+    () => useLoadingInformationStore().reservoir.id,
+    async (newId: number) => {
+      if (newId === -1) {
+        return;
+      }
+      // 获取水库数据
+      const clickObject = useLoadingInformationStore().clickObject;
+
+      if (!clickObject || !clickObject.primitive) {
+        console.warn('点击对象或图元不存在');
+        return;
+      }
+
+      const res = await $api.reservoirs.getPointDetailById(
+        useLoadingInformationStore().reservoir.id
+      );
+
+      // 更新数据
+      reservoirDetail.value = res.data;
+      informationBoxTitle.value = res.data.reservoirName || '水库信息';
+
+      try {
+        // 将坐标转换为偏移量
+        const screenPos = CesiumUtilsSingleton.convertScreenPosition(
+          clickObject.primitive.position
+        );
+        offsetX.value = screenPos.x;
+        offsetY.value = screenPos.y;
+
+        // 显示新的信息框
+        useLoadingInformationStore().reservoir.loading = true;
+      } catch (error) {
+        throw new Error(`坐标转换失败:${error}`);
+      }
+    }
+  );
+
+  // 监听显示隐藏
+  watch(
+    () => useStatusStore().infrastructureLayers.showReservoir?.show,
+    (newValue: boolean) => {
+      if (newValue) {
+        // 显示水库
+        CesiumUtilsSingleton.batchShowPrimitives(
+          useLoadingResourceStore().getLoadingResource(LoadingResource.RESERVOIR)
+        );
+      } else {
+        // 隐藏水库
+        CesiumUtilsSingleton.batchHidePrimitives(
+          useLoadingResourceStore().getLoadingResource(LoadingResource.RESERVOIR)
+        );
+      }
+    }
+  );
+</script>
+
+<style scoped></style>

src/config/config.json

@@ -42,6 +42,7 @@
     "fireStationPointId": "fire-station-point-",
     "storePointsPointId": "store-points-point-",
     "schoolPointId": "school-point-",
-    "bridgePointId": "bridge-point-"
+    "bridgePointId": "bridge-point-",
+    "reservoirPointId": "reservoir-point-"
   }
 }

src/hooks/earthquake/useEarthquakeDisasterChain.ts

@@ -259,9 +259,7 @@ export const useEarthquakeDisasterChain = () => {
         name: '显示水库',
         statusStore: statusStore.infrastructureLayers,
         statusKey: 'showReservoir' as const,
-        callback: (status: unknown) => {
-          console.log('显示水库', status);
-        },
+        callback: layerControl.clickReservoir,
       },
       {
         name: '显示地铁站',

src/hooks/map/useMap.ts

@@ -84,6 +84,11 @@ export const useMap = () => {
           useLoadingInformationStore().bridge.id = id;
         }
 
+        // 水库
+        else if (pickedObject.id.startsWith(config.prefix.reservoirPointId)) {
+          useLoadingInformationStore().reservoir.id = id;
+        }
+
         // 其他
         else {
           // 重置状态

src/hooks/rain-earthquake/useLayerControl.ts

@@ -102,6 +102,13 @@ export const useLayerControl = () => {
     useStatusStore().infrastructureLayers.showBridge.loading = true;
   };
 
+  /**
+   * 显示水库
+   */
+  const clickReservoir = () => {
+    useStatusStore().infrastructureLayers.showReservoir.loading = true;
+  };
+
   return {
     clickHiddenDangerPoint,
     clickHospital,
@@ -116,5 +123,6 @@ export const useLayerControl = () => {
     clickHighway,
     clickNationRoad,
     clickBridge,
+    clickReservoir,
   };
 };

src/hooks/rain-earthquake/useReservoirPoint.ts

@@ -0,0 +1,28 @@
+import { reservoirIcon } from '@/assets';
+
+/**
+ * 水库相关钩子函数
+ * @returns 字段映射和获取图标方法
+ */
+export const useReservoirPoint = () => {
+  /**
+   * 字段映射配置
+   */
+  const field = {
+    reservoirName: '水库名称',
+    location: '地理位置',
+    safetyAssessResult: '安全等级',
+    lon: '经度',
+    lat: '纬度',
+  };
+
+  /**
+   * 获取水库图标
+   * @returns 图标路径
+   */
+  function getDisasterIcon(): string {
+    return reservoirIcon;
+  }
+
+  return { field, getDisasterIcon };
+};

src/hooks/rainstorm/useRainDisasterChain.ts

@@ -282,9 +282,7 @@ export const useRainDisasterChain = () => {
         name: '显示水库',
         statusStore: statusStore.infrastructureLayers,
         statusKey: 'showReservoir' as const,
-        callback: (status: unknown) => {
-          console.log('显示水库', status);
-        },
+        callback: layerControl.clickReservoir,
       },
       {
         name: '显示地铁站',

src/stores/useLoadingInformation.ts

@@ -100,6 +100,14 @@ export const useLoadingInformationStore = defineStore(
       id: -1,
     });
 
+    // ============================== 水库状态 ================================
+    const reservoir = reactive({
+      /** 加载状态 */
+      loading: false,
+      /** 水库ID */
+      id: -1,
+    });
+
     /**
      * 重置所有状态
      */
@@ -143,6 +151,10 @@ export const useLoadingInformationStore = defineStore(
       // 桥梁状态重置
       bridge.loading = false;
       bridge.id = -1;
+
+      // 水库状态重置
+      reservoir.loading = false;
+      reservoir.id = -1;
     };
 
     return {
@@ -156,6 +168,7 @@ export const useLoadingInformationStore = defineStore(
       storePoints,
       school,
       bridge,
+      reservoir,
       resetStatue,
 
     };

src/types/base/XianReservoirList.ts

@@ -0,0 +1,17 @@
+import type { Point } from './Point';
+
+/**
+ * 西安市水库数据接口
+ */
+export interface XianReservoirList extends Point {
+  /** 水库名称 */
+  reservoirName?: string;
+  /** 水库位置 */
+  location?: string;
+  /** 安全评定结果 */
+  safetyAssessResult?: string;
+  /** 经度 */
+  lon?: number;
+  /** 纬度 */
+  lat?: number;
+}

src/types/common/LoadingResourceType.ts

@@ -37,5 +37,10 @@ export enum LoadingResource {
    */
   BRIDGE = 'BRIDGE',
 
+  /**
+   * 水库
+   */
+  RESERVOIR = 'RESERVOIR',
+
 
 }