添加崩塌隐患点

src/assets/index.ts

@@ -2,6 +2,7 @@
 
 // 图标
 export { default as landslideIcon } from '@/assets/images/icon/landslide.png';
+export { default as collapseIcon } from '@/assets/images/icon/collapse.png';
 export { default as waterLoggingIcon } from '@/assets/images/icon/waterlogging.png';
 export { default as debrisFlowIcon } from '@/assets/images/icon/debris-flow.png';
 export { default as flashFloodIcon } from '@/assets/images/icon/flash-flood.png';

src/component/rain-earthquake/BasicComponent.vue

@@ -14,6 +14,14 @@
         "
       />
 
+      <!-- 崩塌隐患点 -->
+      <CollapseComponent
+        v-if="
+          statusStore.appLoadingCompleted &&
+          statusStore.poiLayers.showCollapseHiddenPoint.loading
+        "
+      />
+
       <!-- 泥石流隐患点 -->
       <DebrisFlowComponent
         v-if="
@@ -57,6 +65,14 @@
         "
       />
 
+      <!-- 崩塌隐患点 -->
+      <CollapseComponent
+        v-if="
+          statusStore.appLoadingCompleted &&
+          statusStore.poiLayers.showCollapseHiddenPoint.loading
+        "
+      />
+
       <!-- 泥石流隐患点 -->
       <DebrisFlowComponent
         v-if="
@@ -81,6 +97,7 @@
   import { DisasterType } from '@/types/common/DisasterType.ts';
   import RiskPointComponent from '@/component/rain-earthquake/basic/RiskPointComponent.vue';
   import LandslideComponent from '@/component/rain-earthquake/basic/LandslideComponent.vue';
+  import CollapseComponent from '@/component/rain-earthquake/basic/CollapseComponent.vue';
   import DebrisFlowComponent from '@/component/rain-earthquake/basic/DebrisFlowComponent.vue';
   import WaterLoggingComponent from '@/component/rain-earthquake/basic/WaterLoggingComponent.vue';
   import FlashFloodComponent from '@/component/rain-earthquake/basic/FlashFloodComponent.vue';

src/component/rain-earthquake/basic/CollapseComponent.vue

@@ -0,0 +1,128 @@
+<!-- 崩塌隐患点组件 -->
+<template>
+  <div>
+    <!-- 加载崩塌隐患点 -->
+    <LoadingPoints
+      v-if="statusStore.appLoadingCompleted && collapsePoints.length > 0"
+      :base-points="collapsePoints"
+      :get-disaster-icon="getDisasterIcon"
+      :prefix="config.prefix.collapseHiddenPointId"
+      :is-default="true"
+      :loading-resource-field="LoadingResource.COLLAPSE_HIDDEN_POINT"
+    />
+
+    <!-- 显示信息框 -->
+    <InformationBox
+      :data="collapsePointDetail as Record<string, any>"
+      :field="field"
+      v-if="loadingInformationStore.collapseHiddenPoint.loading"
+      :title="informationBoxTitle"
+      :offset-x="offsetX"
+      :offset-y="offsetY"
+      :key="loadingInformationStore.collapseHiddenPoint.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 { useHiddenPoint } from '@/hooks/rain-earthquake/useHiddenPoint.ts';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
+  import {
+    PointType,
+    HiddenDangerPointTypeMap,
+  } from '@/types/common/DisasterType.ts';
+
+  const collapsePoints = ref<Point[]>([]);
+
+  const statusStore = useStatusStore();
+  const loadingInformationStore = useLoadingInformationStore();
+  const loadingResourceStore = useLoadingResourceStore();
+
+  const { field, getDisasterIcon } = useHiddenPoint();
+
+  // 信息框相关配置
+  const offsetX = ref(0);
+  const offsetY = ref(0);
+  const collapsePointDetail = ref<Point>();
+  const informationBoxTitle = ref('');
+
+  // 加载崩塌隐患点数据
+  $api.hiddenDangerSpots
+    .getBasePoints(HiddenDangerPointTypeMap[PointType.COLLAPSE])
+    .then((res) => {
+      collapsePoints.value = res.data;
+    });
+
+  // 监听id变化
+  watch(
+    () => loadingInformationStore.collapseHiddenPoint.id,
+    async (newId: number) => {
+      if (newId === -1) {
+        return;
+      }
+      // 获取崩塌隐患点数据
+      const clickObject = loadingInformationStore.clickObject;
+
+      if (!clickObject || !clickObject.primitive) {
+        console.warn('点击对象或图元不存在');
+        return;
+      }
+
+      const res = await $api.hiddenDangerSpots.getPointDetailById(
+        loadingInformationStore.collapseHiddenPoint.id
+      );
+
+      // 更新数据
+      collapsePointDetail.value = res.data;
+      informationBoxTitle.value = res.data.disasterName || '崩塌隐患点信息';
+
+      try {
+        // 将坐标转换为偏移量
+        const screenPos = CesiumUtilsSingleton.convertScreenPosition(
+          clickObject.primitive.position
+        );
+        offsetX.value = screenPos.x;
+        offsetY.value = screenPos.y;
+
+        // 显示新的信息框
+        loadingInformationStore.collapseHiddenPoint.loading = true;
+      } catch (error) {
+        throw new Error(`坐标转换失败:${error}`);
+      }
+    }
+  );
+
+  // 监听显示隐藏
+  watch(
+    () => statusStore.poiLayers.showCollapseHiddenPoint.show,
+    (newValue: boolean) => {
+      if (newValue) {
+        // 显示崩塌隐患点
+        CesiumUtilsSingleton.batchShowPrimitives(
+          loadingResourceStore.getLoadingResource(
+            LoadingResource.COLLAPSE_HIDDEN_POINT
+          ).ids
+        );
+      } else {
+        // 隐藏崩塌隐患点
+        CesiumUtilsSingleton.batchHidePrimitives(
+          loadingResourceStore.getLoadingResource(
+            LoadingResource.COLLAPSE_HIDDEN_POINT
+          ).ids
+        );
+      }
+    }
+  );
+</script>
+
+<style scoped></style>

