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

src/api/api.ts

@@ -1,8 +1,10 @@
 import type { DisasterType } from '@/types/common/DisasterType'
 import { getSm2PublicKey } from './crypto'
-import { getBasePoins, getPointDetailById } from './hidden-danger-spots'
+import { getBasePoins as getHiddenDangerBasePoints, getPointDetailById as getHiddenDangerPointDetailById} from './hidden-danger-spots'
+import { getBasePoins as getRiskBasePoints, getPointDetailById as getRiskPointDetailById} from './risk-spots'
 import type { ApiResponse } from '@/types/ApiResponse'
 import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots'
+import type { XianRiskSpots } from '@/types/base/XianRiskSpots'
 
 export const $api = {
 
@@ -15,9 +17,18 @@ export const $api = {
   // 隐患点信息
   hiddenDangerSpots: {
     // 获取所有基础隐患点
-    getBasePoins: (disasterType: DisasterType): Promise<ApiResponse<XianHiddenDangerSpots[]>> => getBasePoins(disasterType),
+    getBasePoins: (disasterType: DisasterType): Promise<ApiResponse<XianHiddenDangerSpots[]>> => getHiddenDangerBasePoints(disasterType),
 
     // 根据id获取隐患点详情
-    getPointDetailById: (id: number): Promise<ApiResponse<XianHiddenDangerSpots>> => getPointDetailById(id),
+    getPointDetailById: (id: number): Promise<ApiResponse<XianHiddenDangerSpots>> => getHiddenDangerPointDetailById(id),
+  },
+
+  // 风险点信息
+  riskSpots: {
+    // 获取所有基础风险点
+    getBasePoins: (): Promise<ApiResponse<XianRiskSpots[]>> => getRiskBasePoints(),
+
+    // 根据id获取风险点详情
+    getPointDetailById: (id: number): Promise<ApiResponse<XianRiskSpots>> => getRiskPointDetailById(id),
   },
 }

src/api/hidden-danger-spots.ts

@@ -4,7 +4,7 @@ import type { DisasterType } from "@/types/common/DisasterType"
 import httpInstance from "@/utils/request/http"
 
 /**
- * 获取隐藏危险点数据
+ * 获取隐患点数据
  * @param disasterType 灾害类型
  * @returns 隐患点数据
  */
@@ -18,7 +18,7 @@ export const getBasePoins = (disasterType: DisasterType): Promise<ApiResponse<Xi
 
 /**
  * 根据id获取隐患点详情
- * @param id 隐藏危险点id
+ * @param id 隐患点id
  * @returns 隐患点详情
  */
 export const getPointDetailById = (id: number): Promise<ApiResponse<XianHiddenDangerSpots>> => {

src/api/risk-spots.ts

@@ -0,0 +1,20 @@
+import type { ApiResponse } from "@/types/ApiResponse"
+import type { XianRiskSpots } from "@/types/base/XianRiskSpots"
+import httpInstance from "@/utils/request/http"
+
+/**
+ * 获取风险点数据
+ * @returns 风险点数据
+ */
+export const getBasePoins = (): Promise<ApiResponse<XianRiskSpots[]>> => {
+    return httpInstance.get('/risk-spots/base-points')
+}
+
+/**
+ * 根据id获取风险点详情
+ * @param id 风险点id
+ * @returns 风险点详情
+ */
+export const getPointDetailById = (id: number): Promise<ApiResponse<XianRiskSpots>> => {
+    return httpInstance.get(`/risk-spots/point-detail/${id}`)
+}

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()) {
+    useLoadingInformationStore().resetStatue()
-        CesiumUtilsSingleton.clearAllResources('all')
-    }
 })
 
 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"
+    <LoadingPoints v-if="useViewerStore().getViewerLoadingCompleted() && baseHiddenPoints.length > 0"
-      :get-disaster-icon="getDisasterIcon" />
+      :base-points="baseHiddenPoints" :get-disaster-icon="getDisasterIcon"
+      :prefix="config.prefix.hiddenDangerPointId" />
 
     <!-- 显示信息框 -->
