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

2026-04-13 21:23:24 +08:00
parent 4d2d8787b1
commit b58e2d17d7
13 changed files with 267 additions and 200 deletions
@@ -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(() => {
    // 构建批量添加配置数组
@@ -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(
@@ -38,32 +38,23 @@
  import { useViewerStore } from '@/stores/useViewerStore';
  import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
-  import {
-    debrisFlowIcon,
-    flashFloodIcon,
-    landslideIcon,
-    waterLoggingIcon,
-  } from '@/assets';
+  import { useHiddenPoint } from '@/hooks/rain-earthquake/useHiddenPoint';

+  // 接收父组件传递的参数
  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: '野外编号',
-    disasterName: '灾害点名称',
-    position: '位置',
-    disasterType: '灾害类型',
-    scaleGrade: '规模等级',
-    riskGrade: '风险等级',
-  };
+  // 获取钩子函数
+  const { field, getDisasterIcon } = useHiddenPoint();

  $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>
@@ -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: '风险区名称',
-    unitCode: '统一编号',
-    housing: '住房（间）',
-    permanentPopulation: '常住人口（人）',
-    residentCounts: '居民户数（户）',
-    riskProperty: '威胁财产（万元）',
-    inspectorName: '巡查员姓名',
-    inspectorTele: '巡查员手机号',
-    position: '位置',
-    lon: '经度',
-    lat: '纬度',
-  };
+  // 获取钩子函数
+  const { informationBoxTitle, field, getDisasterIcon } = useRiskPoint();

  $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>