diff --git a/src/component/map/AdministrativeDivision.vue b/src/component/map/AdministrativeDivision.vue
index 1fcf732..03b9a75 100644
--- a/src/component/map/AdministrativeDivision.vue
+++ b/src/component/map/AdministrativeDivision.vue
@@ -4,72 +4,14 @@
-
-
-
diff --git a/src/component/rain-earthquake/RiskPointComponent.vue b/src/component/rain-earthquake/RiskPointComponent.vue
index 7f12ac9..18911c7 100644
--- a/src/component/rain-earthquake/RiskPointComponent.vue
+++ b/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([]);
- const informationBoxTitle = '风险区域';
+ // 信息框相关配置
const offsetX = ref(0);
const offsetY = ref(0);
const riskPointDetail = ref();
- 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 @@
);
-
-
diff --git a/src/hooks/map/useAdministrativeDivision.ts b/src/hooks/map/useAdministrativeDivision.ts
new file mode 100644
index 0000000..78f9b9f
--- /dev/null
+++ b/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 };
+};
diff --git a/src/hooks/map/useMap.ts b/src/hooks/map/useMap.ts
new file mode 100644
index 0000000..ac57564
--- /dev/null
+++ b/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,
+ };
+};
diff --git a/src/hooks/rain-earthquake/useHiddenPoint.ts b/src/hooks/rain-earthquake/useHiddenPoint.ts
new file mode 100644
index 0000000..a7c341b
--- /dev/null
+++ b/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 };
+};
diff --git a/src/hooks/rain-earthquake/useRiskPoint.ts b/src/hooks/rain-earthquake/useRiskPoint.ts
new file mode 100644
index 0000000..7eda9f9
--- /dev/null
+++ b/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 };
+};
diff --git a/src/hooks/rainstorm/useRainDisasterChain.ts b/src/hooks/rainstorm/useRainDisasterChain.ts
index b03ae4b..05a22d9 100644
--- a/src/hooks/rainstorm/useRainDisasterChain.ts
+++ b/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,
};
-}
+};
diff --git a/src/hooks/rainstorm/useRainLegend.ts b/src/hooks/rainstorm/useRainLegend.ts
index 3013e74..ced983f 100644
--- a/src/hooks/rainstorm/useRainLegend.ts
+++ b/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 };
-}
+};
diff --git a/src/hooks/useIndex.ts b/src/hooks/useIndex.ts
new file mode 100644
index 0000000..bcdf7f6
--- /dev/null
+++ b/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 };
+};
diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue
index fa139ef..0c5b5d3 100644
--- a/src/views/IndexView.vue
+++ b/src/views/IndexView.vue
@@ -29,30 +29,12 @@