隐患点

components.d.ts

@@ -11,6 +11,11 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

package.json

@@ -13,7 +13,7 @@
     "@types/spark-md5": "^3.0.5",
     "axios": "^1.12.2",
     "cesium": "1.101.0",
-    "element-plus": "^2.11.7",
+    "element-plus": "^2.13.6",
     "gm-crypto": "^0.1.12",
     "pinia": "^3.0.3",
     "spark-md5": "^3.0.2",

pnpm-lock.yaml

@@ -21,7 +21,7 @@ importers:
         specifier: 1.101.0
         version: 1.101.0
       element-plus:
-        specifier: ^2.11.7
+        specifier: ^2.13.6
         version: 2.13.6(typescript@6.0.2)(vue@3.5.32(typescript@6.0.2))
       gm-crypto:
         specifier: ^0.1.12

src/App.vue

@@ -2,8 +2,21 @@
   <RouterView></RouterView>
 </template>
 
-<script setup lang="ts" name="App">
+<script setup lang="ts">
 import { RouterView } from 'vue-router'
+import { ElLoading } from 'element-plus'
+import { watch } from 'vue';
+import { useViewerStore } from './stores/useViewerStore';
+const loadingInstanve = ElLoading.service({
+  fullscreen: true,
+  text: '正在加载配置相关资源中...'
+})
+
+watch(() => useViewerStore().getViewerLoadingCompleted(), (val) => {
+  if (val == true) {
+    loadingInstanve.close()
+  }
+})
 </script>
 
 <style>

src/api/api.ts

@@ -1,4 +1,8 @@
+import type { DisasterType } from '@/types/common/DisasterType'
 import { getSm2PublicKey } from './crypto'
+import { getBasePoins, getPointDetailById } from './hidden-danger-spots'
+import type { ApiResponse } from '@/types/ApiResponse'
+import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots'
 
 export const $api = {
 
@@ -7,4 +11,13 @@ export const $api = {
     // 获取sm2公钥
     getSm2PublicKey: () => getSm2PublicKey(),
   },
+
+  // 隐患点信息
+  hiddenDangerSpots: {
+    // 获取所有基础隐患点
+    getBasePoins: (disasterType: DisasterType): Promise<ApiResponse<XianHiddenDangerSpots[]>> => getBasePoins(disasterType),
+
+    // 根据id获取隐患点详情
+    getPointDetailById: (id: number): Promise<ApiResponse<XianHiddenDangerSpots>> => getPointDetailById(id),
+  },
 }

src/api/crypto.ts

@@ -1,11 +1,11 @@
 import type { Sm2PublicKeyResponse } from '@/types/crypto/Sm2PublicKeyResponse'
-import type { Response } from '@/types/Response'
+import type { ApiResponse } from '@/types/ApiResponse'
 import httpInstance from '@/utils/request/http'
 
 /**
  * 获取sm2加密公钥
  * @returns
  */
