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

src/component/map/AdministrativeDivision.vue

@@ -4,72 +4,14 @@
 </template>
 
 <script lang="ts" setup>
-  import {
-    baQiao,
-    beiLin,
-    changAn,
-    gaoLing,
-    huYi,
-    lanTian,
-    lianHu,
-    linTong,
-    weiYang,
-    xinCheng,
-    yanLiang,
-    yanTa,
-    zhouZhi,
-  } from '@/assets';
+  import { useAdministrativeDivision } from '@/hooks/map/useAdministrativeDivision';
   import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
   import { Color } from 'cesium';
   import { onMounted } from 'vue';
 
-  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;
+  // 配置参数
+  const { areas, areasId, areasColor, areaTransparency, labelTransparency } =
+    useAdministrativeDivision();
 
   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 type { ClickObject } from '@/types/cesium/ClickObject';
+
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
   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) => {
-      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();
-      }
-    });
+    useMap().registerAndClickOnTheListener();
 
     // 注册全局滚轮监听器
-    CesiumUtilsSingleton.getViewer()!.scene.canvas.addEventListener(
-      'wheel',
-      () => {
-        // 设置最小最大高度
-        CesiumUtilsSingleton.setHeightLimits();
-      }
-    );
+    useMap().registerAScrollListener();
 
     // 当行政区超出页面时，自动拉回视角
-    CesiumUtilsSingleton.outOverView();
+    useMap().automaticallyAdjustThePerspective();
 
-    // 禁止全局默认双击事件
-    CesiumUtilsSingleton.getViewer()?.cesiumWidget.screenSpaceEventHandler.removeInputAction(
-      ScreenSpaceEventType.LEFT_DOUBLE_CLICK
-    );
+    // 禁止事件
+    useMap().prohibitedEvents();
 
     // 默认视角
     CesiumUtilsSingleton.viewToTarget(