重构风险点隐患点显示逻辑

src/component/map/Map.vue

@@ -11,15 +11,14 @@ import config from '@/config/config.json';
 import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
 import AdministrativeDivision from './AdministrativeDivision.vue';
 import { useViewerStore } from '@/stores/useViewerStore';
+import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
 
 onBeforeMount(() => {
     // 初始化为false
     useViewerStore().setViewerLoadingCompleted(false)
 
-    // 清除viewer相关资源
-    if (CesiumUtilsSingleton.getViewer()) {
-        CesiumUtilsSingleton.clearAllResources('all')
-    }
+    // 重置状态
+    useLoadingInformationStore().resetStatue()
 })
 
 onMounted(() => {
@@ -27,6 +26,38 @@ onMounted(() => {
         containerId: 'map-container'
     })
 
+    // 注册全局点击监听器
+    CesiumUtilsSingleton.clickLayer((pickedObject: any) => {
+        if (pickedObject && pickedObject.id && (typeof pickedObject.id === 'string')) {
+            const matchResult = pickedObject.id.match(/\d+$/)
+            const id = matchResult ? parseInt(matchResult[0]) : -1
+
+            // 当id改变时候，重置状态
+            if (useLoadingInformationStore().getHiddenPointId() !== id && useLoadingInformationStore().getRiskPointId() !== id) {
+                useLoadingInformationStore().resetStatue()
+            }
+
+            // 点击对象
+            useLoadingInformationStore().setClickObject(pickedObject)
+
+            // 隐患点
+            if (pickedObject.id.startsWith(config.prefix.hiddenDangerPointId)) {
+                useLoadingInformationStore().setHiddenPointId(id)
+            }
+
+            // 风险点
+            else if (pickedObject.id.startsWith(config.prefix.riskPointId)) {
+                useLoadingInformationStore().setRiskPointId(id)
+            }else {
+                // 重置状态
+                useLoadingInformationStore().resetStatue()
+            }
+        } else {
+            // 重置状态
+            useLoadingInformationStore().resetStatue()
+        }
+    })
+
     // 更新完成状态
     useViewerStore().setViewerLoadingCompleted(true)
     CesiumUtilsSingleton.viewToTarget(config.defaultPosition as [number, number, number]);

src/component/rain-earthquake/BasicComponent.vue

@@ -5,10 +5,10 @@
     <MapComponent />
 
     <!-- 隐患点组件 -->
-    <HiddenPointComponent :disaster-type="props.disasterType" />
+    <HiddenPointComponent :disaster-type="props.disasterType" v-if="useViewerStore().getViewerLoadingCompleted()"/>
 
     <!-- 风险点组件 -->
-
+    <RiskPointComponent v-if="useViewerStore().getViewerLoadingCompleted()"/>
   </div>
 </template>
 
@@ -16,6 +16,8 @@
 import MapComponent from "@/component/map/Map.vue"
 import type { DisasterType } from "@/types/common/DisasterType";
 import HiddenPointComponent from "./HiddenPointComponent.vue";
+import RiskPointComponent from "./RiskPointComponent.vue";
+import { useViewerStore } from "@/stores/useViewerStore";
 
 // 获取父组件传递德数据
 const props = defineProps<{

src/component/rain-earthquake/HiddenPointComponent.vue

@@ -2,24 +2,20 @@
 <template>
   <div>
     <!-- 加载基础隐患点 -->
-    <LoadingPoints v-if="useViewerStore().getViewerLoadingCompleted() && baseHiddenPoints.length > 0" :base-points="baseHiddenPoints"
-      :get-disaster-icon="getDisasterIcon" />
+    <LoadingPoints v-if="useViewerStore().getViewerLoadingCompleted() && baseHiddenPoints.length > 0"
+      :base-points="baseHiddenPoints" :get-disaster-icon="getDisasterIcon"
+      :prefix="config.prefix.hiddenDangerPointId" />
 
     <!-- 显示信息框 -->
-    <InformationBox 
-      :data='hiddenDangerPointDetail as Record<string, any>' 
-      :field="field"
-      v-if="showInformationBox" 
-      :title="informationBoxTitle" 
-      :offset-x="offsetX" 
-      :offset-y="offsetY"
-      :key="clickHiddenDangerPointId" />
+    <InformationBox :data='hiddenDangerPointDetail as Record<string, any>' :field="field"
+      v-if="useLoadingInformationStore().getLoadingHiddenPointInformationStatus()" :title="informationBoxTitle"
+      :offset-x="offsetX" :offset-y="offsetY" :key="useLoadingInformationStore().getHiddenPointId()" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { DisasterType } from "@/types/common/DisasterType";
-import { ref } from "vue";
+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";
@@ -27,12 +23,11 @@ import landslide from '@/assets/images/icon/landslide.png';
 import debrisFlow from '@/assets/images/icon/debris-flow.png';
 import flashFlood from '@/assets/images/icon/flash-flood.png';
 import waterlogging from '@/assets/images/icon/waterlogging.png';
-import { CesiumUtilsSingleton } from "@/utils/cesium/CesiumUtils";
 import config from '@/config/config.json'
 import InformationBox from "@/component/common/InformationBox.vue";
-import type { Billboard } from "cesium";
 import { useViewerStore } from "@/stores/useViewerStore";
-
+import { useLoadingInformationStore } from "@/stores/useLoadingInformation";
+import { CesiumUtilsSingleton } from "@/utils/cesium/CesiumUtils";
 
 const props = defineProps<{
   disasterType: DisasterType
@@ -40,9 +35,6 @@ const props = defineProps<{
 
 const baseHiddenPoints = ref<Point[]>([]);
 
-const clickHiddenDangerPointId = ref(-1);
-
-const showInformationBox = ref(false);
 const informationBoxTitle = ref('')
 const offsetX = ref(0)
 const offsetY = ref(0)
@@ -61,56 +53,52 @@ $api.hiddenDangerSpots.getBasePoins(props.disasterType).then((res) => {
   baseHiddenPoints.value = res.data
 })
 
-CesiumUtilsSingleton.clickLayer(async (pickedObject: object) => {
-  const obj: { id: string, primitive: Billboard } = pickedObject as { id: string, primitive: Billboard }
+// 监听id变化
+watch(() => useLoadingInformationStore().getHiddenPointId(), async (newId: number) => {
 
-  if (obj && Object.hasOwn(obj, 'id') && (typeof obj.id == 'string') && obj.id.includes(config.prefix.hiddenDangerPointId)) {
-    const matchResult = obj.id.match(/\d+$/)
-    clickHiddenDangerPointId.value = matchResult ? parseInt(matchResult[0]) : -1
+  if (newId === -1) {
+    return
+  }
 
-    try {
-      // 先隐藏旧的信息框
-      showInformationBox.value = false
-      
-      // 获取隐患点数据
-      const res = await $api.hiddenDangerSpots.getPointDetailById(clickHiddenDangerPointId.value)
-      
-      // 等待一帧，确保旧组件已销毁
-      await new Promise(resolve => setTimeout(resolve, 0))
-      
-      // 更新数据
-      hiddenDangerPointDetail.value = res.data
-      informationBoxTitle.value = res.data.disasterType + '隐患点'
+  // 获取隐患点数据
+  const clickObject = useLoadingInformationStore().getClickObject();
 
-      // 将坐标转换为偏移量
-      const screenPos = CesiumUtilsSingleton.convertScreenPosition(obj.primitive.position)
-      offsetX.value = screenPos.x
-      offsetY.value = screenPos.y
-      
-      // 显示新的信息框
-      showInformationBox.value = true
-    } catch (error) {
-      showInformationBox.value = false
-      throw new Error(`获取隐患点数据失败: ${error}`);
-    }
-  } else {
-    showInformationBox.value = false
-    clickHiddenDangerPointId.value = -1
+  if (!clickObject || !clickObject.primitive) {
+    console.warn('点击对象或图元不存在');
+    return;
+  }
+
+  const res = await $api.hiddenDangerSpots.getPointDetailById(useLoadingInformationStore().getHiddenPointId());
+
+  // 更新数据
+  hiddenDangerPointDetail.value = res.data;
+  informationBoxTitle.value = res.data.disasterType + '隐患点';
+
+  try {
+    // 将坐标转换为偏移量
+    const screenPos = CesiumUtilsSingleton.convertScreenPosition(clickObject.primitive.position);
+    offsetX.value = screenPos.x;
+    offsetY.value = screenPos.y;
+
+    // 显示新的信息框
+    useLoadingInformationStore().setLoadingHiddenPointInformationStatus(true);
+  } catch (error) {
+    throw new Error(`坐标转换失败:${error}`);
   }
 })
 </script>
 
 <script lang="ts">
-function getDisasterIcon(disasterType: string): string {
+function getDisasterIcon(disasterType?: string): string {
   switch (disasterType) {
     case '滑坡':
       return landslide
     case '泥石流':
       return debrisFlow
     case '内涝':
-      return flashFlood
-    case "山洪":
       return waterlogging
+    case "山洪":
+      return flashFlood
     default:
       throw new Error(`未知的灾害类型: ${disasterType}`);
   }

src/component/rain-earthquake/LoadingPoints.vue

@@ -10,8 +10,9 @@ import type { Point } from '@/types/base/Point';
 
 // 属性
 const props = defineProps<{
-    basePoints: Point[],
-    getDisasterIcon: (disasterType: string) => string
+    basePoints: Point[]
+    getDisasterIcon: (disasterType?: string) => string
+    prefix: string
 }>();
 
 // 点处理钩子
@@ -19,7 +20,7 @@ const pointsHandle = usePointsHandle()
 
 onMounted(() => {
     // 加载点
-    pointsHandle.addPoints(props.basePoints, props.getDisasterIcon)
+    pointsHandle.addPoints(props.basePoints, props.getDisasterIcon, props.prefix)
 })
 </script>
 

src/component/rain-earthquake/RiskPointComponent.vue

@@ -0,0 +1,90 @@
+<!-- 风险点组件 -->
+<template>
+    <div>
+        <!-- 加载风险点 -->
+        <LoadingPoints v-if="useViewerStore().getViewerLoadingCompleted() && riskPoints.length > 0"
+            :base-points="riskPoints" :get-disaster-icon="getDisasterIcon" :prefix="config.prefix.riskPointId" />
+
+        <!-- 显示信息框 -->
+        <InformationBox :data='riskPointDetail as Record<string, any>' :field="field"
+            v-if="useLoadingInformationStore().getLoadingRiskPointInformationStatus()" :title="informationBoxTitle"
+            :offset-x="offsetX" :offset-y="offsetY" :key="useLoadingInformationStore().getRiskPointId()" />
+    </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 riskArea from '@/assets/images/icon/risk-area.png';
+import config from '@/config/config.json'
+import InformationBox from "@/component/common/InformationBox.vue";
+import { useViewerStore } from "@/stores/useViewerStore";
+import { useLoadingInformationStore } from "@/stores/useLoadingInformation";
+import { CesiumUtilsSingleton } from "@/utils/cesium/CesiumUtils";
+
+const riskPoints = ref<Point[]>([]);
+
+const informationBoxTitle = '风险区域'
+const offsetX = ref(0)
+const offsetY = ref(0)
+const riskPointDetail = ref<Point>()
+
+const field = {
+    riskName: '风险区名称',
+    unitCode: '统一编号',
+    housing: '住房（间）',
+    permanentPopulation: '常住人口（人）',
+    residentCounts: '居民户数（户）',
+    riskProperty: '威胁财产（万元）',
+    inspectorName: '巡查员姓名',
+    inspectorTele: '巡查员手机号',
+    position: '位置',
+    lon: '经度',
+    lat: '纬度'
+}
+
+$api.riskSpots.getBasePoins().then((res) => {
+    riskPoints.value = res.data
+})
+
+// 监听id变化
+watch(() => useLoadingInformationStore().getRiskPointId(), async (newId: number) => {
+    if (newId === -1) {
+        return
+    }
+    // 获取风险点数据
+    const clickObject = useLoadingInformationStore().getClickObject();
+
+    if (!clickObject || !clickObject.primitive) {
+        console.warn('点击对象或图元不存在');
+        return;
+    }
+
+    const res = await $api.riskSpots.getPointDetailById(useLoadingInformationStore().getRiskPointId());
+
+    // 更新数据
+    riskPointDetail.value = res.data;
+
+    try {
+        // 将坐标转换为偏移量
+        const screenPos = CesiumUtilsSingleton.convertScreenPosition(clickObject.primitive.position);
+        offsetX.value = screenPos.x;
+        offsetY.value = screenPos.y;
+
+        // 显示新的信息框
+        useLoadingInformationStore().setLoadingRiskPointInformationStatus(true);
+    } catch (error) {
+        throw new Error(`坐标转换失败:${error}`);
+    }
+})
+</script>
+
+<script lang="ts">
+function getDisasterIcon(): string {
+    return riskArea;
+}
+</script>
+
+<style scoped></style>