添加桥梁

src/api/api.ts

@@ -8,6 +8,7 @@ import { getBasePoints as getEmergencyShelterBasePoints, getPointDetailById as g
 import { getBasePoints as getFirefighterBasePoints, getPointDetailById as getFirefighterPointDetailById} from './firefighter'
 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 type { ApiResponse } from '@/types/ApiResponse'
 import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots'
 import type { XianRiskSpots } from '@/types/base/XianRiskSpots'
@@ -17,6 +18,7 @@ import type { XianEmergencyShelter } from '@/types/base/XianEmergencyShelter'
 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';
 
 /**
  * API接口统一导出对象
@@ -160,4 +162,20 @@ export const $api = {
      */
     getPointDetailById: (id: number): Promise<ApiResponse<XianSchool>> => getSchoolsPointDetailById(id),
   },
+
+  // 桥梁信息
+  bridges: {
+    /**
+     * 获取所有基础桥梁
+     * @returns 桥梁数据数组
+     */
+    getBasePoints: (): Promise<ApiResponse<XianBridge[]>> => getBridgesBasePoints(),
+
+    /**
+     * 根据id获取桥梁详情
+     * @param id - 桥梁id
+     * @returns 桥梁详情
+     */
+    getPointDetailById: (id: number): Promise<ApiResponse<XianBridge>> => getBridgesPointDetailById(id),
+  },
 }

src/api/bridges.ts

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

src/assets/index.ts

@@ -12,6 +12,7 @@ export { default as emergencyShelterIcon } from '@/assets/images/icon/emergency-
 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 backgroundImage } from '@/assets/images/background-image.png';

src/component/rain-earthquake/ControlShowDetailComponent.vue

@@ -84,6 +84,13 @@
       useStatusStore().infrastructureLayers.showMainRoad.loading
     "
   />
+  <!-- 桥梁 -->
+  <BridgeComponent
+    v-if="
+      useStatusStore().appLoadingCompleted &&
+      useStatusStore().infrastructureLayers.showBridge.loading
+    "
+  />
 </template>
 
 <script lang="ts" setup>
@@ -99,6 +106,7 @@
   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';
+  import BridgeComponent from '@/component/rain-earthquake/detail-panels/BridgeComponent.vue';
 </script>
 
 <style scoped lang="less"></style>

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

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

src/config/config.json

@@ -41,6 +41,7 @@
     "emergencyShelterPointId": "emergency-shelter-point-",
     "fireStationPointId": "fire-station-point-",
     "storePointsPointId": "store-points-point-",
-    "schoolPointId": "school-point-"
+    "schoolPointId": "school-point-",
+    "bridgePointId": "bridge-point-"
   }
 }

src/hooks/earthquake/useEarthquakeDisasterChain.ts