-export const getSm2PublicKey = (): Promise<Response<Sm2PublicKeyResponse>> => {
+export const getSm2PublicKey = (): Promise<ApiResponse<Sm2PublicKeyResponse>> => {
   return httpInstance.get('/crypto/sm2/public-key')
 }

src/api/hidden-danger-spots.ts

@@ -0,0 +1,26 @@
+import type { ApiResponse } from "@/types/ApiResponse"
+import type { XianHiddenDangerSpots } from "@/types/base/XianHiddenDangerSpots"
+import type { DisasterType } from "@/types/common/DisasterType"
+import httpInstance from "@/utils/request/http"
+
+/**
+ * 获取隐藏危险点数据
+ * @param disasterType 灾害类型
+ * @returns 隐患点数据
+ */
+export const getBasePoins = (disasterType: DisasterType): Promise<ApiResponse<XianHiddenDangerSpots[]>> => {
+    return httpInstance.get('/hidden-danger-spots/base-points', {
+        params: {
+            disasterType
+        }
+    })
+}
+
+/**
+ * 根据id获取隐患点详情
+ * @param id 隐藏危险点id
+ * @returns 隐患点详情
+ */
+export const getPointDetailById = (id: number): Promise<ApiResponse<XianHiddenDangerSpots>> => {
+    return httpInstance.get(`/hidden-danger-spots/point-detail/${id}`)
+}

src/component/common/InformationBox.vue

@@ -0,0 +1,110 @@
+<!-- 内容显示组件 -->
+<template>
+    <div class="infomation-box" :style="{ width: `${width}px`, 'max-height': `${height}px`, top: `${newOffsetY}px`, left: `${newOffsetX}px` }">
+        <header>
+            <div class="title">
+                <h3>{{ title }}</h3>
+            </div>
+        </header>
+        <div class="content">
+            <table class="table">
+                <tr v-for="(tableData, index) in tableDatas" :key="index">
+                    <td class="label">{{ tableData.title }}</td>
+                    <td>{{ tableData.content }}</td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { Utils } from '@/utils/utils';
+import { onMounted, ref, type Ref } from 'vue';
+
+const props = defineProps<{
+    title: string
+    data: Record<string, any>
+    field: Record<string, string>
+    offsetX: number
+    offsetY: number
+}>()
+
+// 定义宽高和偏移
+const width = ref(400)
+const height = ref(450)
+const newOffsetX = ref(props.offsetX)
+const newOffsetY = ref(props.offsetY)
+
+const tableDatas: Ref<{ title: string, content: string }[]> = ref([])
+
+onMounted(() => {
+    // 判断是否超出屏幕，超出就重新定位
+    [newOffsetX.value, newOffsetY.value] = Utils.keepWithinScreen(props.offsetX, props.offsetY, width.value, height.value)
+
+    // 数据转换
+    Object.entries(props.data).forEach(([key, value]) => {
+        // 判读key是不是存在field中，存在就添加到表格数据，不存在则不添加
+        if (Object.hasOwn(props.field, key)) {
+            tableDatas.value.push({
+                title: props.field[key],
+                content: value
+            })
+        }
+    });
+})
+</script>
+
+<style scoped>
+.infomation-box {
+    overflow-y: auto;
+    position: absolute;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.title {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    background-color: rgba(14, 52, 98, 0.95);
+    padding: 2px 15px;
+    border-bottom: 1px solid #e9ecef;
+    box-sizing: border-box;
+    height: 40px;
+}
+
+.title h3 {
+    color: #FFF;
+    font-size: 14px;
+    font-weight: bold;
+    font-family: "Source Han Sans CN";
+}
+
+.content {
+    width: 100%;
+    color: #FFF;
+    background-color: rgba(0, 94, 153, 1);
+}
+
+.table {
+    width: 100%;
+    height: 100%;
+    border-collapse: collapse;
+}
+
+.table tr td {
+    padding: 8px;
+    border-top: 1px solid #000;
+    border-bottom: 1px solid #000;
+    border-left: none;
+    border-right: none;
+    text-align: left;
+    font-family: "Source Han Sans CN";
+    font-size: 13px;
+}
+
+.label {
+    width: 30%;
+    font-size: 13px;
+}
+</style>

src/component/map/Map.vue

@@ -2,23 +2,33 @@
     <div class="map_container" id="map-container"></div>
 
     <!-- 行政区划 -->
-    <AdministrativeDivision v-if="viewerLoadingCompleted"/>
+    <AdministrativeDivision v-if="useViewerStore().getViewerLoadingCompleted()" />
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import { onBeforeMount, onMounted } from 'vue';
 import config from '@/config/config.json';
 import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
 import AdministrativeDivision from './AdministrativeDivision.vue';
+import { useViewerStore } from '@/stores/useViewerStore';
 
-// 指示器加载完成
+onBeforeMount(() => {
-let viewerLoadingCompleted = ref(false);
+    // 初始化为false
+    useViewerStore().setViewerLoadingCompleted(false)
+
+    // 清除viewer相关资源
+    if (CesiumUtilsSingleton.getViewer()) {
+        CesiumUtilsSingleton.clearAllResources('all')
+    }
+})
 
 onMounted(() => {
     CesiumUtilsSingleton.initCesiumViewer({
         containerId: 'map-container'
     })
-    viewerLoadingCompleted.value = true;
+
+    // 更新完成状态
+    useViewerStore().setViewerLoadingCompleted(true)
     CesiumUtilsSingleton.viewToTarget(config.defaultPosition as [number, number, number]);
 })
 

src/component/rain-earthquake/BasicComponent.vue

@@ -0,0 +1,26 @@
+<!-- 基础组件 -->
+<template>
+  <div>
+    <!-- 地图组件 -->
+    <MapComponent />
+
+    <!-- 隐患点组件 -->
+    <HiddenPointComponent :disaster-type="props.disasterType" />
+
+    <!-- 风险点组件 -->
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import MapComponent from "@/component/map/Map.vue"
+import type { DisasterType } from "@/types/common/DisasterType";
+import HiddenPointComponent from "./HiddenPointComponent.vue";
+
+// 获取父组件传递德数据
+const props = defineProps<{
+  disasterType: DisasterType
+}>()
+</script>
+
+<style scoped></style>

src/component/rain-earthquake/HiddenPointComponent.vue

@@ -0,0 +1,120 @@
+<!-- 隐患点组件 -->
+<template>
+  <div>
+    <!-- 加载基础隐患点 -->
+    <LoadingPoints v-if="useViewerStore().getViewerLoadingCompleted() && baseHiddenPoints.length > 0" :base-points="baseHiddenPoints"
+      :get-disaster-icon="getDisasterIcon" />
+
+    <!-- 显示信息框 -->
+    <InformationBox 
+      :data='hiddenDangerPointDetail as Record<string, any>' 
+      :field="field"
+      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 { $api } from "@/api/api.ts";
+import type { Point } from "@/types/base/Point";
+import LoadingPoints from "@/component/rain-earthquake/LoadingPoints.vue";
+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";
+
+
+const props = defineProps<{
+  disasterType: DisasterType
+}>()
+
+const baseHiddenPoints = ref<Point[]>([]);
+
+const clickHiddenDangerPointId = ref(-1);
+
+const showInformationBox = ref(false);
+const informationBoxTitle = ref('')
+const offsetX = ref(0)
+const offsetY = ref(0)
+const hiddenDangerPointDetail = ref<Point>()
+
+const field = {
+  fieldCode: '野外编号',
+  disasterName: '灾害点名称',
+  position: '位置',
+  disasterType: '灾害类型',
+  scaleGrade: '规模等级',
+  riskGrade: '风险等级'
+}
+
+$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 }
+
+  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
+
+    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 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
+  }
+})
+</script>
+
+<script lang="ts">
+function getDisasterIcon(disasterType: string): string {
+  switch (disasterType) {
+    case '滑坡':
+      return landslide
+    case '泥石流':
+      return debrisFlow
+    case '内涝':
+      return flashFlood
+    case "山洪":
+      return waterlogging
+    default:
+      throw new Error(`未知的灾害类型: ${disasterType}`);
+  }
+}
+</script>
+
+<style scoped></style>

