图标组件以及整理代码结构

src/component/rain-earthquake/HiddenPointComponent.vue

@@ -33,15 +33,17 @@
   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 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';
+  import {
+    debrisFlowIcon,
+    flashFloodIcon,
+    landslideIcon,
+    waterLoggingIcon,
+  } from '@/assets';
 
   const props = defineProps<{
     disasterType: DisasterType;
@@ -114,13 +116,13 @@
   function getDisasterIcon(disasterType?: string): string {
     switch (disasterType) {
       case '滑坡':
-        return landslide;
+        return landslideIcon;
       case '泥石流':
-        return debrisFlow;
+        return debrisFlowIcon;
       case '内涝':
-        return waterlogging;
+        return waterLoggingIcon;
       case '山洪':
-        return flashFlood;
+        return flashFloodIcon;
       default:
         throw new Error(`未知的灾害类型: ${disasterType}`);
     }

src/component/rain-earthquake/LegendComponent.vue

@@ -0,0 +1,113 @@
+<!-- 图例组件 -->
+<template>
+  <div class="legend-box">
+    <div class="title-box">
+      <header>图例</header>
+    </div>
+    <div class="legend-list-box">
+      <el-row
+        v-for="(list, index1) in finalLegendList"
+        :key="index1"
+        class="legend-row"
+      >
+        <el-col
+          :span="24 / colsNum"
+          v-for="(item, index2) in list"
+          :key="`${index1}_${index2}`"
+        >
+          <div class="legend-item">
+            <img :src="item.link" :alt="item.name" class="legend-item-img" />
+            <span class="legend-item-text">{{ item.name }}</span>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { Utils } from '@/utils/utils';
+  import { onMounted, ref, type Ref } from 'vue';
+
+  // 接收父组件传递的属性
+  const props = defineProps<{
+    legendList: { name: string; link: string }[];
+    colsNum: 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24;
+  }>();
+
+  // 处理后图例列表
+  const finalLegendList: Ref<{ name: string; link: string }[][]> = ref([]);
+
+  onMounted(() => {
+    finalLegendList.value = Utils.chunkArray(props.legendList, props.colsNum);
+  });
+</script>
+
+<style scoped>
+  .legend-box {
+    position: absolute;
+    bottom: 20px;
+    right: 15px;
+    z-index: 1000;
+    width: 310px;
+    height: 265px;
+    overflow-y: auto;
+    box-shadow: inset 0px 0px 9px rgba(62, 136, 210, 1);
+    color: white;
+    font-family: Arial, sans-serif;
+    border: 1px solid rgba(0, 225, 255, 1);
+  }
+
+  .title-box {
+    background: linear-gradient(
+      180deg,
+      rgba(86, 204, 242, 1) 0%,
+      rgba(47, 128, 237, 1) 100%
+    );
+    height: 25px;
+    padding: 10px;
+    text-align: center;
+    font-weight: bold;
+    flex-shrink: 0;
+  }
+
+  .legend-list-box {
+    background: rgba(14, 52, 98, 0.8);
+    padding: 10px;
+    height: calc(100% - 45px);
+    box-sizing: border-box;
+  }
+
+  .legend-row {
+    margin-bottom: 2px;
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 8px;
+    margin: 0;
+    min-height: 20px;
+    border-radius: 3px;
+    transition: background-color 0.2s ease;
+  }
+
+  .legend-item-img {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+    object-fit: contain;
+    margin-right: 8px;
+  }
+
+  .legend-item-text {
+    flex: 1;
+    text-align: justify;
+    text-justify: inter-ideograph;
+    font-size: 14px;
+    line-height: 1.5;
+    letter-spacing: 0.5px;
+    word-break: break-all;
+  }
+</style>

src/component/rain-earthquake/RiskPointComponent.vue

@@ -29,12 +29,12 @@
   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';
+  import { riskAreaIcon } from '@/assets';
 
   const riskPoints = ref<Point[]>([]);
 
@@ -102,7 +102,7 @@
 
 <script lang="ts">
   function getDisasterIcon(): string {
-    return riskArea;
+    return riskAreaIcon;
   }
 </script>