@@ -55,7 +55,8 @@
// 切换图例显示状态
const changeStatus = () => {
- useStatusStore().setLegendShow(!useStatusStore().getLegendShow());
+ useStatusStore().uiComponents.legendShow =
+ !useStatusStore().uiComponents.legendShow;
};
onMounted(() => {
diff --git a/src/component/rain-earthquake/LoadingPoints.vue b/src/component/rain-earthquake/LoadingPoints.vue
index 2aeb5b5..bee6517 100644
--- a/src/component/rain-earthquake/LoadingPoints.vue
+++ b/src/component/rain-earthquake/LoadingPoints.vue
@@ -7,15 +7,16 @@
import { onMounted } from 'vue';
import { usePointsHandle } from '@/hooks/usePointsHandle';
import type { Point } from '@/types/base/Point';
- import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+ import type { LoadingResource } from '@/types/common/LoadingResourceType';
+ import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
// 属性
const props = defineProps<{
basePoints: Point[];
getDisasterIcon: (disasterType?: string) => string;
prefix: string;
- showPoints: boolean;
isDefault?: boolean;
+ loadingResourceField?: LoadingResource;
}>();
// 点处理钩子
@@ -30,10 +31,11 @@
props.isDefault
);
- // 显示隐藏点
- if (!props.showPoints) {
- CesiumUtilsSingleton.batchTogglePrimitives(ids, props.showPoints);
- }
+ // 记录id
+ useLoadingResourceStore().addLoadingResource(
+ props.loadingResourceField!,
+ ids
+ );
});
diff --git a/src/component/rain-earthquake/RiskPointComponent.vue b/src/component/rain-earthquake/RiskPointComponent.vue
index 587b323..78cccd0 100644
--- a/src/component/rain-earthquake/RiskPointComponent.vue
+++ b/src/component/rain-earthquake/RiskPointComponent.vue
@@ -3,12 +3,12 @@
@@ -35,6 +35,7 @@
import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
import { useRiskPoint } from '@/hooks/rain-earthquake/useRiskPoint';
+ import { LoadingResource } from '@/types/common/LoadingResourceType';
const riskPoints = ref
([]);
diff --git a/src/hooks/earthquake/useEarthquakeDisasterChain.ts b/src/hooks/earthquake/useEarthquakeDisasterChain.ts
index cdaf682..a6adaa6 100644
--- a/src/hooks/earthquake/useEarthquakeDisasterChain.ts
+++ b/src/hooks/earthquake/useEarthquakeDisasterChain.ts
@@ -2,6 +2,11 @@ import { ref } from 'vue';
import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
import type { PaginationType } from '@/types/common/PaginationType';
import { PointType } from '@/types/common/DisasterType';
+import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+import config from '@/config/config.json';
+import { useStatusStore } from '@/stores/useStatusStore';
+import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+import { LoadingResource } from '@/types/common/LoadingResourceType';
/**
* 暴雨灾害链影响点列表钩子函数
@@ -123,6 +128,176 @@ export const useEarthquakeDisasterChain = () => {
},
];
+ /**
+ * 右侧按钮信息
+ */
+ const rightButtonInfo = [
+ {
+ name: '地震模拟',
+ callback: () => {
+ console.log('地震模拟');
+ },
+ },
+ {
+ name: '图件下载',
+ callback: () => {
+ console.log('图件下载');
+ },
+ },
+ {
+ name: '清除模拟',
+ callback: () => {
+ CesiumUtilsSingleton.clearAllResources('custom');
+ },
+ executeOnce: true,
+ },
+ {
+ name: '视角重置',
+ callback: () => {
+ CesiumUtilsSingleton.flyToTarget(
+ config.defaultPosition as [number, number, number]
+ );
+ },
+ executeOnce: true,
+ },
+ ];
+
+ const controlPanel = ref([
+ {
+ name: '显示隐患点',
+ selected: useStatusStore().mapLayers.hiddenDangerPointShow,
+ callback: (status: unknown) => {
+ if (status as boolean) {
+ // 显示隐患点
+ CesiumUtilsSingleton.batchShowPrimitives(
+ useLoadingResourceStore().getLoadingResource(
+ LoadingResource.HIDDEN_DANGER_POINT
+ )
+ );
+
+ // 显示风险点
+ CesiumUtilsSingleton.batchShowPrimitives(
+ useLoadingResourceStore().getLoadingResource(
+ LoadingResource.RISK_POINT
+ )
+ );
+ } else {
+ // 隐藏隐患点
+ CesiumUtilsSingleton.batchHidePrimitives(
+ useLoadingResourceStore().getLoadingResource(
+ LoadingResource.HIDDEN_DANGER_POINT
+ )
+ );
+
+ // 隐藏风险点
+ CesiumUtilsSingleton.batchHidePrimitives(
+ useLoadingResourceStore().getLoadingResource(
+ LoadingResource.RISK_POINT
+ )
+ );
+ }
+ },
+ },
+ {
+ name: '显示医院',
+ selected: useStatusStore().poiLayers.showHospital,
+ callback: () => {
+ console.log('显示医院');
+ },
+ },
+ {
+ name: '显示危险源',
+ selected: useStatusStore().poiLayers.showDangerSource,
+ callback: () => {
+ console.log('显示危险源');
+ },
+ },
+ {
+ name: '显示避难所',
+ selected: useStatusStore().poiLayers.showRefugeeShelter,
+ callback: () => {
+ console.log('显示避难所');
+ },
+ },
+ {
+ name: '显示消防站',
+ selected: useStatusStore().poiLayers.showFireStation,
+ callback: () => {
+ console.log('显示消防站');
+ },
+ },
+ {
+ name: '显示储备点',
+ selected: useStatusStore().poiLayers.showReservePoint,
+ callback: () => {
+ console.log('显示储备点');
+ },
+ },
+ {
+ name: '显示学校',
+ selected: useStatusStore().poiLayers.showSchool,
+ callback: () => {
+ console.log('显示学校');
+ },
+ },
+ {
+ name: '显示人口网格',
+ selected: useStatusStore().poiLayers.showPopulationGrid,
+ callback: () => {
+ console.log('显示人口网格');
+ },
+ },
+ {
+ name: '显示管网系统',
+ selected: useStatusStore().infrastructureLayers.showNetworkSystem,
+ callback: () => {
+ console.log('显示管网系统');
+ },
+ },
+ {
+ name: '显示交通道路',
+ selected: useStatusStore().infrastructureLayers.showTrafficRoad,
+ callback: () => {
+ console.log('显示交通道路');
+ },
+ },
+ {
+ name: '显示桥梁',
+ selected: useStatusStore().infrastructureLayers.showBridge,
+ callback: () => {
+ console.log('显示桥梁');
+ },
+ },
+ {
+ name: '显示高速',
+ selected: useStatusStore().infrastructureLayers.showHighway,
+ callback: () => {
+ console.log('显示高速');
+ },
+ },
+ {
+ name: '显示国道',
+ selected: useStatusStore().infrastructureLayers.showMainRoad,
+ callback: () => {
+ console.log('显示国道');
+ },
+ },
+ {
+ name: '显示水库',
+ selected: useStatusStore().infrastructureLayers.showReservoir,
+ callback: () => {
+ console.log('显示水库');
+ },
+ },
+ {
+ name: '显示地铁站',
+ selected: useStatusStore().infrastructureLayers.showReservoir,
+ callback: () => {
+ console.log('显示地铁站');
+ },
+ },
+ ]);
+
// 把所有需要用到的数据/方法 return 出去
return {
conditions,
@@ -131,6 +306,8 @@ export const useEarthquakeDisasterChain = () => {
tableColumns,
paginationConfig,
leftButtonInfo,
+ rightButtonInfo,
+ controlPanel,
changeConditions,
changeCurrentPage,
};
diff --git a/src/hooks/rainstorm/useRainDisasterChain.ts b/src/hooks/rainstorm/useRainDisasterChain.ts
index fd894eb..089ce4e 100644
--- a/src/hooks/rainstorm/useRainDisasterChain.ts
+++ b/src/hooks/rainstorm/useRainDisasterChain.ts
@@ -4,6 +4,7 @@ import type { PaginationType } from '@/types/common/PaginationType';
import { PointType } from '@/types/common/DisasterType';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
import config from '@/config/config.json';
+import { useStatusStore } from '@/stores/useStatusStore';
/**
* 暴雨灾害链影响点列表钩子函数
@@ -143,9 +144,9 @@ export const useRainDisasterChain = () => {
*/
const rightButtonInfo = [
{
- name: '暴雨下载',
+ name: '暴雨触发',
callback: () => {
- console.log('暴雨下载');
+ console.log('暴雨触发');
},
},
{
@@ -184,6 +185,107 @@ export const useRainDisasterChain = () => {
},
];
+ const controlPanel = [
+ {
+ name: '显示医院',
+ selected: useStatusStore().poiLayers.showHospital,
+ callback: () => {
+ console.log('显示医院');
+ },
+ },
+ {
+ name: '显示危险源',
+ selected: useStatusStore().poiLayers.showDangerSource,
+ callback: () => {
+ console.log('显示危险源');
+ },
+ },
+ {
+ name: '显示避难所',
+ selected: useStatusStore().poiLayers.showRefugeeShelter,
+ callback: () => {
+ console.log('显示避难所');
+ },
+ },
+ {
+ name: '显示消防站',
+ selected: useStatusStore().poiLayers.showFireStation,
+ callback: () => {
+ console.log('显示消防站');
+ },
+ },
+ {
+ name: '显示储备点',
+ selected: useStatusStore().poiLayers.showReservePoint,
+ callback: () => {
+ console.log('显示储备点');
+ },
+ },
+ {
+ name: '显示学校',
+ selected: useStatusStore().poiLayers.showSchool,
+ callback: () => {
+ console.log('显示学校');
+ },
+ },
+ {
+ name: '显示人口网格',
+ selected: useStatusStore().poiLayers.showPopulationGrid,
+ callback: () => {
+ console.log('显示人口网格');
+ },
+ },
+ {
+ name: '显示管网系统',
+ selected: useStatusStore().infrastructureLayers.showNetworkSystem,
+ callback: () => {
+ console.log('显示管网系统');
+ },
+ },
+ {
+ name: '显示交通道路',
+ selected: useStatusStore().infrastructureLayers.showTrafficRoad,
+ callback: () => {
+ console.log('显示交通道路');
+ },
+ },
+ {
+ name: '显示桥梁',
+ selected: useStatusStore().infrastructureLayers.showBridge,
+ callback: () => {
+ console.log('显示桥梁');
+ },
+ },
+ {
+ name: '显示高速',
+ selected: useStatusStore().infrastructureLayers.showHighway,
+ callback: () => {
+ console.log('显示高速');
+ },
+ },
+ {
+ name: '显示国道',
+ selected: useStatusStore().infrastructureLayers.showMainRoad,
+ callback: () => {
+ console.log('显示国道');
+ },
+ },
+ {
+ name: '显示水库',
+ selected: useStatusStore().infrastructureLayers.showReservoir,
+ callback: () => {
+ console.log('显示水库');
+ },
+ },
+ {
+ name: '显示地铁站',
+ selected: useStatusStore().infrastructureLayers.showReservoir,
+ callback: () => {
+ console.log('显示地铁站');
+ },
+ },
+ ];
+
// 把所有需要用到的数据/方法 return 出去
return {
conditions,
@@ -193,6 +295,7 @@ export const useRainDisasterChain = () => {
paginationConfig,
leftButtonInfo,
rightButtonInfo,
+ controlPanel,
changeConditions,
changeCurrentPage,
};
diff --git a/src/stores/useLoadingResourceStore.ts b/src/stores/useLoadingResourceStore.ts
new file mode 100644
index 0000000..2b3fc55
--- /dev/null
+++ b/src/stores/useLoadingResourceStore.ts
@@ -0,0 +1,35 @@
+import type { LoadingResource } from '@/types/common/LoadingResourceType';
+import { defineStore } from 'pinia';
+import { ref, type Ref } from 'vue';
+
+// 存储按需加载的数据
+export const useLoadingResourceStore = defineStore('loadingResource', () => {
+ const loadingResource: Ref>> = ref(
+ {}
+ );
+
+ // 添加数据
+ const addLoadingResource = (key: LoadingResource, value: string[]) => {
+ loadingResource.value[key] = value;
+ };
+
+ // 删除数据
+ const removeLoadingResource = (key: LoadingResource) => {
+ if (Object.hasOwn(loadingResource.value, key)) {
+ delete loadingResource.value[key];
+ }
+ };
+
+ /**
+ * 获取数据
+ */
+ const getLoadingResource = (key: LoadingResource) => {
+ return loadingResource.value[key] || [];
+ };
+
+ return {
+ getLoadingResource,
+ addLoadingResource,
+ removeLoadingResource,
+ };
+});
diff --git a/src/stores/useStatusStore.ts b/src/stores/useStatusStore.ts
index f89570a..3e3fb72 100644
--- a/src/stores/useStatusStore.ts
+++ b/src/stores/useStatusStore.ts
@@ -1,131 +1,89 @@
import { defineStore } from 'pinia';
-import { type Ref, ref } from 'vue';
+import { reactive, ref } from 'vue';
/**
* 全局状态管理
* @returns 应用状态及相关方法
*/
export const useStatusStore = defineStore('status', () => {
+ // ============================ 应用级状态 ================================
+
/**
* 应用加载完成状态
*/
- const appLoadingCompleted: Ref = ref(false);
+ const appLoadingCompleted = ref(false);
+
+ // ============================ UI 组件显示状态 ================================
/**
- * 显示行政区划
+ * UI 组件显示状态集合
*/
- const showAdministrativeDivision = ref(true);
+ const uiComponents = reactive({
+ /** 图例显示状态 */
+ legendShow: true,
+ /** 灾情链影响点表格显示状态 */
+ disasterChainPointShow: false,
+ });
+
+ // ============================ 地图图层显示状态 ================================
/**
- * 灾情链影响点表格显示状态
+ * 地图基础图层显示状态
*/
- const disasterChainPointShow = ref(false);
+ const mapLayers = reactive({
+ /** 显示行政区划 */
+ showAdministrativeDivision: true,
+ /** 隐患点显示状态 */
+ hiddenDangerPointShow: true,
+ /** 风险点显示状态 */
+ riskPointShow: true,
+ });
/**
- * 图例显示状态
+ * POI图层显示状态
*/
- const legendShow = ref(true);
+ const poiLayers = reactive({
+ /** 显示医院 */
+ showHospital: false,
+ /** 显示危险源 */
+ showDangerSource: false,
+ /** 显示避难所 */
+ showRefugeeShelter: false,
+ /** 显示消防站 */
+ showFireStation: false,
+ /** 显示储备点 */
+ showReservePoint: false,
+ /** 显示学校 */
+ showSchool: false,
+ /** 显示人口网格 */
+ showPopulationGrid: false,
+ /** 显示地铁站 */
+ showSubwayStation: false,
+ });
/**
- * 隐患点显示状态
+ * 基础设施图层显示状态
*/
- const hiddenDangerPointShow = ref(true);
-
- /**
- * 风险点显示状态
- */
- const riskPointShow = ref(true);
-
- /**
- * 获取应用加载完成状态
- * @returns 加载完成状态
- */
- const getAppLoadingCompleted = () => appLoadingCompleted.value;
- /**
- * 设置应用加载完成状态
- * @param value - 加载完成状态
- */
- const setAppLoadingCompleted = (value: boolean) => {
- appLoadingCompleted.value = value;
- };
-
- /**
- * 获取显示行政区划
- * @returns 显示行政区划
- */
- const getShowAdministrativeDivision = () => showAdministrativeDivision.value;
- /**
- * 设置显示行政区划
- * @param value - 显示行政区划
- */
- const setShowAdministrativeDivision = (value: boolean) => {
- showAdministrativeDivision.value = value;
- };
-
- /**
- * 获取灾情链影响点表格显示状态
- * @returns 灾情链影像点表格显示状态
- */
- const getDisasterChainPointShow = () => disasterChainPointShow.value;
- /**
- * 设置灾情链影响点表格显示状态
- * @param value - 灾情链影像点表格显示状态
- */
- const setDisasterChainPointShow = (value: boolean) => {
- disasterChainPointShow.value = value;
- };
-
- /**
- * 获取图例显示状态
- * @returns 图例显示状态
- */
- const getLegendShow = () => legendShow.value;
- /**
- * 设置图例显示状态
- * @param value - 图例显示状态
- */
- const setLegendShow = (value: boolean) => {
- legendShow.value = value;
- };
-
- /**
- * 获取隐患点显示状态
- * @returns 隐患点显示状态
- */
- const getHiddenDangerPointShow = () => hiddenDangerPointShow.value;
- /**
- * 设置隐患点显示状态
- * @param value - 隐患点显示状态
- */
- const setHiddenDangerPointShow = (value: boolean) => {
- hiddenDangerPointShow.value = value;
- };
-
- /**
- * 获取风险点显示状态
- * @returns 风险点显示状态
- */
- const getRiskPointShow = () => riskPointShow.value;
- /**
- * 设置风险点显示状态
- * @param value - 风险点显示状态
- */
- const setRiskPointShow = (value: boolean) => {
- riskPointShow.value = value;
- };
+ const infrastructureLayers = reactive({
+ /** 显示管网系统 */
+ showNetworkSystem: false,
+ /** 显示交通道路 */
+ showTrafficRoad: false,
+ /** 显示桥梁 */
+ showBridge: false,
+ /** 显示高速 */
+ showHighway: false,
+ /** 显示国道 */
+ showMainRoad: false,
+ /** 显示水库 */
+ showReservoir: false,
+ });
return {
- getAppLoadingCompleted,
- setAppLoadingCompleted,
- getShowAdministrativeDivision,
- setShowAdministrativeDivision,
- getDisasterChainPointShow,
- setDisasterChainPointShow,
- getLegendShow,
- setLegendShow,
- getHiddenDangerPointShow,
- setHiddenDangerPointShow,
- getRiskPointShow,
- setRiskPointShow,
+ appLoadingCompleted,
+ uiComponents,
+ mapLayers,
+ poiLayers,
+ infrastructureLayers,
};
});
diff --git a/src/types/common/LoadingResourceType.ts b/src/types/common/LoadingResourceType.ts
new file mode 100644
index 0000000..33b2b7f
--- /dev/null
+++ b/src/types/common/LoadingResourceType.ts
@@ -0,0 +1,16 @@
+export enum LoadingResource {
+ /**
+ * 隐患点
+ */
+ HIDDEN_DANGER_POINT = 'HIDDEN_DANGER_POINT',
+
+ /**
+ * 风险点
+ */
+ RISK_POINT = 'RISK_POINT',
+
+ /**
+ * 行政区划
+ */
+ ADMINISTRATIVE_DIVISION = 'ADMINISTRATIVE_DIVISION',
+}
diff --git a/src/views/home/earthquake/EarthquakeView.vue b/src/views/home/earthquake/EarthquakeView.vue
index 2e2df0b..aa1ceea 100644
--- a/src/views/home/earthquake/EarthquakeView.vue
+++ b/src/views/home/earthquake/EarthquakeView.vue
@@ -21,14 +21,22 @@
+
+
+
+
+
+