避难所

src/api/api.ts

@@ -4,11 +4,13 @@ import { getBasePoins as getHiddenDangerBasePoints, getPointDetailById as getHid
 import { getBasePoins as getRiskBasePoints, getPointDetailById as getRiskPointDetailById} from './risk-spots'
 import { getBasePoins as getHospitalsBasePoints, getPointDetailById as getHospitalsPointDetailById} from './hospitals'
 import { getBasePoints as getDangerousSourceBasePoints, getPointDetailById as getDangerousSourcePointDetailById} from './dangerous-source'
+import { getBasePoints as getEmergencyShelterBasePoints, getPointDetailById as getEmergencyShelterPointDetailById} from './emergency-shelter'
 import type { ApiResponse } from '@/types/ApiResponse'
 import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots'
 import type { XianRiskSpots } from '@/types/base/XianRiskSpots'
 import type { XianHospitals } from '@/types/base/XianHospitals'
 import type { XianDangerousSource } from '@/types/base/XianDangerousSource'
+import type { XianEmergencyShelter } from '@/types/base/XianEmergencyShelter'
 
 /**
  * API接口统一导出对象
@@ -88,4 +90,20 @@ export const $api = {
      */
     getPointDetailById: (id: number): Promise<ApiResponse<XianDangerousSource>> => getDangerousSourcePointDetailById(id),
   },
+
+  // 避难所信息
+  emergencyShelter: {
+    /**
+     * 获取所有基础避难所
+     * @returns 避难所数据数组
+     */
+    getBasePoints: (): Promise<ApiResponse<XianEmergencyShelter[]>> => getEmergencyShelterBasePoints(),
+
+    /**
+     * 根据id获取避难所详情
+     * @param id - 避难所id
+     * @returns 避难所详情
+     */
+    getPointDetailById: (id: number): Promise<ApiResponse<XianEmergencyShelter>> => getEmergencyShelterPointDetailById(id),
+  },
 }

src/api/emergency-shelter.ts

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

src/assets/index.ts

@@ -8,6 +8,7 @@ export { default as flashFloodIcon } from '@/assets/images/icon/flash-flood.png'
 export { default as riskAreaIcon } from '@/assets/images/icon/risk-area.png';
 export { default as hospitalIcon } from '@/assets/images/icon/hospital.png';
 export { default as dangerousSourceIcon } from '@/assets/images/icon/dangerous-source.png';
+export { default as emergencyShelterIcon } from '@/assets/images/icon/emergency-shelter.png';
 
 // 图片
 export { default as backgroundImage } from '@/assets/images/background-image.png';

src/component/rain-earthquake/ControlShowDetailComponent.vue

@@ -14,12 +14,21 @@
       useStatusStore().poiLayers.showDangerSource.loading
     "
   />
+
+  <!-- 避难所 -->
+  <EmergencyShelterComponent
+    v-if="
+      useStatusStore().appLoadingCompleted &&
+      useStatusStore().poiLayers.showRefugeeShelter.loading
+    "
+  />
 </template>
 
 <script lang="ts" setup>
   import { useStatusStore } from '@/stores/useStatusStore';
   import HospitalComponent from './HospitalComponent.vue';
   import DangerousSourceComponent from './DangerousSourceComponent.vue';
+  import EmergencyShelterComponent from './EmergencyShelterComponent.vue';
 </script>
 
 <style scoped lang="less"></style>

src/component/rain-earthquake/EmergencyShelterComponent.vue

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

src/config/config.json

@@ -37,6 +37,7 @@
     "hiddenDangerPointId": "hidden-danger-point-",
     "riskPointId": "risk-point-",
     "hospitalPointId": "hospital-point-",
-    "dangerousSourcePointId": "dangerous-source-point-"
+    "dangerousSourcePointId": "dangerous-source-point-",
+    "emergencyShelterPointId": "emergency-shelter-point-"
   }
 }

src/hooks/map/useMap.ts

@@ -57,6 +57,13 @@ export const useMap = () => {
           useLoadingInformationStore().dangerousSource.id = id;
         }
 