src/config/config.json

@@ -35,6 +35,7 @@
   },
   "prefix": {
     "landslideHiddenPointId": "landslide-hidden-point-",
+    "collapseHiddenPointId": "collapse-hidden-point-",
     "debrisFlowHiddenPointId": "debris-flow-hidden-point-",
     "waterLoggingHiddenPointId": "water-logging-hidden-point-",
     "flashFloodHiddenPointId": "flash-flood-hidden-point-",

src/hooks/earthquake/useEarthquakeDisasterChain.ts

@@ -4,6 +4,7 @@ import { useLayerControl } from '../rain-earthquake/useLayerControl.ts';
 import {
   debrisFlowIcon,
   landslideIcon,
+  collapseIcon,
   riskAreaIcon,
   earthquakeLineIcon,
   hospitalIcon,
@@ -146,6 +147,18 @@ export const useEarthquakeDisasterChain = () => {
             LoadingResource.DEBRIS_FLOW_HIDDEN_POINT
           ),
       },
+      {
+        name: '崩塌隐患点',
+        statusStore: statusStore.poiLayers,
+        statusKey: 'showCollapseHiddenPoint' as const,
+        callback: layerControl.clickCollapseHiddenPoint,
+        link: collapseIcon,
+        category: ControlPanelCategory.DISASTER_HAZARD,
+        count: () =>
+          resourceStore.getResourceCount(
+            LoadingResource.COLLAPSE_HIDDEN_POINT
+          ),
+      },
       {
         name: '风险点',
         statusStore: statusStore.mapLayers,

src/hooks/map/useMap.ts

@@ -25,6 +25,7 @@ export const useMap = () => {
         // 当id改变时候，重置状态
         if (
           loadingInfoStore.landslideHiddenPoint.id !== id &&
+          loadingInfoStore.collapseHiddenPoint.id !== id &&
           loadingInfoStore.debrisFlowHiddenPoint.id !== id &&
           loadingInfoStore.waterLoggingHiddenPoint.id !== id &&
           loadingInfoStore.flashFloodHiddenPoint.id !== id &&
@@ -43,6 +44,11 @@ export const useMap = () => {
           loadingInfoStore.landslideHiddenPoint.id = id;
         }
 
+        // 崩塌隐患点
+        else if (pickedObject.id.startsWith(config.prefix.collapseHiddenPointId)) {
+          loadingInfoStore.collapseHiddenPoint.id = id;
+        }
+
         // 泥石流隐患点
         else if (pickedObject.id.startsWith(config.prefix.debrisFlowHiddenPointId)) {
           loadingInfoStore.debrisFlowHiddenPoint.id = id;

src/hooks/rain-earthquake/useHiddenPoint.ts

@@ -1,4 +1,5 @@
 import {
+  collapseIcon,
   debrisFlowIcon,
   flashFloodIcon,
   landslideIcon,
@@ -33,6 +34,9 @@ export const useHiddenPoint = () => {
       case 'landslide':
       case '滑坡':
         return landslideIcon;
+      case 'collapse':
+      case '崩塌':
+        return collapseIcon;
       case 'debris_flow':
       case '泥石流':
         return debrisFlowIcon;

src/hooks/rain-earthquake/useLayerControl.ts

@@ -161,6 +161,13 @@ export const useLayerControl = () => {
     statusStore.poiLayers.showLandslideHiddenPoint.loading = true;
   };
 
+  /**
+   * 显示崩塌隐患点
+   */
+  const clickCollapseHiddenPoint = () => {
+    statusStore.poiLayers.showCollapseHiddenPoint.loading = true;
+  };
+
   /**
    * 显示泥石流隐患点
    */
@@ -221,6 +228,7 @@ export const useLayerControl = () => {
     clickReservoir,
     clickSubwayStation,
     clickLandslideHiddenPoint,
+    clickCollapseHiddenPoint,
     clickDebrisFlowHiddenPoint,
     clickWaterLoggingHiddenPoint,
     clickFlashFloodHiddenPoint,

src/hooks/rainstorm/useRainDisasterChain.ts

@@ -4,6 +4,7 @@ import {
   debrisFlowIcon,
   flashFloodIcon,
   landslideIcon,
+  collapseIcon,
   riskAreaIcon,
   waterLoggingIcon,
   hospitalIcon,
@@ -199,6 +200,18 @@ export const useRainDisasterChain = () => {
             LoadingResource.FLASH_FLOOD_HIDDEN_POINT
           ),
       },
+      {
+        name: '崩塌隐患点',
+        statusStore: statusStore.poiLayers,
+        statusKey: 'showCollapseHiddenPoint' as const,
+        callback: layerControl.clickCollapseHiddenPoint,
+        link: collapseIcon,
+        category: ControlPanelCategory.DISASTER_HAZARD,
+        count: () =>
+          resourceStore.getResourceCount(
+            LoadingResource.COLLAPSE_HIDDEN_POINT
+          ),
+      },
       {
         name: '风险点',
         statusStore: statusStore.mapLayers,

src/stores/useLoadingInformation.ts

@@ -114,6 +114,14 @@ export const useLoadingInformationStore = defineStore(
       id: -1,
     });
 
+    // ============================== 崩塌隐患点状态 ================================
+    const collapseHiddenPoint = reactive({
+      /** 加载状态 */
+      loading: false,
+      /** 崩塌隐患点ID */
+      id: -1,
+    });
+
     // ============================== 泥石流隐患点状态 ================================
     const debrisFlowHiddenPoint = reactive({
       /** 加载状态 */
@@ -190,6 +198,10 @@ export const useLoadingInformationStore = defineStore(
       landslideHiddenPoint.loading = false;
       landslideHiddenPoint.id = -1;
 
+      // 崩塌隐患点状态重置
+      collapseHiddenPoint.loading = false;
+      collapseHiddenPoint.id = -1;
+
       // 泥石流隐患点状态重置
       debrisFlowHiddenPoint.loading = false;
       debrisFlowHiddenPoint.id = -1;
@@ -216,6 +228,7 @@ export const useLoadingInformationStore = defineStore(
       reservoir,
       subwayStation,
       landslideHiddenPoint,
+      collapseHiddenPoint,
       debrisFlowHiddenPoint,
       waterLoggingHiddenPoint,
       flashFloodHiddenPoint,

src/stores/useStatusStore.ts

@@ -118,6 +118,11 @@ export const useStatusStore = defineStore('status', () => {
       show: true,
       loading: true,
     },
+    /** 显示崩塌隐患点 */
+    showCollapseHiddenPoint: {
+      show: true,
+      loading: true,
+    },
     /** 显示泥石流隐患点 */
     showDebrisFlowHiddenPoint: {
       show: true,
@@ -278,6 +283,10 @@ export const useStatusStore = defineStore('status', () => {
       show: true,
       loading: true,
     };
+    poiLayers.showCollapseHiddenPoint = {
+      show: true,
+      loading: true,
+    };
     poiLayers.showDebrisFlowHiddenPoint = {
       show: true,
       loading: true,

src/types/common/DisasterType.ts

@@ -14,6 +14,8 @@ export enum DisasterType {
 export enum PointType {
   /** 滑坡 */
   LANDSLIDE = '滑坡',
+  /** 崩塌 */
+  COLLAPSE = '崩塌',
   /** 泥石流 */
   DEBRIS_FLOW = '泥石流',
   /** 内涝 */
@@ -29,6 +31,7 @@ export enum PointType {
  */
 export const HiddenDangerPointTypeMap: Record<PointType, string> = {
   [PointType.LANDSLIDE]: 'landslide',
+  [PointType.COLLAPSE]: 'collapse',
   [PointType.DEBRIS_FLOW]: 'debris_flow',
   [PointType.WATER_LOGGING]: 'water_logging',
   [PointType.FLASH_FLOOD]: 'flash_flood',

src/types/common/LoadingResourceType.ts

@@ -47,6 +47,11 @@ export enum LoadingResource {
    */
   LANDSLIDE_HIDDEN_POINT = 'LANDSLIDE_HIDDEN_POINT',
 
+  /**
+   * 崩塌隐患点
+   */
+  COLLAPSE_HIDDEN_POINT = 'COLLAPSE_HIDDEN_POINT',
+
   /**
    * 泥石流隐患点
    */