添加图例显示

src/assets/index.ts

@@ -15,6 +15,7 @@ export { default as schoolIcon } from '@/assets/images/icon/school.png';
 export { default as bridgeIcon } from '@/assets/images/icon/bridge.png';
 export { default as reservoirIcon } from '@/assets/images/icon/reservoir.png';
 export { default as subwayIcon } from '@/assets/images/icon/subway.png';
+export { default as earthquakeLineIcon } from '@/assets/images/icon/earthquake-line.png';
 
 // 图片
 export { default as backgroundImage } from '@/assets/images/background-image.png';

src/component/rain-earthquake/LegendComponent.vue

@@ -35,7 +35,10 @@
           :key="`${index1}_${index2}`"
         >
           <div class="legend-item">
-            <img :src="item.link" :alt="item.name" class="legend-item-img" />
+            <!-- 支持图片链接 -->
+            <img v-if="item.link" :src="item.link" :alt="item.name" class="legend-item-img" />
+            <!-- 支持HTML+CSS样式 -->
+            <div v-else-if="item.html" v-html="item.html" class="legend-item-html"></div>
             <span class="legend-item-text">{{ item.name }}</span>
           </div>
         </el-col>
@@ -51,12 +54,12 @@
 
   // 接收父组件传递的属性
   const props = defineProps<{
-    legendList: { name: string; link: string }[];
+    legendList: { name: string; link?: string; html?: string }[];
     colsNum: 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24;
   }>();
 
   // 处理后图例列表
-  const finalLegendList: Ref<{ name: string; link: string }[][]> = ref([]);
+  const finalLegendList: Ref<{ name: string; link?: string; html?: string }[][]> = ref([]);
 
   // 切换图例显示状态
   const changeStatus = () => {
@@ -133,6 +136,21 @@
     margin-right: 8px;
   }
 
+  .legend-item-html {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+    margin-right: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .legend-item-html :deep(*) {
+    width: 100%;
+    height: 100%;
+  }
+
   .legend-item-text {
     flex: 1;
     text-align: justify;

src/hooks/earthquake/useEarthquakeDisasterChain.ts

@@ -4,7 +4,21 @@ import type { PaginationType } from '@/types/common/PaginationType';
 import { PointType } from '@/types/common/DisasterType';
 import { useStatusStore } from '@/stores/useStatusStore';
 import { useLayerControl } from '../rain-earthquake/useLayerControl.ts';
-import { debrisFlowIcon, landslideIcon, riskAreaIcon } from '@/assets';
+import {
+  debrisFlowIcon,
+  landslideIcon,
+  riskAreaIcon,
+  earthquakeLineIcon,
+  hospitalIcon,
+  dangerousSourceIcon,
+  emergencyShelterIcon,
+  firefighterIcon,
+  storePointsIcon,
+  schoolIcon,
+  bridgeIcon,
+  reservoirIcon,
+  subwayIcon,
+} from '@/assets';
 import { useRightHandle } from '../rain-earthquake/useRightHandle.ts';
 
 /**
@@ -79,9 +93,23 @@ export const useEarthquakeDisasterChain = () => {
    * 图例数据
    */
   const legendList = [
+    // 隐患点
     { name: '滑坡隐患点', link: landslideIcon },
     { name: '泥石流隐患点', link: debrisFlowIcon },
     { name: '风险区域', link: riskAreaIcon },
+    // 断裂带
+    { name: '断裂带', link: earthquakeLineIcon },
+    // 承灾体
+    { name: '医院', link: hospitalIcon },
+    { name: '危险源', link: dangerousSourceIcon },
+    { name: '避难所', link: emergencyShelterIcon },
+    { name: '消防站', link: firefighterIcon },
+    { name: '储备点', link: storePointsIcon },
+    { name: '学校', link: schoolIcon },
+    { name: '地铁站', link: subwayIcon },
+    // 基础设施
+    { name: '桥梁', link: bridgeIcon },
+    { name: '水库', link: reservoirIcon },
   ];
 
   // ================左侧按钮================================

src/hooks/rainstorm/useRainDisasterChain.ts

@@ -9,6 +9,15 @@ import {
   landslideIcon,
   riskAreaIcon,
   waterLoggingIcon,
+  hospitalIcon,
+  dangerousSourceIcon,
+  emergencyShelterIcon,
+  firefighterIcon,
+  storePointsIcon,
+  schoolIcon,
+  bridgeIcon,
+  reservoirIcon,
+  subwayIcon,
 } from '@/assets';
 import { useLayerControl } from '../rain-earthquake/useLayerControl.ts';
 import { useRightHandle } from '../rain-earthquake/useRightHandle.ts';
@@ -87,11 +96,23 @@ export const useRainDisasterChain = () => {
    * 图例数据
    */
   const legendList = [
+    // 隐患点
     { name: '滑坡隐患点', link: landslideIcon },
     { name: '泥石流隐患点', link: debrisFlowIcon },
     { name: '山洪隐患点', link: flashFloodIcon },
     { name: '内涝隐患点', link: waterLoggingIcon },
     { name: '风险区域', link: riskAreaIcon },
+    // 承灾体
+    { name: '医院', link: hospitalIcon },
+    { name: '危险源', link: dangerousSourceIcon },
+    { name: '避难所', link: emergencyShelterIcon },
+    { name: '消防站', link: firefighterIcon },
+    { name: '储备点', link: storePointsIcon },
+    { name: '学校', link: schoolIcon },
+    { name: '地铁站', link: subwayIcon },
+    // 基础设施
+    { name: '桥梁', link: bridgeIcon },
+    { name: '水库', link: reservoirIcon },
   ];
 
   // ================左侧按钮================================