+        // 避难所
+        else if (
+          pickedObject.id.startsWith(config.prefix.emergencyShelterPointId)
+        ) {
+          useLoadingInformationStore().emergencyShelter.id = id;
+        }
+
         // 其他
         else {
           // 重置状态

src/hooks/rain-earthquake/useEmergencyShelterPoint.ts

@@ -0,0 +1,30 @@
+import { emergencyShelterIcon } from '@/assets';
+
+/**
+ * 危险源相关钩子函数
+ * @returns
+ */
+export const useEmergencyShelterPoint = () => {
+  /**
+   * 字段映射配置
+   */
+  const field = {
+    name: '避难所名称',
+    type: '避难所类型',
+    address: '地理位置',
+    enterpriseType: '危险源类型',
+    lon: '经度',
+    lat: '纬度',
+    effectiveNumberOfRefugees: '避难所最大容纳人数',
+  };
+
+  /**
+   * 获取避难所图标
+   * @returns 图标路径
+   */
+  function getDisasterIcon(): string {
+    return emergencyShelterIcon;
+  }
+
+  return { field, getDisasterIcon };
+};

src/hooks/rainstorm/useRainDisasterChain.ts

@@ -229,9 +229,7 @@ export const useRainDisasterChain = () => {
         name: '显示避难所',
         statusStore: statusStore.poiLayers,
         statusKey: 'showRefugeeShelter' as const,
-        callback: (status: unknown) => {
-          console.log('显示避难所', status);
-        },
+        callback: layerControl.clickEmergencyShelter,
       },
       {
         name: '显示消防站',

src/hooks/useLayerControl.ts

@@ -29,5 +29,18 @@ export const useLayerControl = () => {
     useStatusStore().poiLayers.showDangerSource.loading = true;
   };
 
-  return { clickHiddenDangerPoint, clickHospital, clickDangerousSource };
+  /**
+   * 点击显示避难所
+   */
+  const clickEmergencyShelter = () => {
+    // 加载状态为true
+    useStatusStore().poiLayers.showRefugeeShelter.loading = true;
+  };
+
+  return {
+    clickHiddenDangerPoint,
+    clickHospital,
+    clickDangerousSource,
+    clickEmergencyShelter,
+  };
 };

src/stores/useLoadingInformation.ts

@@ -60,6 +60,14 @@ export const useLoadingInformationStore = defineStore(
       id: -1,
     });
 
+    // ============================== 避难所状态 ================================
+    const emergencyShelter = reactive({
+      /** 加载状态 */
+      loading: false,
+      /** 避难所ID */
+      id: -1,
+    });
+
     /**
      * 重置所有状态
      */
@@ -83,6 +91,10 @@ export const useLoadingInformationStore = defineStore(
       // 危险源状态重置
       dangerousSource.loading = false;
       dangerousSource.id = -1;
+
+      // 避难所状态重置
+      emergencyShelter.loading = false;
+      emergencyShelter.id = -1;
     };
 
     return {
@@ -91,6 +103,7 @@ export const useLoadingInformationStore = defineStore(
       riskPoint,
       hospital,
       dangerousSource,
+      emergencyShelter,
       resetStatue,
     };
   }

src/types/base/XianEmergencyShelter.ts

@@ -0,0 +1,31 @@
+import type { Point } from './Point';
+
+/**
+ * 西安市应急避难所数据接口
+ */
+export interface XianEmergencyShelter extends Point {
+  /** 避难所时间 */
+  year?: string;
+  /** 避难所区县 */
+  district?: string;
+  /** 避难所名字 */
+  name?: string;
+  /** 避难所地址 */
+  address?: string;
+  /** 避难所类型 */
+  type?: string;
+  /** 避难所性质 */
+  constructionCategory?: string;
+  /** 占地面积 */
+  coverArea?: string;
+  /** 有效占地面积 */
+  effectiveRefugeArea?: string;
+  /** 有效容纳人数 */
+  effectiveNumberOfRefugees?: string;
+  /** 经度 */
+  lon?: number;
+  /** 纬度 */
+  lat?: number;
+  /** 逻辑删除标识，0未删除，1已删除 */
+  isDelete?: number;
+}

src/types/common/LoadingResourceType.ts

@@ -19,4 +19,7 @@ export enum LoadingResource {
 
   /** 危险源 */
   DANGEROUS_SOURCE = 'DANGEROUS_SOURCE',
+
+  /** 避难所 */
+  EMERGENCY_SHELTER = 'EMERGENCY_SHELTER',
 }