src/component/rain-earthquake/LoadingPoints.vue

@@ -0,0 +1,26 @@
+<!-- 加载点的组件 -->
+<template>
+
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import { usePointsHandle } from '@/hooks/usePointsHandle';
+import type { Point } from '@/types/base/Point';
+
+// 属性
+const props = defineProps<{
+    basePoints: Point[],
+    getDisasterIcon: (disasterType: string) => string
+}>();
+
+// 点处理钩子
+const pointsHandle = usePointsHandle()
+
+onMounted(() => {
+    // 加载点
+    pointsHandle.addPoints(props.basePoints, props.getDisasterIcon)
+})
+</script>
+
+<style scoped></style>

src/config/config.json

@@ -12,5 +12,10 @@
     "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1ZDBjZjAxOS0wMDhhLTRmZjEtYjNmOC1iNmM2ZmY2ZmQ1N2IiLCJpZCI6MjAxMDI1LCJpYXQiOjE3MTAxNTgxNjJ9.mdbJYEzXQkBnHNqpozz7MvZjJ_X9a3JZRGPA-ytGhLI",
     "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiNjczZTVlMy1kNDEwLTRhZWItYWM0NS1mNjYxMzJjODMwYTQiLCJpZCI6MzIxMzI2LCJpYXQiOjE3NzU2NDU1OTd9._MPcZQsxK1dGPl8IMVhKHV3PIPu4-TaOUgzsUUOP6WE"
   ],
