添加地铁站

src/api/api.ts

@@ -10,6 +10,7 @@ import { getBasePoints as getStorePointsBasePoints, getPointDetailById as getSto
 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 { getBasePoints as getSubwayStationsBasePoints, getPointDetailById as getSubwayStationsPointDetailById} from './subway-stations'
 import type { ApiResponse } from '@/types/ApiResponse'
 import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots'
 import type { XianRiskSpots } from '@/types/base/XianRiskSpots'
@@ -21,6 +22,7 @@ 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';
+import type { XianSubwayStations } from '@/types/base/XianSubwayStations';
 
 /**
  * API接口统一导出对象
@@ -196,4 +198,20 @@ export const $api = {
      */
     getPointDetailById: (id: number): Promise<ApiResponse<XianReservoirList>> => getReservoirsPointDetailById(id),
   },
+
+  // 地铁站点信息
+  subwayStations: {
+    /**
+     * 获取所有基础地铁站点
+     * @returns 地铁站点数据数组
+     */
+    getBasePoints: (): Promise<ApiResponse<XianSubwayStations[]>> => getSubwayStationsBasePoints(),
+
+    /**
+     * 根据id获取地铁站点详情
+     * @param id - 地铁站点id
+     * @returns 地铁站点详情
+     */
+    getPointDetailById: (id: number): Promise<ApiResponse<XianSubwayStations>> => getSubwayStationsPointDetailById(id),
+  },
 }

src/api/subway-stations.ts

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

src/component/rain-earthquake/ControlShowDetailComponent.vue

@@ -99,6 +99,14 @@
       useStatusStore().infrastructureLayers.showReservoir.loading
     "
   />
+
+  <!-- 地铁站点 -->
+  <SubwayStationComponent
+    v-if="
+      useStatusStore().appLoadingCompleted &&
+      useStatusStore().poiLayers.showSubwayStation.loading
+    "
+  />
 </template>
 
 <script lang="ts" setup>
@@ -116,6 +124,7 @@
   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';
+  import SubwayStationComponent from '@/component/rain-earthquake/detail-panels/SubwayStationComponent.vue';
 </script>
 
 <style scoped lang="less"></style>

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

@@ -0,0 +1,114 @@
+<!-- 地铁站点组件 -->
+<template>
+  <div>
+    <!-- 加载地铁站点点位 -->
+    <LoadingPoints
+      v-if="useStatusStore().appLoadingCompleted && subwayStationList.length > 0"
+      :base-points="subwayStationList"
+      :get-disaster-icon="getDisasterIcon"
+      :prefix="config.prefix.subwayStationPointId"
+      :is-default="false"
+      :loading-resource-field="LoadingResource.SUBWAY_STATION"
+    />
+
+    <!-- 显示信息框 -->
+    <InformationBox
+      :data="subwayStationDetail as Record<string, any>"
+      :field="field"
+      v-if="useLoadingInformationStore().subwayStation.loading"
+      :title="informationBoxTitle"
+      :offset-x="offsetX"
+      :offset-y="offsetY"
+      :key="useLoadingInformationStore().subwayStation.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 { useSubwayStationPoint } from '@/hooks/rain-earthquake/useSubwayStationPoint.ts';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
+
+  const subwayStationList = ref<Point[]>([]);
+
+  // 信息框相关配置
+  const offsetX = ref(0);
+  const offsetY = ref(0);
+  const subwayStationDetail = ref<Point>();
+  const informationBoxTitle = ref('');
+
+  // 获取钩子函数
+  const { field, getDisasterIcon } = useSubwayStationPoint();
+
+  $api.subwayStations.getBasePoints().then((res) => {
+    subwayStationList.value = res.data;
+  });
+
+  // 监听id变化
+  watch(
+    () => useLoadingInformationStore().subwayStation.id,
+    async (newId: number) => {
+      if (newId === -1) {
+        return;
+      }
+      // 获取地铁站点数据
+      const clickObject = useLoadingInformationStore().clickObject;
+
+      if (!clickObject || !clickObject.primitive) {
+        console.warn('点击对象或图元不存在');
+        return;
+      }
+
+      const res = await $api.subwayStations.getPointDetailById(
+        useLoadingInformationStore().subwayStation.id
+      );
+
+      // 更新数据
+      subwayStationDetail.value = res.data;
+      informationBoxTitle.value = res.data.stationName || '地铁站点信息';
+
+      try {
+        // 将坐标转换为偏移量
+        const screenPos = CesiumUtilsSingleton.convertScreenPosition(
+          clickObject.primitive.position
+        );
+        offsetX.value = screenPos.x;
+        offsetY.value = screenPos.y;
+
+        // 显示新的信息框
+        useLoadingInformationStore().subwayStation.loading = true;
+      } catch (error) {
+        throw new Error(`坐标转换失败:${error}`);
+      }
+    }
+  );
+
+  // 监听显示隐藏
+  watch(
+    () => useStatusStore().poiLayers.showSubwayStation?.show,
+    (newValue: boolean) => {
+      if (newValue) {
+        // 显示地铁站点
+        CesiumUtilsSingleton.batchShowPrimitives(
+          useLoadingResourceStore().getLoadingResource(LoadingResource.SUBWAY_STATION)
+        );
+      } else {
+        // 隐藏地铁站点
+        CesiumUtilsSingleton.batchHidePrimitives(
+          useLoadingResourceStore().getLoadingResource(LoadingResource.SUBWAY_STATION)
+        );
+      }
+    }
+  );
+</script>
+
+<style scoped></style>