-    <InformationBox 
+    <InformationBox :data='hiddenDangerPointDetail as Record<string, any>' :field="field"
-      :data='hiddenDangerPointDetail as Record<string, any>' 
+      v-if="useLoadingInformationStore().getLoadingHiddenPointInformationStatus()" :title="informationBoxTitle"
-      :field="field"
+      :offset-x="offsetX" :offset-y="offsetY" :key="useLoadingInformationStore().getHiddenPointId()" />
-      v-if="showInformationBox" 
-      :title="informationBoxTitle" 
-      :offset-x="offsetX" 
-      :offset-y="offsetY"
-      :key="clickHiddenDangerPointId" />
   </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) => {
+// 监听id变化
-  const obj: { id: string, primitive: Billboard } = pickedObject as { id: string, primitive: Billboard }
+watch(() => useLoadingInformationStore().getHiddenPointId(), async (newId: number) => {
 
-  if (obj && Object.hasOwn(obj, 'id') && (typeof obj.id == 'string') && obj.id.includes(config.prefix.hiddenDangerPointId)) {
+  if (newId === -1) {
-    const matchResult = obj.id.match(/\d+$/)
+    return
-    clickHiddenDangerPointId.value = matchResult ? parseInt(matchResult[0]) : -1
+  }
 
-    try {
+  // 获取隐患点数据
-      // 先隐藏旧的信息框
+  const clickObject = useLoadingInformationStore().getClickObject();
-      showInformationBox.value = false
 
-      // 获取隐患点数据
+  if (!clickObject || !clickObject.primitive) {
-      const res = await $api.hiddenDangerSpots.getPointDetailById(clickHiddenDangerPointId.value)
+    console.warn('点击对象或图元不存在');
+    return;
+  }
 
-      // 等待一帧，确保旧组件已销毁
+  const res = await $api.hiddenDangerSpots.getPointDetailById(useLoadingInformationStore().getHiddenPointId());
-      await new Promise(resolve => setTimeout(resolve, 0))
 
-      // 更新数据
+  // 更新数据
-      hiddenDangerPointDetail.value = res.data
+  hiddenDangerPointDetail.value = res.data;
-      informationBoxTitle.value = res.data.disasterType + '隐患点'
+  informationBoxTitle.value = res.data.disasterType + '隐患点';
 
-      // 将坐标转换为偏移量
+  try {
-      const screenPos = CesiumUtilsSingleton.convertScreenPosition(obj.primitive.position)
+    // 将坐标转换为偏移量
-      offsetX.value = screenPos.x
+    const screenPos = CesiumUtilsSingleton.convertScreenPosition(clickObject.primitive.position);
-      offsetY.value = screenPos.y
+    offsetX.value = screenPos.x;
+    offsetY.value = screenPos.y;
 
-      // 显示新的信息框
+    // 显示新的信息框
-      showInformationBox.value = true
+    useLoadingInformationStore().setLoadingHiddenPointInformationStatus(true);
-    } catch (error) {
+  } catch (error) {
-      showInformationBox.value = false
+    throw new Error(`坐标转换失败:${error}`);
-      throw new Error(`获取隐患点数据失败: ${error}`);
-    }
-  } else {
-    showInformationBox.value = false
-    clickHiddenDangerPointId.value = -1
   }
 })
 </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[],
+    basePoints: Point[]
-    getDisasterIcon: (disasterType: string) => string
+    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>

src/hooks/usePointsHandle.ts

@@ -2,7 +2,6 @@ import type { Point } from "@/types/base/Point";
 import type { PrimitiveOptions } from "@/types/cesium/PrimitiveOptions";
 import { CesiumUtilsSingleton } from "@/utils/cesium/CesiumUtils";
 import { Cartesian3, HorizontalOrigin, NearFarScalar, VerticalOrigin } from "cesium";
-import config from '@/config/config.json'
 
 /**
  * 公共批量处理点钩子函数
@@ -14,9 +13,10 @@ export const usePointsHandle = () => {
      * 添加点
      * @param points - 点数据
      * @param getDisasterIcon - 获取灾害图标的函数
+     * @param prefix - 前缀
      * @returns 点的ID列表
      */
-    function addPoints(points: Point[], getDisasterIcon: (disasterType: string) => string): string[] {
+    function addPoints(points: Point[], getDisasterIcon: (disasterType?: string) => string, prefix: string): string[] {
         // 设置加载配置
         const options: PrimitiveOptions[] = [];
 
@@ -26,15 +26,14 @@ export const usePointsHandle = () => {
         points.forEach(point => {
             try {
 
-                if (point.lon === undefined || point.lat === undefined || point.disasterType === undefined) {
+                if (point.lon === undefined || point.lat === undefined) {
-                    throw new Error(`点位数据缺少经纬度或者灾害类型:${point.id}`);
+                    throw new Error(`点位数据缺少经纬度:${point.id}`);
                 }
-                // 将经纬度转换为笛卡尔坐标
+                // 将经纬度转换为笛卡尔坐标，太高一点高度，方便点击
-                const position = Cartesian3.fromDegrees(point.lon, point.lat, 0);
+                const position = Cartesian3.fromDegrees(point.lon, point.lat, 10);
 
-                const id = `${config.prefix.hiddenDangerPointId}${point.id}`
+                const id = `${prefix}${point.id}`
                 ids.push(id)
-
                 options.push({
                     id: id,
                     type: 'billboard',
@@ -51,10 +50,9 @@ export const usePointsHandle = () => {
                     },
                 });
             } catch (error) {
-                throw new Error(`处理点位失败:${point.id}`);
+                throw new Error(`处理点位失败:${error}`);
             }
         })
-
         // 批量创建图层
         CesiumUtilsSingleton.addPrimitivesBatch(options);
 

src/stores/useLoadingInformation.ts

@@ -0,0 +1,52 @@
+import { Billboard } from 'cesium'
+import { defineStore } from 'pinia'
+import { type Ref, ref } from 'vue'
+
+/**
+ * 加载信息弹窗相关参数
+ */
+export const useLoadingInformationStore = defineStore('loadingInformation', () => {
+
+    // 点击的对象
+    const clickObject: Ref<{ primitive: Billboard | null }> = ref({ primitive: null })
+
+    // 隐患点
+    const loadingHiddenPointInformationStatus: Ref<boolean> = ref(false)
+    const hiddenPointId: Ref<number> = ref(-1)
+
+    // 风险点
+    const loadingRiskPointInformationStatus: Ref<boolean> = ref(false)
+    const riskPointId: Ref<number> = ref(-1)
+
+    // 重置状态
+    const resetStatue = () => {
+        loadingHiddenPointInformationStatus.value = false
+        hiddenPointId.value = -1
+        loadingRiskPointInformationStatus.value = false
+        riskPointId.value = -1
+    }
+
+    // get/set方法
+    const getClickObject = () => clickObject.value
+    const setClickObject = (value: {primitive: Billboard}) => {
+        clickObject.value = value
+    }
+    const getLoadingHiddenPointInformationStatus = () => loadingHiddenPointInformationStatus.value
+    const setLoadingHiddenPointInformationStatus = (value: boolean) => {
+        loadingHiddenPointInformationStatus.value = value
+    }
+    const getLoadingRiskPointInformationStatus = () => loadingRiskPointInformationStatus.value
+    const setLoadingRiskPointInformationStatus = (value: boolean) => {
+        loadingRiskPointInformationStatus.value = value
+    }
+    const getHiddenPointId = () => hiddenPointId.value
+    const setHiddenPointId = (value: number) => {
+        hiddenPointId.value = value
+    }
+    const getRiskPointId = () => riskPointId.value
+    const setRiskPointId = (value: number) => {
+        riskPointId.value = value
+    }
+
+    return { resetStatue, getClickObject, setClickObject, getLoadingHiddenPointInformationStatus, setLoadingHiddenPointInformationStatus, getLoadingRiskPointInformationStatus, setLoadingRiskPointInformationStatus, getHiddenPointId, setHiddenPointId, getRiskPointId, setRiskPointId }
+})

src/types/base/XianRiskSpots.ts

@@ -0,0 +1,42 @@
+import type { Point } from "./Point";
+
+export interface XianRiskSpots extends Point {
+    /** 风险区名称 */
+    riskName?: string;
+    /** 统一编号 */
+    unitCode?: string;
+    /** 风险区等级 */
+    riskLevel?: string;
+    /** 面积 */
+    area?: number;
+    /** 省 */
+    province?: string;
+    /** 市 */
+    city?: string;
+    /** 县 */
+    county?: string;
+    /** 乡 */
+    country?: string;
+    /** 村 */
+    village?: string;
+    /** 位置 */
+    position?: string;
+    /** 居民户数（户） */
+    residentCounts?: number;
+    /** 居民人口（人） */
+    addressPopulation?: number;
+    /** 威胁财产（万元） */
+    riskProperty?: number;
+    /** 常住人口（人） */
+    permanentPopulation?: number;
+    /** 住房（间） */
+    housing?: number;
+    /** 巡查员姓名 */
+    inspectorName?: string;
+    /** 巡查员电话 */
+    inspectorTele?: string;
+    /** 空间 */
+    geom?: any;          
+    /** 逻辑删除标识，0未删除，1已删除 */
+    isDelete?: number;
+}

src/utils/cesium/CesiumUtils.ts

@@ -410,7 +410,6 @@ export class CesiumUtils {
     handler.setInputAction((clickEvent: {position: Cartesian2}) => {
       // 在点击位置进行拾取
       const pickedObject = CesiumUtilsSingleton.getViewer()?.scene.pick(clickEvent.position);
-
       callback(pickedObject);
     }, ScreenSpaceEventType.LEFT_CLICK);
   }

src/views/home/earthquake/Earthquake.vue

@@ -1,12 +1,16 @@
 <template>
   <div>
-    <BasicComponent :disaster-type="DisasterType.EARTHQUAKE" :key="DisasterType.EARTHQUAKE"/>
+    <BasicComponent :disaster-type="DisasterType.EARTHQUAKE" :key="route.fullPath"/>
   </div>
 </template>
 
 <script setup lang="ts">
 import BasicComponent from '@/component/rain-earthquake/BasicComponent.vue';
 import { DisasterType } from '@/types/common/DisasterType';
+import { useRoute } from 'vue-router';
+
+
+const route = useRoute();
 </script>
 
 <style scoped></style>

src/views/home/rainstorm/Rainstorm.vue

@@ -1,12 +1,15 @@
 <template>
   <div>
-    <BasicComponent :disaster-type="DisasterType.RAINSTORM" :key="DisasterType.EARTHQUAKE"/>
+    <BasicComponent :disaster-type="DisasterType.RAINSTORM"  :key="route.fullPath"/>
   </div>
 </template>
 
 <script setup lang="ts">
 import BasicComponent from '@/component/rain-earthquake/BasicComponent.vue';
 import { DisasterType } from '@/types/common/DisasterType';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
 </script>
 
 <style scoped></style>