添加部分钩子函数，便于代码维护

src/component/map/AdministrativeDivision.vue

@@ -4,72 +4,14 @@
 </template>
 
 <script lang="ts" setup>
-  import {
+  import { useAdministrativeDivision } from '@/hooks/map/useAdministrativeDivision';
-    baQiao,
-    beiLin,
-    changAn,
-    gaoLing,
-    huYi,
-    lanTian,
-    lianHu,
-    linTong,
-    weiYang,
-    xinCheng,
-    yanLiang,
-    yanTa,
-    zhouZhi,
-  } from '@/assets';
   import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
   import { Color } from 'cesium';
   import { onMounted } from 'vue';
 
-  const areas = [
+  // 配置参数
-    baQiao,
+  const { areas, areasId, areasColor, areaTransparency, labelTransparency } =
-    beiLin,
+    useAdministrativeDivision();
-    changAn,
-    gaoLing,
-    huYi,
-    lanTian,
-    lianHu,
-    linTong,
-    weiYang,
-    xinCheng,
-    yanLiang,
-    yanTa,
-    zhouZhi,
-  ];
-  const areasId = [
-    'baqiao',
-    'beilin',
-    'changan',
-    'gaoling',
-    'huyi',
-    'lantian',
-    'lianhu',
-    'lintong',
-    'weiyang',
-    'xincheng',
-    'yanliang',
-    'yanta',
-    'zhouzhi',
-  ];
-  const areasColor = [
-    new Color(255 / 255, 153 / 255, 0 / 255),
-    new Color(255 / 255, 51 / 255, 102 / 255),
-    new Color(0 / 255, 178 / 255, 255 / 255),
-    new Color(102 / 255, 255 / 255, 102 / 255),
-    new Color(204 / 255, 102 / 255, 255 / 255),
-    new Color(255 / 255, 204 / 255, 0 / 255),
-    new Color(0 / 255, 204 / 255, 153 / 255),
-    new Color(255 / 255, 102 / 255, 102 / 255),
-    new Color(102 / 255, 153 / 255, 255 / 255),
-    new Color(255 / 255, 178 / 255, 102 / 255),
-    new Color(153 / 255, 255 / 255, 204 / 255),
-    new Color(255 / 255, 153 / 255, 204 / 255),
-    new Color(190 / 255, 255 / 255, 232 / 255),
-  ];
-  const areaTransparency = 0.3;
-  const labelTransparency = 1;
 
   onMounted(() => {
     // 构建批量添加配置数组

src/component/map/MapComponent.vue

@@ -7,15 +7,17 @@
 
 <script lang="ts" setup>
   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';
   import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
-  import type { GeoJsonFileType } from '@/types/cesium/GeoJsonFileType';
+
-  import { Color, ScreenSpaceEventType } from 'cesium';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
-  import type { ClickObject } from '@/types/cesium/ClickObject';
   import { xiAn } from '@/assets';
+  import { Color } from 'cesium';
+  import type { GeoJsonFileType } from '@/types/cesium/GeoJsonFileType';
+  import config from '@/config/config.json';
+  import { useMap } from '@/hooks/map/useMap';
 
   onBeforeMount(() => {
     // 初始化为false
@@ -26,6 +28,7 @@
   });
 
   onMounted(async () => {
+    // 初始化Cesium
     await CesiumUtilsSingleton.initCesiumViewer({
       containerId: 'map-container',
       mark: {
@@ -38,63 +41,20 @@
       },
     });
 
+    // 设置状态
     useViewerStore().setViewerLoadingCompleted(true);
 
     // 注册全局点击监听器
-    CesiumUtilsSingleton.clickLayer((pickedObject: ClickObject) => {
+    useMap().registerAndClickOnTheListener();
-      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();
-      }
-    });
 
     // 注册全局滚轮监听器
-    CesiumUtilsSingleton.getViewer()!.scene.canvas.addEventListener(
+    useMap().registerAScrollListener();
-      'wheel',
-      () => {
-        // 设置最小最大高度
-        CesiumUtilsSingleton.setHeightLimits();
-      }
-    );
 
     // 当行政区超出页面时，自动拉回视角
-    CesiumUtilsSingleton.outOverView();
+    useMap().automaticallyAdjustThePerspective();
 
-    // 禁止全局默认双击事件
+    // 禁止事件
-    CesiumUtilsSingleton.getViewer()?.cesiumWidget.screenSpaceEventHandler.removeInputAction(
+    useMap().prohibitedEvents();
-      ScreenSpaceEventType.LEFT_DOUBLE_CLICK
-    );
 
     // 默认视角
     CesiumUtilsSingleton.viewToTarget(

src/component/rain-earthquake/HiddenPointComponent.vue

@@ -38,32 +38,23 @@
   import { useViewerStore } from '@/stores/useViewerStore';
   import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
   import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
-  import {
+  import { useHiddenPoint } from '@/hooks/rain-earthquake/useHiddenPoint';
-    debrisFlowIcon,
-    flashFloodIcon,
-    landslideIcon,
-    waterLoggingIcon,
-  } from '@/assets';
 
+  // 接收父组件传递的参数
   const props = defineProps<{
     disasterType: DisasterType;
   }>();
 
+  // 基本隐患点数据
   const baseHiddenPoints = ref<Point[]>([]);
-
+  // 信息框相关字段
   const informationBoxTitle = ref('');
   const offsetX = ref(0);
   const offsetY = ref(0);
   const hiddenDangerPointDetail = ref<Point>();
 
-  const field = {
+  // 获取钩子函数
-    fieldCode: '野外编号',
+  const { field, getDisasterIcon } = useHiddenPoint();
-    disasterName: '灾害点名称',
-    position: '位置',
-    disasterType: '灾害类型',
-    scaleGrade: '规模等级',
-    riskGrade: '风险等级',
-  };
 
   $api.hiddenDangerSpots.getBasePoins(props.disasterType).then((res) => {
     baseHiddenPoints.value = res.data;
@@ -111,22 +102,4 @@
     }
   );
 </script>
-
-<script lang="ts">
-  function getDisasterIcon(disasterType?: string): string {
-    switch (disasterType) {
-      case '滑坡':
-        return landslideIcon;
-      case '泥石流':
-        return debrisFlowIcon;
-      case '内涝':
-        return waterLoggingIcon;
-      case '山洪':
-        return flashFloodIcon;
-      default:
-        throw new Error(`未知的灾害类型: ${disasterType}`);
-    }
-  }
-</script>
-
 <style scoped></style>

src/component/rain-earthquake/RiskPointComponent.vue

@@ -34,28 +34,17 @@
   import { useViewerStore } from '@/stores/useViewerStore';
   import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
   import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
-  import { riskAreaIcon } from '@/assets';
+  import { useRiskPoint } from '@/hooks/rain-earthquake/useRiskPoint';
 
   const riskPoints = ref<Point[]>([]);
 
-  const informationBoxTitle = '风险区域';
+  // 信息框相关配置
   const offsetX = ref(0);
   const offsetY = ref(0);
   const riskPointDetail = ref<Point>();
 
-  const field = {
+  // 获取钩子函数
-    riskName: '风险区名称',
+  const { informationBoxTitle, field, getDisasterIcon } = useRiskPoint();
-    unitCode: '统一编号',
-    housing: '住房（间）',
-    permanentPopulation: '常住人口（人）',
-    residentCounts: '居民户数（户）',
-    riskProperty: '威胁财产（万元）',
-    inspectorName: '巡查员姓名',
-    inspectorTele: '巡查员手机号',
-    position: '位置',
-    lon: '经度',
-    lat: '纬度',
-  };
 
   $api.riskSpots.getBasePoins().then((res) => {
     riskPoints.value = res.data;
@@ -100,10 +89,4 @@
   );
 </script>
 
-<script lang="ts">
-  function getDisasterIcon(): string {
-    return riskAreaIcon;
-  }
-</script>
-
 <style scoped></style>

src/hooks/map/useAdministrativeDivision.ts

@@ -0,0 +1,68 @@
+import {
+  baQiao,
+  beiLin,
+  changAn,
+  gaoLing,
+  huYi,
+  lanTian,
+  lianHu,
+  linTong,
+  weiYang,
+  xinCheng,
+  yanLiang,
+  yanTa,
+  zhouZhi,
+} from '@/assets';
+import { Color } from 'cesium';
+
+export const useAdministrativeDivision = () => {
+  const areas = [
+    baQiao,
+    beiLin,
+    changAn,
+    gaoLing,
+    huYi,
+    lanTian,
+    lianHu,
+    linTong,
+    weiYang,
+    xinCheng,
+    yanLiang,
+    yanTa,
+    zhouZhi,
+  ];
+  const areasId = [
+    'baqiao',
+    'beilin',
+    'changan',
+    'gaoling',
+    'huyi',
+    'lantian',
+    'lianhu',
+    'lintong',
+    'weiyang',
+    'xincheng',
+    'yanliang',
+    'yanta',
+    'zhouzhi',
+  ];
+  const areasColor = [
+    new Color(255 / 255, 153 / 255, 0 / 255),
+    new Color(255 / 255, 51 / 255, 102 / 255),
+    new Color(0 / 255, 178 / 255, 255 / 255),
+    new Color(102 / 255, 255 / 255, 102 / 255),
+    new Color(204 / 255, 102 / 255, 255 / 255),
+    new Color(255 / 255, 204 / 255, 0 / 255),
+    new Color(0 / 255, 204 / 255, 153 / 255),
+    new Color(255 / 255, 102 / 255, 102 / 255),
+    new Color(102 / 255, 153 / 255, 255 / 255),
+    new Color(255 / 255, 178 / 255, 102 / 255),
+    new Color(153 / 255, 255 / 255, 204 / 255),
+    new Color(255 / 255, 153 / 255, 204 / 255),
+    new Color(190 / 255, 255 / 255, 232 / 255),
+  ];
+  const areaTransparency = 0.3;
+  const labelTransparency = 1;
+
+  return { areas, areasId, areasColor, areaTransparency, labelTransparency };
+};

src/hooks/map/useMap.ts

@@ -0,0 +1,78 @@
+import config from '@/config/config.json';
+import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+import { ScreenSpaceEventType } from 'cesium';
+import type { ClickObject } from '@/types/cesium/ClickObject';
+import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
+export const useMap = () => {
+  // 注册全局点击监听器
+  const registerAndClickOnTheListener = () => {
+    CesiumUtilsSingleton.clickLayer((pickedObject: ClickObject) => {
+      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();
+      }
+    });
+  };
+
+  // 注册全局滚轮监听器
+  const registerAScrollListener = () => {
+    CesiumUtilsSingleton.getViewer()!.scene.canvas.addEventListener(
+      'wheel',
+      () => {
+        // 设置最小最大高度
+        CesiumUtilsSingleton.setHeightLimits();
+      }
+    );
+  };
+
+  // 当行政区超出页面时，自动拉回视角
+  const automaticallyAdjustThePerspective = () => {
+    CesiumUtilsSingleton.outOverView();
+  };
+
+  // 禁止事件
+  const prohibitedEvents = () => {
+    // 禁止全局默认双击事件
+    CesiumUtilsSingleton.getViewer()?.cesiumWidget.screenSpaceEventHandler.removeInputAction(
+      ScreenSpaceEventType.LEFT_DOUBLE_CLICK
+    );
+  };
+
+  return {
+    registerAndClickOnTheListener,
+    registerAScrollListener,
+    automaticallyAdjustThePerspective,
+    prohibitedEvents,
+  };
+};

src/hooks/rain-earthquake/useHiddenPoint.ts

@@ -0,0 +1,34 @@
+import {
+  debrisFlowIcon,
+  flashFloodIcon,
+  landslideIcon,
+  waterLoggingIcon,
+} from '@/assets';
+
+export const useHiddenPoint = () => {
+  const field = {
+    fieldCode: '野外编号',
+    disasterName: '灾害点名称',
+    position: '位置',
+    disasterType: '灾害类型',
+    scaleGrade: '规模等级',
+    riskGrade: '风险等级',
+  };
+
+  function getDisasterIcon(disasterType?: string): string {
+    switch (disasterType) {
+      case '滑坡':
+        return landslideIcon;
+      case '泥石流':
+        return debrisFlowIcon;
+      case '内涝':
+        return waterLoggingIcon;
+      case '山洪':
+        return flashFloodIcon;
+      default:
+        throw new Error(`未知的灾害类型: ${disasterType}`);
+    }
+  }
+
+  return { field, getDisasterIcon };
+};

src/hooks/rain-earthquake/useRiskPoint.ts

@@ -0,0 +1,26 @@
+import { riskAreaIcon } from '@/assets';
+
+export const useRiskPoint = () => {
+  // 信息框标题
+  const informationBoxTitle = '风险区域';
+
+  const field = {
+    riskName: '风险区名称',
+    unitCode: '统一编号',
+    housing: '住房（间）',
+    permanentPopulation: '常住人口（人）',
+    residentCounts: '居民户数（户）',
+    riskProperty: '威胁财产（万元）',
+    inspectorName: '巡查员姓名',
+    inspectorTele: '巡查员手机号',
+    position: '位置',
+    lon: '经度',
+    lat: '纬度',
+  };
+
+  function getDisasterIcon(): string {
+    return riskAreaIcon;
+  }
+
+  return { informationBoxTitle, field, getDisasterIcon };
+};

src/hooks/rainstorm/useRainDisasterChain.ts

@@ -4,7 +4,7 @@ import { HiddenPointType } from '@/types/common/DisasterType';
 import type { PaginationType } from '@/types/common/PaginationType';
 
 // 灾害链影响点列表钩子函数
-export function useRainDisasterChain() {
+export const useRainDisasterChain = () => {
   // 搜索条件
   const conditions = ref({
     tableData: '',
@@ -70,4 +70,4 @@ export function useRainDisasterChain() {
     changeConditions,
     changeCurrentPage,
   };
-}
+};

src/hooks/rainstorm/useRainLegend.ts

@@ -7,7 +7,7 @@ import {
 } from '@/assets';
 
 // 引入图例钩子函数
-export function useRainLegend() {
+export const useRainLegend = () => {
   // 图例数据
   const legendList = [
     { name: '滑坡隐患点', link: landslideIcon },
@@ -18,4 +18,4 @@ export function useRainLegend() {
   ];
 
   return { legendList };
-}
+};

src/hooks/useIndex.ts

@@ -0,0 +1,25 @@
+import { useRoute } from 'vue-router';
+
+export const useIndex = () => {
+  const route = useRoute();
+
+  const topNavMap = [
+    { title: '暴雨灾害链', name: 'rainstorm', query: { identification: 1 } },
+    { title: '地震灾害链', name: 'earthquake', query: { identification: 2 } },
+    { title: '多灾种灾害链分析', name: 'index', query: { identification: 3 } },
+    { title: '灾害链情景推演', name: 'index', query: { identification: 4 } },
+    { title: '数据管理', name: 'index', query: { identification: 5 } },
+    { title: '文件管理', name: 'index', query: { identification: 6 } },
+  ];
+
+  // 判断当前导航项是否激活
+  const isActive = (identification: number) => {
+    const targetId = identification.toString();
+    let currentId = route.query.identification;
+    if (!currentId) return targetId === '1';
+    if (Array.isArray(currentId)) currentId = currentId[0];
+    return currentId === targetId || route.query.identification === targetId;
+  };
+
+  return { topNavMap, isActive };
+};

src/views/IndexView.vue

@@ -29,30 +29,12 @@
 
 <script setup lang="ts">
   import { useViewerStore } from '@/stores/useViewerStore';
-  import { RouterView, useRoute } from 'vue-router';
+  import { RouterView } from 'vue-router';
   import { backgroundImage, mainLogoImage } from '@/assets';
+  import { useIndex } from '@/hooks/useIndex';
 
-  useViewerStore().setViewerLoadingCompleted(true);
+  // 获取钩子函数
-
+  const { topNavMap, isActive } = useIndex();
-  const route = useRoute();
-
-  const topNavMap = [
-    { title: '暴雨灾害链', name: 'rainstorm', query: { identification: 1 } },
-    { title: '地震灾害链', name: 'earthquake', query: { identification: 2 } },
-    { title: '多灾种灾害链分析', name: 'index', query: { identification: 3 } },
-    { title: '灾害链情景推演', name: 'index', query: { identification: 4 } },
-    { title: '数据管理', name: 'index', query: { identification: 5 } },
-    { title: '文件管理', name: 'index', query: { identification: 6 } },
-  ];
-
-  // 判断当前导航项是否激活
-  const isActive = (identification: number) => {
-    const targetId = identification.toString();
-    let currentId = route.query.identification;
-    if (!currentId) return targetId === '1';
-    if (Array.isArray(currentId)) currentId = currentId[0];
-    return currentId === targetId || route.query.identification === targetId;
-  };
 </script>
 
 <style scoped>

src/views/home/rainstorm/RainstormView.vue

@@ -20,20 +20,16 @@
 </template>
 
 <script setup lang="ts">
-  // 1. 只导入子组件
   import BasicComponent from '@/component/rain-earthquake/BasicComponent.vue';
   import DisasterChainPointComponent from '@/component/rain-earthquake/DisasterChainPointComponent.vue';
   import LegendComponent from '@/component/rain-earthquake/LegendComponent.vue';
   import { useRainDisasterChain } from '@/hooks/rainstorm/useRainDisasterChain';
   import { useRainLegend } from '@/hooks/rainstorm/useRainLegend';
-
-  // 2. 只导入核心类型/枚举
   import { DisasterType } from '@/types/common/DisasterType';
   import { useRoute } from 'vue-router';
 
   const route = useRoute();
 
-  // 4. 执行钩子，拿到所有需要的数据
   const {
     selectOptions,
     tableDatas,