-  "defaultPosition": [108.948024, 34.263161, 200000]
+  "defaultPosition": [108.948024, 34.263161, 300000],
+
+  "prefix": {
+    "hiddenDangerPointId": "hidden-danger-point-",
+    "riskPointId": "risk-point-"
+  }
 }

src/hooks/usePointsHandle.ts

@@ -0,0 +1,65 @@
+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'
+
+/**
+ * 公共批量处理点钩子函数
+ */
+export const usePointsHandle = () => {
+
+
+    /**
+     * 添加点
+     * @param points - 点数据
+     * @param getDisasterIcon - 获取灾害图标的函数
+     * @returns 点的ID列表
+     */
+    function addPoints(points: Point[], getDisasterIcon: (disasterType: string) => string): string[] {
+        // 设置加载配置
+        const options: PrimitiveOptions[] = [];
+
+        // 存放id
+        const ids: string[] = [];
+
+        points.forEach(point => {
+            try {
+
+                if (point.lon === undefined || point.lat === undefined || point.disasterType === undefined) {
+                    throw new Error(`点位数据缺少经纬度或者灾害类型:${point.id}`);
+                }
+                // 将经纬度转换为笛卡尔坐标
+                const position = Cartesian3.fromDegrees(point.lon, point.lat, 0);
+
+                const id = `${config.prefix.hiddenDangerPointId}${point.id}`
+                ids.push(id)
+
+                options.push({
+                    id: id,
+                    type: 'billboard',
+                    positions: [position],
+                    image: getDisasterIcon(point.disasterType),
+                    scale: 0.8,
+                    width: 40,
+                    isDefault: false,
+                    scaleByDistance: new NearFarScalar(500, 1, 5e5, 0.3),
+                    customProperties: {
+                        verticalOrigin: VerticalOrigin.BOTTOM,
+                        horizontalOrigin: HorizontalOrigin.CENTER,
+                        height: 40
+                    },
+                });
+            } catch (error) {
+                throw new Error(`处理点位失败:${point.id}`);
+            }
+        })
+
+        // 批量创建图层
+        CesiumUtilsSingleton.addPrimitivesBatch(options);
+
+        return ids
+    }
+
+    return { addPoints}
+}

src/stores/useViewerStore.ts

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia'
+import { type Ref, ref } from 'vue'
+
+export const useViewerStore = defineStore('viewer', () => {
+    // viewer完成状态
+    const viewerLoadingCompleted: Ref<boolean> = ref(false)
+
+    // get/set方法
+    const getViewerLoadingCompleted = () => viewerLoadingCompleted.value
+    const setViewerLoadingCompleted = (value: boolean) => {
+        viewerLoadingCompleted.value = value
+    }
+
+  return { getViewerLoadingCompleted, setViewerLoadingCompleted }
+})

src/types/ApiResponse.ts