src/config/config.json

@@ -43,6 +43,7 @@
     "storePointsPointId": "store-points-point-",
     "schoolPointId": "school-point-",
     "bridgePointId": "bridge-point-",
-    "reservoirPointId": "reservoir-point-"
+    "reservoirPointId": "reservoir-point-",
+    "subwayStationPointId": "subway-station-point-"
   }
 }

src/hooks/earthquake/useEarthquakeDisasterChain.ts

@@ -263,11 +263,9 @@ export const useEarthquakeDisasterChain = () => {
       },
       {
         name: '显示地铁站',
-        statusStore: statusStore.infrastructureLayers,
+        statusStore: statusStore.poiLayers,
-        statusKey: 'showSubway' as const,
+        statusKey: 'showSubwayStation' as const,
-        callback: (status: unknown) => {
+        callback: layerControl.clickSubwayStation,
-          console.log('显示地铁站', status);
-        },
       },
     ];
   };

src/hooks/map/useMap.ts

@@ -89,6 +89,11 @@ export const useMap = () => {
           useLoadingInformationStore().reservoir.id = id;
         }
 
+        // 地铁站点
+        else if (pickedObject.id.startsWith(config.prefix.subwayStationPointId)) {
+          useLoadingInformationStore().subwayStation.id = id;
+        }
+
         // 其他
         else {
           // 重置状态

src/hooks/rain-earthquake/useLayerControl.ts

@@ -109,6 +109,13 @@ export const useLayerControl = () => {
     useStatusStore().infrastructureLayers.showReservoir.loading = true;
   };
 
+  /**
+   * 显示地铁站点
+   */
+  const clickSubwayStation = () => {
+    useStatusStore().poiLayers.showSubwayStation.loading = true;
+  };
+
   return {
     clickHiddenDangerPoint,
     clickHospital,
@@ -124,5 +131,6 @@ export const useLayerControl = () => {
     clickNationRoad,
     clickBridge,
     clickReservoir,
+    clickSubwayStation,
   };
 };

src/hooks/rain-earthquake/useSubwayStationPoint.ts

@@ -0,0 +1,29 @@
+import { subwayIcon } from '@/assets';
+
+/**
+ * 地铁站点相关钩子函数
+ * @returns 字段映射和获取图标方法
+ */
+export const useSubwayStationPoint = () => {
+  /**
+   * 字段映射配置
+   */
+  const field = {
+    stationName: '站点名称',
+    referToTheWaterAccumulationPoint: '参照积水点',
+    depthOfAccumulatedWater: '积水深度',
+    accumulatedWaterAfterAccounting: '核算后积水深度',
+    lon: '经度',
+    lat: '纬度',
+  };
+
+  /**
+   * 获取地铁站点图标
+   * @returns 图标路径
+   */
+  function getDisasterIcon(): string {
+    return subwayIcon;
+  }
+
+  return { field, getDisasterIcon };
+};

src/hooks/rainstorm/useRainDisasterChain.ts

@@ -286,11 +286,9 @@ export const useRainDisasterChain = () => {
       },
       {
         name: '显示地铁站',
-        statusStore: statusStore.infrastructureLayers,
+        statusStore: statusStore.poiLayers,
-        statusKey: 'showSubway' as const,
+        statusKey: 'showSubwayStation' as const,
-        callback: (status: unknown) => {
+        callback: layerControl.clickSubwayStation,
-          console.log('显示地铁站', status);
-        },
       },
     ];
   };

src/stores/useLoadingInformation.ts

@@ -108,6 +108,14 @@ export const useLoadingInformationStore = defineStore(
       id: -1,
     });
 
+    // ============================== 地铁站点状态 ================================
+    const subwayStation = reactive({
+      /** 加载状态 */
+      loading: false,
+      /** 地铁站点ID */
+      id: -1,
+    });
+
     /**
      * 重置所有状态
      */
@@ -155,6 +163,10 @@ export const useLoadingInformationStore = defineStore(
       // 水库状态重置
       reservoir.loading = false;
       reservoir.id = -1;
+
+      // 地铁站点状态重置
+      subwayStation.loading = false;
+      subwayStation.id = -1;
     };
 
     return {
@@ -169,6 +181,7 @@ export const useLoadingInformationStore = defineStore(
       school,
       bridge,
       reservoir,
+      subwayStation,
       resetStatue,
 
     };

src/types/base/XianSubwayStations.ts

@@ -0,0 +1,15 @@
+import type { Point } from './Point';
+
+/**
+ * 西安市地铁站点数据接口
+ */
+export interface XianSubwayStations extends Point {
+  /** 站点名称 */
+  stationName?: string;
+  /** 参照积水点 */
+  referToTheWaterAccumulationPoint?: string;
+  /** 积水深度 */
+  depthOfAccumulatedWater?: string;
+  /** 核算后积水深度 */
+  accumulatedWaterAfterAccounting?: string;
+}

src/types/common/LoadingResourceType.ts

@@ -42,5 +42,10 @@ export enum LoadingResource {
    */
   RESERVOIR = 'RESERVOIR',
 
+  /**
+   * 地铁站点
+   */
+  SUBWAY_STATION = 'SUBWAY_STATION',
+
 
 }