@@ -241,9 +241,7 @@ export const useEarthquakeDisasterChain = () => {
         name: '显示桥梁',
         statusStore: statusStore.infrastructureLayers,
         statusKey: 'showBridge' as const,
-        callback: (status: unknown) => {
-          console.log('显示桥梁', status);
-        },
+        callback: layerControl.clickBridge,
       },
       {
         name: '显示高速',
@@ -268,7 +266,7 @@ export const useEarthquakeDisasterChain = () => {
       {
         name: '显示地铁站',
         statusStore: statusStore.infrastructureLayers,
-        statusKey: 'showReservoir' as const,
+        statusKey: 'showSubway' as const,
         callback: (status: unknown) => {
           console.log('显示地铁站', status);
         },

src/hooks/map/useMap.ts

@@ -79,13 +79,17 @@ export const useMap = () => {
           useLoadingInformationStore().school.id = id;
         }
 
+        // 桥梁
+        else if (pickedObject.id.startsWith(config.prefix.bridgePointId)) {
+          useLoadingInformationStore().bridge.id = id;
+        }
+
         // 其他
         else {
           // 重置状态
           useLoadingInformationStore().resetStatue();
         }
       } else {
-        console.log(pickedObject);
         // 重置状态
         useLoadingInformationStore().resetStatue();
       }

src/hooks/rain-earthquake/useBridgePoint.ts

@@ -0,0 +1,28 @@
+import { bridgeIcon } from '@/assets';
+
+/**
+ * 桥梁相关钩子函数
+ * @returns
+ */
+export const useBridgePoint = () => {
+  /**
+   * 字段映射配置
+   */
+  const field = {
+    bridgeName: '桥梁名称',
+    bridgeType: '桥梁类型',
+    techType: '技术类型',
+    lon: '经度',
+    lat: '纬度',
+  };
+
+  /**
+   * 获取桥梁图标
+   * @returns 图标路径
+   */
+  function getDisasterIcon(): string {
+    return bridgeIcon;
+  }
+
+  return { field, getDisasterIcon };
+};

src/hooks/rain-earthquake/useLayerControl.ts

@@ -95,7 +95,12 @@ export const useLayerControl = () => {
   const clickNationRoad = () => {
     useStatusStore().infrastructureLayers.showMainRoad.loading = true;
   };
-
+  /**
+   * 显示桥梁
+   */
+  const clickBridge = () => {
+    useStatusStore().infrastructureLayers.showBridge.loading = true;
+  };
 
   return {
     clickHiddenDangerPoint,
@@ -109,6 +114,7 @@ export const useLayerControl = () => {
     clickWaterPipe,
     clickTrafficRoad,
     clickHighway,
-    clickNationRoad
+    clickNationRoad,
+    clickBridge,
   };
 };

src/hooks/rainstorm/useRainDisasterChain.ts

@@ -264,9 +264,7 @@ export const useRainDisasterChain = () => {
         name: '显示桥梁',
         statusStore: statusStore.infrastructureLayers,
         statusKey: 'showBridge' as const,
-        callback: (status: unknown) => {
-          console.log('显示桥梁', status);
-        },
+        callback: layerControl.clickBridge,
       },
       {
         name: '显示高速',
@@ -291,7 +289,7 @@ export const useRainDisasterChain = () => {
       {
         name: '显示地铁站',
         statusStore: statusStore.infrastructureLayers,
-        statusKey: 'showReservoir' as const,
+        statusKey: 'showSubway' as const,
         callback: (status: unknown) => {
           console.log('显示地铁站', status);
         },

src/stores/useLoadingInformation.ts

@@ -92,6 +92,14 @@ export const useLoadingInformationStore = defineStore(
       id: -1,
     });
 
+    // ============================== 桥梁状态 ================================
+    const bridge = reactive({
+      /** 加载状态 */
+      loading: false,
+      /** 桥梁ID */
+      id: -1,
+    });
+
     /**
      * 重置所有状态
      */
@@ -131,6 +139,10 @@ export const useLoadingInformationStore = defineStore(
       // 学校状态重置
       school.loading = false;
       school.id = -1;
+
+      // 桥梁状态重置
+      bridge.loading = false;
+      bridge.id = -1;
     };
 
     return {
@@ -143,7 +155,9 @@ export const useLoadingInformationStore = defineStore(
       fireStation,
       storePoints,
       school,
+      bridge,
       resetStatue,
+
     };
   }
 );

src/stores/useStatusStore.ts

@@ -151,6 +151,11 @@ export const useStatusStore = defineStore('status', () => {
       show: false,
       loading: false,
     },
+    /** 显示地铁 */
+    showSubway: {
+      show: false,
+      loading: false,
+    },
   });
 
   // ============================ 地图功能显示状态 ================================

src/types/base/XianBridge.ts

@@ -0,0 +1,77 @@
+import type { Point } from './Point';
+
+/**
+ * 西安市桥梁数据接口
+ */
+export interface XianBridge extends Point {
+
+  /**
+   * 区域
+   */
+  region?: string;
+
+  /**
+   * 名称
+   */
+  bridgeName?: string;
+
+  /**
+   * 位置
+   */
+  location?: string;
+
+  /**
+   * 建成时间
+   */
+  buildTime?: string;
+
+  /**
+   * 类型
+   */
+  bridgeType?: string;
+
+  /**
+   * 养护类型
+   */
+  maintainType?: string;
+
+  /**
+   * 技术类型
+   */
+  techType?: string;
+
+  /**
+   * 规模
+   */
+  scale?: string;
+
+  /**
+   * 面积
+   */
+  area?: number;
+
+  /**
+   * 所属单位
+   */
+  master?: string;
+
+  /**
+   * 养护单位
+   */
+  maint?: string;
+
+  /**
+   * 备注
+   */
+  note?: string;
+
+  /**
+   * 位置 (可能是 GeoJSON 对象或其他结构)
+   */
+  point?: unknown;
+
+  /**
+   * 逻辑删除标识，0未删除，1已删除
+   */
+  isDelete?: number;
+}

src/types/common/LoadingResourceType.ts

@@ -31,4 +31,11 @@ export enum LoadingResource {
 
   /** 学校 */
   SCHOOL = 'SCHOOL',
+
+  /**
+   * 桥梁
+   */
+  BRIDGE = 'BRIDGE',
+
+
 }