gis/xian_vue_new
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

区分显示和加载状态，添加医院显示逻辑

Browse Source
This commit is contained in:
wzy-warehouse
2026-04-18 16:40:04 +08:00
parent fe258cd249
commit da7745b7a9
26 changed files with 941 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/earthquake/useEarthquakeDisasterChain.ts
+127 -107
View File
@@ -176,113 +176,133 @@ export const useEarthquakeDisasterChain = () => {
];
// ================控制面板================================
const controlPanel = ref([
{
name: '显示隐患点',
selected: useStatusStore().mapLayers.hiddenDangerPointShow,
callback: useLayerControl().clickHiddenDangerPoint,
},
{
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('显示地铁站');
},
},
]);
/**
* 控制面板信息
*/
const getControlPanel = () => {
const statusStore = useStatusStore();
const layerControl = useLayerControl();
return [
{
name: '显示隐患点',
statusStore: statusStore.mapLayers,
statusKey: 'hiddenDangerPointShow' as const,
callback: layerControl.clickHiddenDangerPoint,
},
{
name: '显示医院',
statusStore: statusStore.poiLayers,
statusKey: 'showHospital' as const,
callback: layerControl.clickHospital,
},
{
name: '显示危险源',
statusStore: statusStore.poiLayers,
statusKey: 'showDangerSource' as const,
callback: (status: unknown) => {
console.log('显示危险源', status);
},
},
{
name: '显示避难所',
statusStore: statusStore.poiLayers,
statusKey: 'showRefugeeShelter' as const,
callback: (status: unknown) => {
console.log('显示避难所', status);
},
},
{
name: '显示消防站',
statusStore: statusStore.poiLayers,
statusKey: 'showFireStation' as const,
callback: (status: unknown) => {
console.log('显示消防站', status);
},
},
{
name: '显示储备点',
statusStore: statusStore.poiLayers,
statusKey: 'showReservePoint' as const,
callback: (status: unknown) => {
console.log('显示储备点', status);
},
},
{
name: '显示学校',
statusStore: statusStore.poiLayers,
statusKey: 'showSchool' as const,
callback: (status: unknown) => {
console.log('显示学校', status);
},
},
{
name: '显示人口网格',
statusStore: statusStore.poiLayers,
statusKey: 'showPopulationGrid' as const,
callback: (status: unknown) => {
console.log('显示人口网格', status);
},
},
{
name: '显示管网系统',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showNetworkSystem' as const,
callback: (status: unknown) => {
console.log('显示管网系统', status);
},
},
{
name: '显示交通道路',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showTrafficRoad' as const,
callback: (status: unknown) => {
console.log('显示交通道路', status);
},
},
{
name: '显示桥梁',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showBridge' as const,
callback: (status: unknown) => {
console.log('显示桥梁', status);
},
},
{
name: '显示高速',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showHighway' as const,
callback: (status: unknown) => {
console.log('显示高速', status);
},
},
{
name: '显示国道',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showMainRoad' as const,
callback: (status: unknown) => {
console.log('显示国道', status);
},
},
{
name: '显示水库',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showReservoir' as const,
callback: (status: unknown) => {
console.log('显示水库', status);
},
},
{
name: '显示地铁站',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showReservoir' as const,
callback: (status: unknown) => {
console.log('显示地铁站', status);
},
},
];
};
// 把所有需要用到的数据/方法 return 出去
return {
conditions,
selectOptions,
@@ -292,7 +312,7 @@ export const useEarthquakeDisasterChain = () => {
legendList,
leftButtonInfo,
rightButtonInfo,
controlPanel,
controlPanel: getControlPanel(),
changeConditions,
changeCurrentPage,
};
src/hooks/map/useMap.ts
+17 -6
View File
@@ -23,24 +23,35 @@ export const useMap = () => {
// 当id改变时候，重置状态
if (
useLoadingInformationStore().getHiddenPointId() !== id &&
useLoadingInformationStore().getRiskPointId() !== id
useLoadingInformationStore().hiddenPoint.id !== id &&
useLoadingInformationStore().riskPoint.id !== id &&
useLoadingInformationStore().hospital.id !== id
) {
useLoadingInformationStore().resetStatue();
}
// 点击对象
useLoadingInformationStore().setClickObject(pickedObject);
useLoadingInformationStore().clickObject.id = pickedObject.id;
useLoadingInformationStore().clickObject.primitive =
pickedObject.primitive;
// 隐患点
if (pickedObject.id.startsWith(config.prefix.hiddenDangerPointId)) {
useLoadingInformationStore().setHiddenPointId(id);
useLoadingInformationStore().hiddenPoint.id = id;
}
// 风险点
else if (pickedObject.id.startsWith(config.prefix.riskPointId)) {
useLoadingInformationStore().setRiskPointId(id);
} else {
useLoadingInformationStore().riskPoint.id = id;
}
// 医院
else if (pickedObject.id.startsWith(config.prefix.hospitalPointId)) {
useLoadingInformationStore().hospital.id = id;
}
// 其他
else {
// 重置状态
useLoadingInformationStore().resetStatue();
}
src/hooks/rain-earthquake/useHospitalPoint.ts
+31
View File
@@ -0,0 +1,31 @@
import { hospitalIcon } from '@/assets';
/**
* 医院相关钩子函数
* @returns
*/
export const useHospitalPoint = () => {
/**
* 字段映射配置
*/
const field = {
name: '医院名称',
level: '级别',
address: '地理位置',
lon: '经度',
lat: '纬度',
sumPeople: '年度诊疗人数',
unitHead: '负责人',
telephone: '手机号',
};
/**
* 获取医院图标
* @returns 图标路径
*/
function getDisasterIcon(): string {
return hospitalIcon;
}
return { field, getDisasterIcon };
};
src/hooks/rainstorm/useRainDisasterChain.ts
+122 -102
View File
@@ -12,6 +12,7 @@ import {
riskAreaIcon,
waterLoggingIcon,
} from '@/assets';
import { useLayerControl } from '../useLayerControl';
/**
* 暴雨灾害链
@@ -211,108 +212,127 @@ 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('显示地铁站');
},
},
];
/**
* 控制面板信息
*/
const getControlPanel = () => {
const statusStore = useStatusStore();
const layerControl = useLayerControl();
return [
{
name: '显示医院',
statusStore: statusStore.poiLayers,
statusKey: 'showHospital' as const,
callback: layerControl.clickHospital,
},
{
name: '显示危险源',
statusStore: statusStore.poiLayers,
statusKey: 'showDangerSource' as const,
callback: (status: unknown) => {
console.log('显示危险源', status);
},
},
{
name: '显示避难所',
statusStore: statusStore.poiLayers,
statusKey: 'showRefugeeShelter' as const,
callback: (status: unknown) => {
console.log('显示避难所', status);
},
},
{
name: '显示消防站',
statusStore: statusStore.poiLayers,
statusKey: 'showFireStation' as const,
callback: (status: unknown) => {
console.log('显示消防站', status);
},
},
{
name: '显示储备点',
statusStore: statusStore.poiLayers,
statusKey: 'showReservePoint' as const,
callback: (status: unknown) => {
console.log('显示储备点', status);
},
},
{
name: '显示学校',
statusStore: statusStore.poiLayers,
statusKey: 'showSchool' as const,
callback: (status: unknown) => {
console.log('显示学校', status);
},
},
{
name: '显示人口网格',
statusStore: statusStore.poiLayers,
statusKey: 'showPopulationGrid' as const,
callback: (status: unknown) => {
console.log('显示人口网格', status);
},
},
{
name: '显示管网系统',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showNetworkSystem' as const,
callback: (status: unknown) => {
console.log('显示管网系统', status);
},
},
{
name: '显示交通道路',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showTrafficRoad' as const,
callback: (status: unknown) => {
console.log('显示交通道路', status);
},
},
{
name: '显示桥梁',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showBridge' as const,
callback: (status: unknown) => {
console.log('显示桥梁', status);
},
},
{
name: '显示高速',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showHighway' as const,
callback: (status: unknown) => {
console.log('显示高速', status);
},
},
{
name: '显示国道',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showMainRoad' as const,
callback: (status: unknown) => {
console.log('显示国道', status);
},
},
{
name: '显示水库',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showReservoir' as const,
callback: (status: unknown) => {
console.log('显示水库', status);
},
},
{
name: '显示地铁站',
statusStore: statusStore.infrastructureLayers,
statusKey: 'showReservoir' as const,
callback: (status: unknown) => {
console.log('显示地铁站', status);
},
},
];
};
// 把所有需要用到的数据/方法 return 出去
return {
conditions,
selectOptions,
@@ -322,8 +342,8 @@ export const useRainDisasterChain = () => {
legendList,
leftButtonInfo,
rightButtonInfo,
controlPanel,
changeConditions,
changeCurrentPage,
controlPanel: getControlPanel(),
};
};
src/hooks/useLayerControl.ts
+20 -1
View File
@@ -1,4 +1,5 @@
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
import { useStatusStore } from '@/stores/useStatusStore';
import { LoadingResource } from '@/types/common/LoadingResourceType';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
@@ -38,5 +39,23 @@ export const useLayerControl = () => {
}
};
return { clickHiddenDangerPoint };
/**
* 点击显示医院
*/
const clickHospital = (status: unknown) => {
if (status as boolean) {
useStatusStore().poiLayers.showHospital.loading = true;
// 显示医院
CesiumUtilsSingleton.batchShowPrimitives(
useLoadingResourceStore().getLoadingResource(LoadingResource.HOSPITAL)
);
} else {
// 隐藏医院
CesiumUtilsSingleton.batchHidePrimitives(
useLoadingResourceStore().getLoadingResource(LoadingResource.HOSPITAL)
);
}
};
return { clickHiddenDangerPoint, clickHospital };
};