@@ -1,4 +1,4 @@
-export interface Response<T = unknown> {
+export interface ApiResponse<T = unknown> {
   code: number
   message: string
   data: T

src/types/base/Point.ts

@@ -0,0 +1,12 @@
+export interface Point {
+    /** 序号 */
+    id?: number;           
+    /** 经度 */
+    lon?: number;        
+    /** 纬度 */
+    lat?: number;
+     /** 空间 */
+    geom?: string;    
+    /** 灾害类型 */
+    disasterType?: string;
+}

src/types/base/XianHiddenDangerSpots.ts

@@ -0,0 +1,33 @@
+import type { Point } from "./Point";
+
+/**
+ * 地质灾害隐患点
+ */
+export interface XianHiddenDangerSpots extends Point{   
+    /** 野外编号 */
+    fieldCode?: string;
+    /** 省 */
+    province?: string;
+    /** 省编号 */
+    provinceId?: string;
+    /** 市 */
+    city?: string;
+    /** 市编号 */
+    cityId?: string;
+    /** 县 */
+    county?: string;
+    /** 县编号 */
+    countyId?: string;
+    /** 乡镇 */
+    village?: string;
+    /** 灾害点名称 */
+    disasterName?: string;       
+    /** 位置 */
+    position?: string;
+    /** 规模等级 */
+    scaleGrade?: string;
+    /** 险情等级 */
+    riskGrade?: string;
+    /** 逻辑删除标识，0未删除，1已删除 */
+    isDelete?: 0 | 1; 
+}

src/types/cesium/PrimitiveOptions.ts

@@ -1,4 +1,4 @@
-import type { Cartesian3, Color } from 'cesium'
+import type { Cartesian3, Color, NearFarScalar } from 'cesium'
 
 export interface PrimitiveOptions {
   id: string
@@ -10,4 +10,6 @@ export interface PrimitiveOptions {
   width?: number // 线宽
   image?: string // 广告牌图片
   scale?: number // 广告牌缩放
+  scaleByDistance?: NearFarScalar // 广告牌距离衰减缩放
+  customProperties?: Record<string, any> // 自定义属性对象
 }

src/types/common/DisasterType.ts

@@ -0,0 +1,4 @@
+export enum DisasterType {
+    RAINSTORM = 'rainstorm',
+    EARTHQUAKE= 'earthquake'
+}

src/utils/cesium/CesiumUtils.ts

@@ -3,7 +3,7 @@ import type { EntityOptions } from '@/types/cesium/EntityOptions'
 import type { PrimitiveOptions } from '@/types/cesium/PrimitiveOptions'
 import type { LayerConfig } from '@/types/cesium/LayerConfig'
 import type { CustomizeGeoJsonDataSource, GeoJsonOptions } from '@/types/cesium/GeoJsonOptions'
-import { Viewer, Entity, DataSource, ImageryLayer, Primitive, BillboardCollection, Cartesian3 } from 'cesium'
+import { Viewer, Entity, DataSource, ImageryLayer, Primitive, BillboardCollection, Cartesian3, ScreenSpaceEventHandler, ScreenSpaceEventType, Cartesian2, SceneTransforms } from 'cesium'
 import { CesiumViewerManager } from './CesiumViewerManager'
 import { EntityManager } from './EntityManager'
 import { PrimitiveManager } from './PrimitiveManager'
@@ -38,7 +38,7 @@ export class CesiumUtils {
    */
   initCesiumViewer(options: CesiumInitOptions, tdMapToken?: string[], type: number = 0): void {
     this.#viewerManager.initCesiumViewer(options, tdMapToken, type)
-    
+
     const viewer = this.#viewerManager.getViewer()
     if (viewer) {
       this.#entityManager = new EntityManager(viewer)
@@ -401,6 +401,20 @@ export class CesiumUtils {
     return this.#geoJsonManager!.getGeoJsonLayerIds(clearType)
   }
 
+  // ===================== 图层操作 =====================
+  /**
+   * 监听点击事件
+   */
+  clickLayer(callback: (pickedObject: object) => void) {
+    const handler = new ScreenSpaceEventHandler(this.getViewer()?.scene.canvas);
+    handler.setInputAction((clickEvent: {position: Cartesian2}) => {
+      // 在点击位置进行拾取
+      const pickedObject = CesiumUtilsSingleton.getViewer()?.scene.pick(clickEvent.position);
+
+      callback(pickedObject);
+    }, ScreenSpaceEventType.LEFT_CLICK);
+  }
+
   // ===================== 视角控制 =====================
 
   /**
@@ -465,6 +479,16 @@ export class CesiumUtils {
     return positions.map((pos) => this.convertPosition(pos))
   }
 
+  /**
+   * 将Cartesian3坐标转换为屏幕坐标
+   * @param pos 坐标
+   * @returns 偏移量
+   */
+  convertScreenPosition(pos: Cartesian3): {x: number, y: number} {
+    const windowCoord = SceneTransforms.wgs84ToWindowCoordinates(this.getViewer()!.scene, pos);
+    return {x: windowCoord.x, y: windowCoord.y}
+  }
+
   // ===================== 私有方法 =====================
 
   /**

src/utils/cesium/PrimitiveManager.ts

@@ -14,6 +14,7 @@ import {
   BillboardGraphics,
   VerticalOrigin,
   HorizontalOrigin,
+  NearFarScalar,
 } from 'cesium'
 import type { PrimitiveOptions } from '@/types/cesium/PrimitiveOptions'
 import type { Viewer } from 'cesium'
@@ -259,13 +260,24 @@ export class PrimitiveManager {
 
     options.forEach((option) => {
       const position = this.#convertPosition(option.positions[0]!)
-      collection.add({
+      
+      const billboardConfig: any = {
         id: option.id,
         position,
         image: option.image,
         scale: option.scale || 1,
         color: option.color || Color.WHITE,
-      })
+      }
+
+      if (option.scaleByDistance) {
+        billboardConfig.scaleByDistance = option.scaleByDistance
+      }
+
+      if (option.customProperties) {
+        Object.assign(billboardConfig, option.customProperties)
+      }
+
+      collection.add(billboardConfig)
     })
 
     this.#viewer.scene.primitives.add(collection)

src/utils/utils.ts

@@ -80,6 +80,7 @@ export const Utils = {
       return result.replace(regex, String(value ?? ''))
     }, format)
   },
+
   /**
    * 深拷贝函数
    * 支持类型：原始类型、数组、对象、Date、RegExp、Map、Set、ArrayBuffer等
@@ -200,4 +201,28 @@ export const Utils = {
     // 对于其他无法处理的情况，返回原值
     return source
   },
+
+  /**
+   * 调整元素位置，确保其不超出屏幕可视区域边界
+   * @param {number} offsetX - 元素左上角原 X 坐标（相对于视口）
+   * @param {number} offsetY - 元素左上角原 Y 坐标（相对于视口）
+   * @param {number} width - 元素的宽度
+   * @param {number} height - 元素的高度
+   * @returns {[number, number]} 调整后的 [newX, newY]
+ */
+  keepWithinScreen: (offsetX: number, offsetY: number, width: number, height: number) => {
+    const viewportW = window.innerWidth;
+    const viewportH = window.innerHeight;
+
+    // 计算允许的 X 范围：最小 0，最大 (视口宽度 - 元素宽度)
+    // 如果元素宽度大于视口宽度，允许范围为 [0, 0]（即只能左对齐）
+    const maxX = Math.max(0, viewportW - width);
+    const newX = Math.min(Math.max(offsetX, 0), maxX);
+
+    // 计算允许的 Y 范围
+    const maxY = Math.max(0, viewportH - height);
+    const newY = Math.min(Math.max(offsetY, 0), maxY);
+
+    return [newX, newY];
+  }
 }

src/views/home/earthquake/Earthquake.vue

@@ -1,9 +1,12 @@
 <template>
   <div>
-    地震灾害链
+    <BasicComponent :disaster-type="DisasterType.EARTHQUAKE" :key="DisasterType.EARTHQUAKE"/>
   </div>
 </template>
+
 <script setup lang="ts">
+import BasicComponent from '@/component/rain-earthquake/BasicComponent.vue';
+import { DisasterType } from '@/types/common/DisasterType';
 </script>
-<style scoped>
+
-</style>
+<style scoped></style>

src/views/home/rainstorm/Rainstorm.vue

@@ -1,13 +1,12 @@
 <template>
   <div>
-    <!-- 地图组件 -->
+    <BasicComponent :disaster-type="DisasterType.RAINSTORM" :key="DisasterType.EARTHQUAKE"/>
-     <MapComponent />
   </div>
 </template>
 
 <script setup lang="ts">
-import MapComponent from "@/component/map/Map.vue"
+import BasicComponent from '@/component/rain-earthquake/BasicComponent.vue';
+import { DisasterType } from '@/types/common/DisasterType';
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>