存档代码
This commit is contained in:
@@ -1,59 +1,53 @@
|
||||
<template>
|
||||
<div
|
||||
class="around-analysis-box"
|
||||
v-show="statusStore.functionStatus.aroundAnalysis.show"
|
||||
class="around-analysis-box"
|
||||
v-show="statusStore.functionStatus.aroundAnalysis.show"
|
||||
>
|
||||
<!-- 搜索组件 -->
|
||||
<SearchComponent />
|
||||
|
||||
<!-- 按钮组件 -->
|
||||
<ButtonComponent />
|
||||
|
||||
<!-- 具体功能组件 -->
|
||||
<AroundAnalysisDetailComponent />
|
||||
</div>
|
||||
|
||||
<!-- 区域选择对话框（fixed定位，相对于视口） -->
|
||||
<div v-if="analysisButtonState.showAreaDialog.value" class="search-area-dialog" :style="{ left: analysisButtonState.dialogPosition.x + 'px', top: analysisButtonState.dialogPosition.y + 'px' }">
|
||||
<div v-if="aroundAnalysisState.showAreaDialog.value" class="search-area-dialog" :style="{ left: aroundAnalysisState.dialogPosition.x + 'px', top: aroundAnalysisState.dialogPosition.y + 'px' }">
|
||||
<div class="dialog-header">选择区域</div>
|
||||
<div class="dialog-content">
|
||||
<div class="radius-input-group">
|
||||
<span class="label">半径：</span>
|
||||
<input
|
||||
v-model.number="analysisButtonState.radius.value"
|
||||
type="number"
|
||||
class="radius-input"
|
||||
min="1"
|
||||
max="100"
|
||||
v-model.number="aroundAnalysisState.radius.value"
|
||||
type="number"
|
||||
class="radius-input"
|
||||
min="1"
|
||||
max="100"
|
||||
/>
|
||||
<span class="unit">公里</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-footer">
|
||||
<button class="confirm-btn" @click="analysisButtonState.handleConfirm">确认添加</button>
|
||||
<button class="cancel-btn" @click="analysisButtonState.handleCancel">取消</button>
|
||||
<button class="confirm-btn" @click="aroundAnalysisState.handleConfirm">确认添加</button>
|
||||
<button class="cancel-btn" @click="aroundAnalysisState.handleCancel">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { provide } from 'vue';//从Vue导入provide函数，用于依赖注入
|
||||
import { provide } from 'vue';
|
||||
import { useStatusStore } from '@/stores/useStatusStore';
|
||||
import { useAroundButton } from '@/hooks/rain-earthquake/useAroundButton.ts';
|
||||
import { useAroundSearch } from '@/hooks/rain-earthquake/useAroundSearch.ts';
|
||||
import { useAroundAnalysis } from '@/hooks/rain-earthquake/useAroundAnalysis';
|
||||
import type { AroundAnalysisState } from '@/types/common/useAroundAnalysisType';
|
||||
import ButtonComponent from './around-analysis/ButtonComponent.vue';
|
||||
import SearchComponent from './around-analysis/SearchComponent.vue';
|
||||
|
||||
|
||||
const statusStore = useStatusStore();
|
||||
|
||||
// 在父组件中创建唯一的 Hook 实例
|
||||
const analysisButtonState = useAroundButton();
|
||||
const searchState = useAroundSearch();
|
||||
const aroundAnalysisState = useAroundAnalysis();
|
||||
|
||||
// 通过 provide 共享给所有子组件
|
||||
provide('analysisButtonState', analysisButtonState);
|
||||
provide('searchState', searchState);
|
||||
provide<AroundAnalysisState>('aroundAnalysisState', aroundAnalysisState);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
<!-- 按钮组件 -->
|
||||
<template>
|
||||
<div class="analysis-button-box">
|
||||
<ul class="analysis-button-ul">
|
||||
<li v-for="(buttonItem, index) in analysisButtons" :key="index">
|
||||
<li v-for="(buttonItem, index) in aroundAnalysisState.analysisButtons" :key="index">
|
||||
<button
|
||||
@click="handleButtonClick(index, buttonItem.callback)"
|
||||
:style="{
|
||||
'background-image': `url(${selectedButtonIndex === index ? rightOrangeButton : rightBlueButton})`,
|
||||
@click="aroundAnalysisState.handleButtonClick(index, buttonItem.callback)"
|
||||
:style="{
|
||||
'background-image': `url(${aroundAnalysisState.selectedButtonIndex.value === index ? rightOrangeButton : rightBlueButton})`,
|
||||
}"
|
||||
>
|
||||
{{ selectedButtonIndex === index && buttonItem.activeName ? buttonItem.activeName : buttonItem.name }}
|
||||
{{ aroundAnalysisState.selectedButtonIndex.value === index && buttonItem.activeName ? buttonItem.activeName : buttonItem.name }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -18,16 +19,10 @@
|
||||
<script lang="ts" setup>
|
||||
import { inject } from 'vue';
|
||||
import { rightBlueButton, rightOrangeButton } from '@/assets';
|
||||
import type { AnalysisButtonState } from '@/types/common/useAroundAnalysisType';
|
||||
import type { AroundAnalysisState } from '@/types/common/useAroundAnalysisType';
|
||||
|
||||
// 从父组件注入共享状态，明确指定类型
|
||||
const analysisButtonState = inject<AnalysisButtonState>('analysisButtonState');
|
||||
|
||||
const {
|
||||
selectedButtonIndex,
|
||||
analysisButtons,
|
||||
handleButtonClick
|
||||
} = analysisButtonState!;
|
||||
// 从父组件注入共享的 Hook 实例
|
||||
const aroundAnalysisState = inject<AroundAnalysisState>('aroundAnalysisState')!;
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
<!-- 搜索组件 -->
|
||||
<template>
|
||||
<div class="search-component-box">
|
||||
<el-autocomplete
|
||||
v-model="state"
|
||||
:fetch-suggestions="querySearch"
|
||||
v-model="aroundAnalysisState.searchState.value"
|
||||
:fetch-suggestions="aroundAnalysisState.querySearch"
|
||||
popper-class="my-autocomplete"
|
||||
placeholder="搜索地点"
|
||||
@select="handleSelect"
|
||||
@focus="handleFocus"
|
||||
@select="aroundAnalysisState.handleSelect"
|
||||
@focus="aroundAnalysisState.handleFocus"
|
||||
clearable
|
||||
:disabled="!canSearch"
|
||||
:disabled="!aroundAnalysisState.canSearch.value"
|
||||
:teleported="false"
|
||||
>
|
||||
<template #suffix>
|
||||
@@ -25,36 +26,12 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { inject, onMounted } from 'vue';
|
||||
import { inject } from 'vue';
|
||||
import { Edit } from '@element-plus/icons-vue';
|
||||
import type { PointResource } from '@/types/common/useAroundAnalysisType';
|
||||
import type { AnalysisButtonState } from '@/types/common/useAroundAnalysisType';
|
||||
import type { AroundAnalysisState } from '@/types/common/useAroundAnalysisType';
|
||||
|
||||
// 从父组件注入搜索状态和按钮状态
|
||||
const searchState = inject<ReturnType<typeof import('@/hooks/rain-earthquake/useAroundSearch').useAroundSearch>>('searchState');
|
||||
const buttonState = inject<AnalysisButtonState>('analysisButtonState');
|
||||
|
||||
const {
|
||||
state,
|
||||
canSearch,
|
||||
querySearch,
|
||||
handleSelect: baseHandleSelect,
|
||||
handleFocus,
|
||||
} = searchState!;
|
||||
|
||||
// 包装 handleSelect，在搜索选择后触发区域分析
|
||||
const handleSelect = async (item: PointResource) => {
|
||||
await baseHandleSelect(item);
|
||||
// 飞行完成后，触发区域分析
|
||||
buttonState?.startAreaAnalysisFromSearch(item);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 加载数据
|
||||
if (searchState) {
|
||||
handleFocus();
|
||||
}
|
||||
});
|
||||
// 从父组件注入共享的 Hook 实例
|
||||
const aroundAnalysisState = inject<AroundAnalysisState>('aroundAnalysisState')!;
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
import { LoadingResource } from '@/types/common/LoadingResourceType';
|
||||
import type { ResourceConfig } from '@/types/common/useAroundAnalysisType';
|
||||
|
||||
/**
|
||||
* 周边分析资源配置（统一管理）
|
||||
*/
|
||||
export const RESOURCE_CONFIGS: ResourceConfig[] = [
|
||||
{ key: LoadingResource.SCHOOL, category: 'school' },
|
||||
{ key: LoadingResource.HOSPITAL, category: 'hospital' },
|
||||
{ key: LoadingResource.DANGEROUS_SOURCE, category: 'danger' },
|
||||
{ key: LoadingResource.EMERGENCY_SHELTER, category: 'shelter' },
|
||||
{ key: LoadingResource.FIRE_STATION, category: 'fire' },
|
||||
{ key: LoadingResource.STORE_POINTS, category: 'store' },
|
||||
{ key: LoadingResource.SUBWAY_STATION, category: 'subway' },
|
||||
{ key: LoadingResource.LANDSLIDE_HIDDEN_POINT, category: 'hidden-danger', forcedType: 'landslide' },
|
||||
{ key: LoadingResource.DEBRIS_FLOW_HIDDEN_POINT, category: 'hidden-danger', forcedType: 'debris_flow' },
|
||||
{ key: LoadingResource.WATER_LOGGING_HIDDEN_POINT, category: 'hidden-danger', forcedType: 'water_logging' },
|
||||
{ key: LoadingResource.FLASH_FLOOD_HIDDEN_POINT, category: 'hidden-danger', forcedType: 'flash_flood' },
|
||||
{ key: LoadingResource.COLLAPSE_HIDDEN_POINT, category: 'hidden-danger', forcedType: 'collapse' },
|
||||
{ key: LoadingResource.RISK_POINT, category: 'risk-point' },
|
||||
{ key: LoadingResource.BRIDGE, category: 'bridge' },
|
||||
{ key: LoadingResource.RESERVOIR, category: 'reservoir' },
|
||||
];
|
||||
|
||||
/**
|
||||
* 常量配置
|
||||
*/
|
||||
export const AROUND_ANALYSIS_CONSTANTS = {
|
||||
DIALOG_WIDTH: 280,
|
||||
DIALOG_HEIGHT: 150,
|
||||
DIALOG_PADDING: 10,
|
||||
DIALOG_OFFSET: 20,
|
||||
EARTH_RADIUS: 6371000,
|
||||
MIN_FLY_HEIGHT: 10000,
|
||||
FLY_HEIGHT_MULTIPLIER: 6000,
|
||||
FLY_DURATION: 2,
|
||||
} as const;
|
||||
@@ -0,0 +1,336 @@
|
||||
import { ref, reactive, onUnmounted, watch, computed } from 'vue';
|
||||
import { useStatusStore } from '@/stores/useStatusStore';
|
||||
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
|
||||
import { RESOURCE_CONFIGS, AROUND_ANALYSIS_CONSTANTS } from '@/config/aroundAnalysisConfig';
|
||||
import type { PointResource, PointResourceCategory, AnalysisButtonConfig, AroundAnalysisState } from '@/types/common/useAroundAnalysisType';
|
||||
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
|
||||
import { isCategoryVisible, loadAllPointData, calculateDistance } from '@/utils/aroundAnalysisUtils';
|
||||
import {
|
||||
ScreenSpaceEventHandler,
|
||||
ScreenSpaceEventType,
|
||||
Cartesian2,
|
||||
Cartographic,
|
||||
Cartesian3,
|
||||
} from 'cesium';
|
||||
import { useCircleDrawer } from './useCircleDrawer';
|
||||
import { usePulseEffect } from './usePulseEffect';
|
||||
import { useMarkerManager } from './useMarkerManager';
|
||||
|
||||
/**
|
||||
* 周边分析统一 Hook（合并按钮和搜索逻辑）
|
||||
*/
|
||||
export const useAroundAnalysis = (): AroundAnalysisState => {
|
||||
const statusStore = useStatusStore();
|
||||
|
||||
// ==================== 响应式状态 ====================
|
||||
const selectedButtonIndex = ref<number>(-1);
|
||||
const showAreaDialog = ref(false);
|
||||
const radius = ref(10);
|
||||
const dialogPosition = reactive({ x: 0, y: 0 });
|
||||
const pulsePoints = ref<PointResource[]>([]);
|
||||
const showPulsePointList = ref(false);
|
||||
const searchState = ref('');
|
||||
const canSearch = computed(() => {
|
||||
return RESOURCE_CONFIGS.some(config => isCategoryVisible(config.category, config.forcedType));
|
||||
});
|
||||
|
||||
let clickHandler: ScreenSpaceEventHandler | null = null;
|
||||
let currentCenterPosition: Cartesian3 | null = null;
|
||||
|
||||
// ==================== 组合子 Hook ====================
|
||||
const { drawCircle, clearCircle } = useCircleDrawer();
|
||||
const { addPulseEffectToPoints, removePulseEffect } = usePulseEffect();
|
||||
const { addMarker, removeMarker } = useMarkerManager();
|
||||
|
||||
// ==================== 核心功能 ====================
|
||||
const getPointsInCircle = (centerPosition: Cartesian3, radiusKm: number): PointResource[] => {
|
||||
const cartographic = Cartographic.fromCartesian(centerPosition);
|
||||
const centerLon = cartographic.longitude * (180 / Math.PI);
|
||||
const centerLat = cartographic.latitude * (180 / Math.PI);
|
||||
|
||||
const allPoints = loadAllPointData(RESOURCE_CONFIGS);
|
||||
const radiusMeters = radiusKm * 1000;
|
||||
|
||||
return allPoints.filter(point => {
|
||||
if (point.lon === undefined || point.lat === undefined) return false;
|
||||
const distance = calculateDistance(centerLon, centerLat, point.lon, point.lat);
|
||||
return distance <= radiusMeters && isCategoryVisible(point.category as PointResourceCategory, point.originalType);
|
||||
});
|
||||
};
|
||||
|
||||
const refreshPulseEffect = () => {
|
||||
if (!currentCenterPosition) return;
|
||||
removePulseEffect();
|
||||
const pointsInCircle = getPointsInCircle(currentCenterPosition, radius.value);
|
||||
addPulseEffectToPoints(pointsInCircle);
|
||||
pulsePoints.value = pointsInCircle;
|
||||
showPulsePointList.value = true;
|
||||
};
|
||||
|
||||
const clearAllAnalysisResources = () => {
|
||||
removeMarker();
|
||||
clearCircle();
|
||||
removePulseEffect();
|
||||
currentCenterPosition = null;
|
||||
pulsePoints.value = [];
|
||||
showPulsePointList.value = false;
|
||||
};
|
||||
|
||||
const clearVisualEffectsOnly = () => {
|
||||
clearCircle();
|
||||
removePulseEffect();
|
||||
pulsePoints.value = [];
|
||||
showPulsePointList.value = false;
|
||||
};
|
||||
|
||||
// ==================== 地图事件 ====================
|
||||
const registerMapClickHandler = () => {
|
||||
const viewer = CesiumUtilsSingleton.getViewer();
|
||||
if (!viewer) return;
|
||||
|
||||
clickHandler = new ScreenSpaceEventHandler(viewer.scene.canvas);
|
||||
clickHandler.setInputAction((clickEvent: { position: Cartesian2 }) => {
|
||||
const cartesian = viewer.camera.pickEllipsoid(clickEvent.position, viewer.scene.globe.ellipsoid);
|
||||
if (cartesian) {
|
||||
currentCenterPosition = cartesian;
|
||||
const cartographic = Cartographic.fromCartesian(cartesian);
|
||||
console.log('点击位置:', {
|
||||
longitude: cartographic.longitude * (180 / Math.PI),
|
||||
latitude: cartographic.latitude * (180 / Math.PI)
|
||||
});
|
||||
addMarker(cartesian);
|
||||
showAreaDialog.value = true;
|
||||
calculateDialogPosition(clickEvent.position);
|
||||
}
|
||||
}, ScreenSpaceEventType.LEFT_CLICK);
|
||||
};
|
||||
|
||||
const removeMapClickHandler = () => {
|
||||
if (clickHandler) {
|
||||
clickHandler.destroy();
|
||||
clickHandler = null;
|
||||
}
|
||||
};
|
||||
|
||||
const calculateDialogPosition = (clickPosition: Cartesian2) => {
|
||||
const { innerWidth: screenWidth, innerHeight: screenHeight } = window;
|
||||
const { DIALOG_WIDTH, DIALOG_HEIGHT, DIALOG_PADDING, DIALOG_OFFSET } = AROUND_ANALYSIS_CONSTANTS;
|
||||
|
||||
let x = clickPosition.x + DIALOG_OFFSET;
|
||||
let y = clickPosition.y + DIALOG_OFFSET;
|
||||
|
||||
if (x + DIALOG_WIDTH > screenWidth - DIALOG_PADDING) {
|
||||
x = clickPosition.x - DIALOG_WIDTH - DIALOG_OFFSET;
|
||||
}
|
||||
if (y + DIALOG_HEIGHT > screenHeight - DIALOG_PADDING) {
|
||||
y = clickPosition.y - DIALOG_HEIGHT - DIALOG_OFFSET;
|
||||
}
|
||||
|
||||
dialogPosition.x = Math.max(DIALOG_PADDING, Math.min(x, screenWidth - DIALOG_WIDTH - DIALOG_PADDING));
|
||||
dialogPosition.y = Math.max(DIALOG_PADDING, Math.min(y, screenHeight - DIALOG_HEIGHT - DIALOG_PADDING));
|
||||
};
|
||||
|
||||
// ==================== 事件处理 ====================
|
||||
const handleConfirm = () => {
|
||||
if (!currentCenterPosition) {
|
||||
console.error('中心点位置不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
clearVisualEffectsOnly();
|
||||
drawCircle(currentCenterPosition, radius.value);
|
||||
|
||||
const pointsInCircle = getPointsInCircle(currentCenterPosition, radius.value);
|
||||
addPulseEffectToPoints(pointsInCircle);
|
||||
pulsePoints.value = pointsInCircle;
|
||||
showPulsePointList.value = true;
|
||||
|
||||
const cartographic = Cartographic.fromCartesian(currentCenterPosition);
|
||||
const longitude = cartographic.longitude * (180 / Math.PI);
|
||||
const latitude = cartographic.latitude * (180 / Math.PI);
|
||||
|
||||
const flyHeight = Math.max(radius.value * AROUND_ANALYSIS_CONSTANTS.FLY_HEIGHT_MULTIPLIER, AROUND_ANALYSIS_CONSTANTS.MIN_FLY_HEIGHT);
|
||||
CesiumUtilsSingleton.flyToTarget([longitude, latitude, flyHeight], AROUND_ANALYSIS_CONSTANTS.FLY_DURATION);
|
||||
|
||||
showAreaDialog.value = false;
|
||||
removeMapClickHandler();
|
||||
|
||||
const viewer = CesiumUtilsSingleton.getViewer();
|
||||
if (viewer?.canvas) {
|
||||
statusStore.cursorStyle = 'default';
|
||||
viewer.canvas.style.cursor = 'default';
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
showAreaDialog.value = false;
|
||||
clearAllAnalysisResources();
|
||||
};
|
||||
|
||||
const handleButtonClick = (index: number, callback: (status: boolean) => void) => {
|
||||
const isActive = selectedButtonIndex.value === index;
|
||||
|
||||
if (isActive) {
|
||||
selectedButtonIndex.value = -1;
|
||||
callback(false);
|
||||
} else {
|
||||
if (selectedButtonIndex.value !== -1) {
|
||||
clearAllAnalysisResources();
|
||||
showAreaDialog.value = false;
|
||||
}
|
||||
selectedButtonIndex.value = index;
|
||||
callback(true);
|
||||
}
|
||||
};
|
||||
|
||||
const startAreaAnalysisFromSearch = (point: PointResource) => {
|
||||
if (point.lon == null || point.lat == null) return;
|
||||
|
||||
clearAllAnalysisResources();
|
||||
currentCenterPosition = Cartesian3.fromDegrees(point.lon, point.lat, 0);
|
||||
selectedButtonIndex.value = 0;
|
||||
|
||||
const viewer = CesiumUtilsSingleton.getViewer();
|
||||
if (viewer?.canvas) {
|
||||
statusStore.cursorStyle = 'crosshair';
|
||||
viewer.canvas.style.cursor = 'crosshair';
|
||||
}
|
||||
|
||||
addMarker(currentCenterPosition);
|
||||
showAreaDialog.value = true;
|
||||
|
||||
const centerX = window.innerWidth / 2;
|
||||
const centerY = window.innerHeight / 2;
|
||||
const { DIALOG_WIDTH, DIALOG_HEIGHT, DIALOG_PADDING, DIALOG_OFFSET } = AROUND_ANALYSIS_CONSTANTS;
|
||||
|
||||
dialogPosition.x = Math.max(DIALOG_PADDING, Math.min(centerX + DIALOG_OFFSET, window.innerWidth - DIALOG_WIDTH - DIALOG_PADDING));
|
||||
dialogPosition.y = Math.max(DIALOG_PADDING, Math.min(centerY + DIALOG_OFFSET, window.innerHeight - DIALOG_HEIGHT - DIALOG_PADDING));
|
||||
};
|
||||
|
||||
// ==================== 搜索功能 ====================
|
||||
const querySearch = (queryString: string, cb: (results: PointResource[]) => void) => {
|
||||
if (!canSearch.value) {
|
||||
cb([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const lowerQuery = queryString.toLowerCase();
|
||||
const allResources = loadAllPointData(RESOURCE_CONFIGS);
|
||||
|
||||
const filteredResults = allResources.filter(item => {
|
||||
const config = RESOURCE_CONFIGS.find(c => c.category === item.category);
|
||||
let isVisible = false;
|
||||
|
||||
if (config) {
|
||||
isVisible = isCategoryVisible(config.category, config.forcedType || item.originalType);
|
||||
}
|
||||
|
||||
if (!isVisible) return false;
|
||||
if (!queryString) return true;
|
||||
|
||||
return (item.value || '').toLowerCase().includes(lowerQuery);
|
||||
});
|
||||
|
||||
cb(filteredResults);
|
||||
};
|
||||
|
||||
const handleSelect = async (item: PointResource) => {
|
||||
if (item.lon == null || item.lat == null) return;
|
||||
await CesiumUtilsSingleton.flyToTarget([item.lon, item.lat, 6000]);
|
||||
startAreaAnalysisFromSearch(item);
|
||||
};
|
||||
|
||||
const handleFocus = () => {
|
||||
// 触发数据刷新（如果需要）
|
||||
};
|
||||
|
||||
// ==================== 监听器 ====================
|
||||
watch(
|
||||
() => useLoadingResourceStore().loadingResource,
|
||||
() => {
|
||||
if (currentCenterPosition && showPulsePointList.value) {
|
||||
refreshPulseEffect();
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const poi = computed(() => statusStore.poiLayers);
|
||||
const map = computed(() => statusStore.mapLayers);
|
||||
const infra = computed(() => statusStore.infrastructureLayers);
|
||||
|
||||
watch([
|
||||
() => poi.value.showSchool.show,
|
||||
() => poi.value.showHospital.show,
|
||||
() => poi.value.showDangerSource.show,
|
||||
() => poi.value.showRefugeeShelter.show,
|
||||
() => poi.value.showFireStation.show,
|
||||
() => poi.value.showReservePoint.show,
|
||||
() => poi.value.showSubwayStation.show,
|
||||
() => poi.value.showLandslideHiddenPoint.show,
|
||||
() => poi.value.showDebrisFlowHiddenPoint.show,
|
||||
() => poi.value.showWaterLoggingHiddenPoint.show,
|
||||
() => poi.value.showFlashFloodHiddenPoint.show,
|
||||
() => map.value.riskPointShow.show,
|
||||
() => infra.value.showBridge.show,
|
||||
() => infra.value.showReservoir.show,
|
||||
], () => {
|
||||
if (currentCenterPosition && showPulsePointList.value) {
|
||||
refreshPulseEffect();
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
clearAllAnalysisResources();
|
||||
removeMapClickHandler();
|
||||
});
|
||||
|
||||
// ==================== 按钮配置 ====================
|
||||
const analysisButtons: AnalysisButtonConfig[] = [
|
||||
{
|
||||
name: '标记区域分析',
|
||||
activeName: '取消区域分析',
|
||||
callback: (status: boolean) => {
|
||||
const viewer = CesiumUtilsSingleton.getViewer();
|
||||
if (!viewer?.canvas) return;
|
||||
|
||||
statusStore.cursorStyle = status ? 'crosshair' : 'default';
|
||||
viewer.canvas.style.cursor = status ? 'crosshair' : 'default';
|
||||
|
||||
if (status) {
|
||||
registerMapClickHandler();
|
||||
} else {
|
||||
removeMapClickHandler();
|
||||
clearAllAnalysisResources();
|
||||
showAreaDialog.value = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '隐藏行政区划',
|
||||
callback: (status: boolean) => {
|
||||
statusStore.mapLayers.showAdministrativeDivision.show = !status;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return {
|
||||
selectedButtonIndex,
|
||||
showAreaDialog,
|
||||
radius,
|
||||
dialogPosition,
|
||||
analysisButtons,
|
||||
searchState,
|
||||
canSearch,
|
||||
pulsePoints,
|
||||
showPulsePointList,
|
||||
handleButtonClick,
|
||||
handleConfirm,
|
||||
handleCancel,
|
||||
refreshPulseEffect,
|
||||
startAreaAnalysisFromSearch,
|
||||
querySearch,
|
||||
handleSelect,
|
||||
handleFocus,
|
||||
};
|
||||
};
|
||||
@@ -1,453 +0,0 @@
|
||||
import { ref, reactive, onUnmounted, watch, computed } from 'vue';
|
||||
import { useStatusStore } from '@/stores/useStatusStore';
|
||||
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
|
||||
import { LoadingResource } from '@/types/common/LoadingResourceType';
|
||||
import type {
|
||||
PointResource,
|
||||
PointResourceCategory,
|
||||
ButtonResourceConfig,
|
||||
AnalysisButtonConfig,
|
||||
DialogPosition,
|
||||
AnalysisButtonState
|
||||
} from '@/types/common/useAroundAnalysisType';
|
||||
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
|
||||
import {
|
||||
ScreenSpaceEventHandler,
|
||||
ScreenSpaceEventType,
|
||||
Cartesian2,
|
||||
Cartographic,
|
||||
Cartesian3,
|
||||
} from 'cesium';
|
||||
import { useCircleDrawer } from './useCircleDrawer';
|
||||
import { usePulseEffect } from './usePulseEffect';
|
||||
import { useMarkerManager } from './useMarkerManager';
|
||||
|
||||
// ==================== 常量配置 ====================
|
||||
const DIALOG_WIDTH = 280;
|
||||
const DIALOG_HEIGHT = 150;
|
||||
const DIALOG_PADDING = 10;
|
||||
const DIALOG_OFFSET = 20;
|
||||
const EARTH_RADIUS = 6371000;
|
||||
const MIN_FLY_HEIGHT = 10000;
|
||||
const FLY_HEIGHT_MULTIPLIER = 6000;
|
||||
const FLY_DURATION = 2;
|
||||
|
||||
// ==================== Store 实例 ====================
|
||||
const statusStore = useStatusStore();
|
||||
const loadingResourceStore = useLoadingResourceStore();
|
||||
|
||||
const poi = computed(() => statusStore.poiLayers);
|
||||
const map = computed(() => statusStore.mapLayers);
|
||||
const infra = computed(() => statusStore.infrastructureLayers);
|
||||
|
||||
// ==================== 资源配置 ====================
|
||||
const RESOURCE_CONFIGS: ButtonResourceConfig[] = [
|
||||
{ key: LoadingResource.SCHOOL, category: 'school' },
|
||||
{ key: LoadingResource.HOSPITAL, category: 'hospital' },
|
||||
{ key: LoadingResource.DANGEROUS_SOURCE, category: 'danger' },
|
||||
{ key: LoadingResource.EMERGENCY_SHELTER, category: 'shelter' },
|
||||
{ key: LoadingResource.FIRE_STATION, category: 'fire' },
|
||||
{ key: LoadingResource.STORE_POINTS, category: 'store' },
|
||||
{ key: LoadingResource.SUBWAY_STATION, category: 'subway' },
|
||||
{ key: LoadingResource.LANDSLIDE_HIDDEN_POINT, category: 'hidden-danger', forcedType: 'landslide' },
|
||||
{ key: LoadingResource.DEBRIS_FLOW_HIDDEN_POINT, category: 'hidden-danger', forcedType: 'debris_flow' },
|
||||
{ key: LoadingResource.WATER_LOGGING_HIDDEN_POINT, category: 'hidden-danger', forcedType: 'water_logging' },
|
||||
{ key: LoadingResource.FLASH_FLOOD_HIDDEN_POINT, category: 'hidden-danger', forcedType: 'flash_flood' },
|
||||
{ key: LoadingResource.COLLAPSE_HIDDEN_POINT, category: 'hidden-danger', forcedType: 'collapse' },
|
||||
{ key: LoadingResource.RISK_POINT, category: 'risk-point' },
|
||||
{ key: LoadingResource.BRIDGE, category: 'bridge' },
|
||||
{ key: LoadingResource.RESERVOIR, category: 'reservoir' },
|
||||
];
|
||||
// ==================== 图层可见性判断 ====================
|
||||
const isCategoryVisible = (category: PointResourceCategory, originalType?: string): boolean => {
|
||||
const visibilityMap: Record<string, () => boolean> = {
|
||||
school: () => poi.value.showSchool.show,
|
||||
hospital: () => poi.value.showHospital.show,
|
||||
danger: () => poi.value.showDangerSource.show,
|
||||
shelter: () => poi.value.showRefugeeShelter.show,
|
||||
fire: () => poi.value.showFireStation.show,
|
||||
store: () => poi.value.showReservePoint.show,
|
||||
subway: () => poi.value.showSubwayStation.show,
|
||||
'risk-point': () => map.value.riskPointShow.show,
|
||||
bridge: () => infra.value.showBridge.show,
|
||||
reservoir: () => infra.value.showReservoir.show,
|
||||
'hidden-danger': () => {
|
||||
const hiddenMap: Record<string, () => boolean> = {
|
||||
landslide: () => poi.value.showLandslideHiddenPoint.show,
|
||||
debris_flow: () => poi.value.showDebrisFlowHiddenPoint.show,
|
||||
water_logging: () => poi.value.showWaterLoggingHiddenPoint.show,
|
||||
flash_flood: () => poi.value.showFlashFloodHiddenPoint.show,
|
||||
collapse: () => poi.value.showCollapseHiddenPoint.show,
|
||||
};
|
||||
return hiddenMap[originalType || '']?.() ?? false;
|
||||
},
|
||||
};
|
||||
return visibilityMap[category]?.() ?? false;
|
||||
};
|
||||
|
||||
// ==================== 响应式状态 ====================
|
||||
export const useAroundButton = (): AnalysisButtonState => {
|
||||
const selectedButtonIndex = ref<number>(-1);
|
||||
const showAreaDialog = ref(false);
|
||||
const radius = ref(10);
|
||||
const dialogPosition = reactive<DialogPosition>({ x: 0, y: 0 });
|
||||
const pulsePoints = ref<PointResource[]>([]);
|
||||
const showPulsePointList = ref(false);
|
||||
|
||||
let clickHandler: ScreenSpaceEventHandler | null = null;
|
||||
let currentCenterPosition: Cartesian3 | null = null;
|
||||
|
||||
// ==================== 组合子 Hook ====================
|
||||
const { drawCircle, clearCircle } = useCircleDrawer();
|
||||
const { addPulseEffectToPoints, removePulseEffect } = usePulseEffect();
|
||||
const { addMarker, removeMarker } = useMarkerManager();
|
||||
|
||||
// ==================== 数据加载与计算 ====================
|
||||
|
||||
const loadAllPointData = (): PointResource[] => {
|
||||
const resources: PointResource[] = [];
|
||||
|
||||
RESOURCE_CONFIGS.forEach(config => {
|
||||
const data = loadingResourceStore.getLoadingResource(config.key).info;
|
||||
if (Array.isArray(data)) {
|
||||
const convertedData = data.map((item: Record<string, unknown>) => {
|
||||
const id = item.id || item._id || item.uuid || 'unknown_id';
|
||||
const safeId = typeof id === 'string' ? id : typeof id === 'number' ? id : 'unknown_id';
|
||||
const value = (item.name && String(item.name).trim() !== '')
|
||||
? String(item.name)
|
||||
: String(safeId);
|
||||
|
||||
return {
|
||||
...item,
|
||||
id: safeId,
|
||||
value,
|
||||
category: config.category,
|
||||
originalType: (config.forcedType || (item.type as string) || (item.disasterType as string))?.toLowerCase()
|
||||
};
|
||||
});
|
||||
resources.push(...convertedData);
|
||||
}
|
||||
});
|
||||
|
||||
const seenIds = new Map<string | number, PointResource>();
|
||||
for (const item of resources) {
|
||||
if (!seenIds.has(item.id)) {
|
||||
seenIds.set(item.id, item);
|
||||
}
|
||||
}
|
||||
|
||||
const uniqueResources = Array.from(seenIds.values());
|
||||
console.log('加载的点数据总数:', uniqueResources.length);
|
||||
return uniqueResources;
|
||||
};
|
||||
|
||||
const calculateDistance = (
|
||||
centerLon: number,
|
||||
centerLat: number,
|
||||
pointLon: unknown,
|
||||
pointLat: unknown
|
||||
): number => {
|
||||
const pLon = Number(pointLon);
|
||||
const pLat = Number(pointLat);
|
||||
|
||||
if (isNaN(pLon) || isNaN(pLat)) return Infinity;
|
||||
|
||||
const dLat = (pLat - centerLat) * Math.PI / 180;
|
||||
const dLon = (pLon - centerLon) * Math.PI / 180;
|
||||
const a = Math.sin(dLat / 2) ** 2 +
|
||||
Math.cos(centerLat * Math.PI / 180) * Math.cos(pLat * Math.PI / 180) *
|
||||
Math.sin(dLon / 2) ** 2;
|
||||
return EARTH_RADIUS * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||||
};
|
||||
|
||||
const getPointsInCircle = (centerPosition: Cartesian3, radiusKm: number): PointResource[] => {
|
||||
const cartographic = Cartographic.fromCartesian(centerPosition);
|
||||
const centerLon = cartographic.longitude * (180 / Math.PI);
|
||||
const centerLat = cartographic.latitude * (180 / Math.PI);
|
||||
|
||||
const allPoints = loadAllPointData();
|
||||
const radiusMeters = radiusKm * 1000;
|
||||
|
||||
return allPoints.filter(point => {
|
||||
if (point.lon === undefined || point.lat === undefined) return false;
|
||||
|
||||
const distance = calculateDistance(centerLon, centerLat, point.lon, point.lat);
|
||||
return distance <= radiusMeters && isCategoryVisible(point.category as PointResourceCategory, point.originalType);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 刷新脉冲效果
|
||||
*/
|
||||
const refreshPulseEffect = () => {
|
||||
if (!currentCenterPosition) return;
|
||||
|
||||
console.log('刷新脉冲效果...');
|
||||
removePulseEffect();
|
||||
|
||||
const pointsInCircle = getPointsInCircle(currentCenterPosition, radius.value);
|
||||
addPulseEffectToPoints(pointsInCircle);
|
||||
pulsePoints.value = pointsInCircle;
|
||||
showPulsePointList.value = true;
|
||||
};
|
||||
|
||||
// ==================== 地图事件处理 ====================
|
||||
|
||||
const registerMapClickHandler = () => {
|
||||
const viewer = CesiumUtilsSingleton.getViewer();
|
||||
if (!viewer) return;
|
||||
|
||||
clickHandler = new ScreenSpaceEventHandler(viewer.scene.canvas);
|
||||
clickHandler.setInputAction((clickEvent: { position: Cartesian2 }) => {
|
||||
const cartesian = viewer.camera.pickEllipsoid(clickEvent.position, viewer.scene.globe.ellipsoid);
|
||||
if (cartesian) {
|
||||
currentCenterPosition = cartesian;
|
||||
const cartographic = Cartographic.fromCartesian(cartesian);
|
||||
const longitude = cartographic.longitude * (180 / Math.PI);
|
||||
const latitude = cartographic.latitude * (180 / Math.PI);
|
||||
|
||||
console.log('点击位置:', { longitude, latitude });
|
||||
addMarker(cartesian);
|
||||
showAreaDialog.value = true;
|
||||
calculateDialogPosition(clickEvent.position);
|
||||
}
|
||||
}, ScreenSpaceEventType.LEFT_CLICK);
|
||||
};
|
||||
|
||||
const removeMapClickHandler = () => {
|
||||
if (clickHandler) {
|
||||
clickHandler.destroy();
|
||||
clickHandler = null;
|
||||
}
|
||||
};
|
||||
|
||||
const calculateDialogPosition = (clickPosition: Cartesian2) => {
|
||||
const screenWidth = window.innerWidth;
|
||||
const screenHeight = window.innerHeight;
|
||||
|
||||
let x = clickPosition.x + DIALOG_OFFSET;
|
||||
let y = clickPosition.y + DIALOG_OFFSET;
|
||||
|
||||
if (x + DIALOG_WIDTH > screenWidth - DIALOG_PADDING) {
|
||||
x = clickPosition.x - DIALOG_WIDTH - DIALOG_OFFSET;
|
||||
}
|
||||
|
||||
if (y + DIALOG_HEIGHT > screenHeight - DIALOG_PADDING) {
|
||||
y = clickPosition.y - DIALOG_HEIGHT - DIALOG_OFFSET;
|
||||
}
|
||||
|
||||
dialogPosition.x = Math.max(DIALOG_PADDING, Math.min(x, screenWidth - DIALOG_WIDTH - DIALOG_PADDING));
|
||||
dialogPosition.y = Math.max(DIALOG_PADDING, Math.min(y, screenHeight - DIALOG_HEIGHT - DIALOG_PADDING));
|
||||
};
|
||||
|
||||
// ==================== 资源清理 ====================
|
||||
const clearAllAnalysisResources = () => {
|
||||
removeMarker();
|
||||
clearCircle();
|
||||
removePulseEffect();
|
||||
currentCenterPosition = null;
|
||||
pulsePoints.value = [];
|
||||
showPulsePointList.value = false;
|
||||
};
|
||||
/**
|
||||
* 仅清除视觉效果，保留标记点和中心点位置
|
||||
*/
|
||||
const clearVisualEffectsOnly = () => {
|
||||
clearCircle();
|
||||
removePulseEffect();
|
||||
pulsePoints.value = [];
|
||||
showPulsePointList.value = false;
|
||||
};
|
||||
// ==================== 事件处理 ====================
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (!currentCenterPosition) {
|
||||
console.error('中心点位置不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('确认添加区域分析', {
|
||||
radius: radius.value,
|
||||
center: currentCenterPosition
|
||||
});
|
||||
// 先清除上一次的视觉效果（保留标记点）
|
||||
clearVisualEffectsOnly();
|
||||
|
||||
// 重新绘制当前选择的效果
|
||||
drawCircle(currentCenterPosition, radius.value);
|
||||
|
||||
const pointsInCircle = getPointsInCircle(currentCenterPosition, radius.value);
|
||||
addPulseEffectToPoints(pointsInCircle);
|
||||
pulsePoints.value = pointsInCircle;
|
||||
showPulsePointList.value = true;
|
||||
|
||||
const cartographic = Cartographic.fromCartesian(currentCenterPosition);
|
||||
const longitude = cartographic.longitude * (180 / Math.PI);
|
||||
const latitude = cartographic.latitude * (180 / Math.PI);
|
||||
|
||||
const flyHeight = Math.max(radius.value * FLY_HEIGHT_MULTIPLIER, MIN_FLY_HEIGHT);
|
||||
CesiumUtilsSingleton.flyToTarget([longitude, latitude, flyHeight], FLY_DURATION);
|
||||
|
||||
// 关闭对话框并清理资源（包括鼠标样式）
|
||||
showAreaDialog.value = false;
|
||||
|
||||
// 移除地图点击事件监听器，恢复鼠标默认样式
|
||||
if (clickHandler) {
|
||||
clickHandler.destroy();
|
||||
clickHandler = null;
|
||||
}
|
||||
|
||||
// 恢复鼠标默认样式
|
||||
const viewer = CesiumUtilsSingleton.getViewer();
|
||||
if (viewer?.canvas) {
|
||||
statusStore.cursorStyle = 'default';
|
||||
viewer.canvas.style.cursor = 'default';
|
||||
}
|
||||
};
|
||||
const handleCancel = () => {
|
||||
showAreaDialog.value = false;
|
||||
clearAllAnalysisResources();
|
||||
pulsePoints.value = [];
|
||||
showPulsePointList.value = false;
|
||||
};
|
||||
|
||||
const handleButtonClick = (index: number, callback: (status: boolean) => void) => {
|
||||
const isActive = selectedButtonIndex.value === index;
|
||||
|
||||
if (isActive) {
|
||||
selectedButtonIndex.value = -1;
|
||||
callback(false);
|
||||
} else {
|
||||
if (selectedButtonIndex.value !== -1) {
|
||||
clearAllAnalysisResources();
|
||||
showAreaDialog.value = false;
|
||||
}
|
||||
selectedButtonIndex.value = index;
|
||||
callback(true);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 从搜索结果启动区域分析
|
||||
* 自动激活按钮（变为"取消区域分析"），显示区域选择对话框
|
||||
* @param point - 搜索选中的点资源
|
||||
*/
|
||||
const startAreaAnalysisFromSearch = (point: PointResource) => {
|
||||
if (point.lon == null || point.lat == null) return;
|
||||
|
||||
// 清除之前的分析
|
||||
clearAllAnalysisResources();
|
||||
|
||||
// 设置中心点
|
||||
currentCenterPosition = Cartesian3.fromDegrees(point.lon, point.lat, 0);
|
||||
|
||||
// 激活按钮（索引0是"标记区域分析"按钮）
|
||||
selectedButtonIndex.value = 0;
|
||||
|
||||
// 设置鼠标样式为十字准星
|
||||
const viewer = CesiumUtilsSingleton.getViewer();
|
||||
if (viewer?.canvas) {
|
||||
statusStore.cursorStyle = 'crosshair';
|
||||
viewer.canvas.style.cursor = 'crosshair';
|
||||
}
|
||||
|
||||
// 添加标记
|
||||
addMarker(currentCenterPosition);
|
||||
|
||||
// 显示对话框
|
||||
showAreaDialog.value = true;
|
||||
|
||||
// 计算对话框位置（屏幕中心）
|
||||
const centerX = window.innerWidth / 2;
|
||||
const centerY = window.innerHeight / 2;
|
||||
dialogPosition.x = Math.max(DIALOG_PADDING, Math.min(centerX + DIALOG_OFFSET, window.innerWidth - DIALOG_WIDTH - DIALOG_PADDING));
|
||||
dialogPosition.y = Math.max(DIALOG_PADDING, Math.min(centerY + DIALOG_OFFSET, window.innerHeight - DIALOG_HEIGHT - DIALOG_PADDING));
|
||||
};
|
||||
|
||||
// ==================== 监听器 ====================
|
||||
|
||||
watch(
|
||||
() => loadingResourceStore.loadingResource,
|
||||
() => {
|
||||
console.log('检测到资源数据变化，刷新脉冲效果');
|
||||
refreshPulseEffect();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const layerVisibilityWatchers = [
|
||||
() => poi.value.showSchool.show,
|
||||
() => poi.value.showHospital.show,
|
||||
() => poi.value.showDangerSource.show,
|
||||
() => poi.value.showRefugeeShelter.show,
|
||||
() => poi.value.showFireStation.show,
|
||||
() => poi.value.showReservePoint.show,
|
||||
() => poi.value.showSubwayStation.show,
|
||||
() => poi.value.showLandslideHiddenPoint.show,
|
||||
() => poi.value.showDebrisFlowHiddenPoint.show,
|
||||
() => poi.value.showWaterLoggingHiddenPoint.show,
|
||||
() => poi.value.showFlashFloodHiddenPoint.show,
|
||||
() => map.value.riskPointShow.show,
|
||||
() => infra.value.showBridge.show,
|
||||
() => infra.value.showReservoir.show,
|
||||
];
|
||||
|
||||
watch(layerVisibilityWatchers, () => {
|
||||
// 只有当有中心点位置且脉冲点列表正在显示时，才刷新脉冲效果
|
||||
if (currentCenterPosition && showPulsePointList.value) {
|
||||
console.log('检测到图层可见性变化，刷新脉冲效果');
|
||||
refreshPulseEffect();
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
clearAllAnalysisResources();
|
||||
removeMapClickHandler();
|
||||
});
|
||||
|
||||
// ==================== 按钮配置 ====================
|
||||
const analysisButtons: AnalysisButtonConfig[] = [
|
||||
{
|
||||
name: '标记区域分析',
|
||||
activeName: '取消区域分析',
|
||||
callback: (status: boolean) => {
|
||||
console.log('标记区域分析', status);
|
||||
const viewer = CesiumUtilsSingleton.getViewer();
|
||||
if (!viewer?.canvas) return;
|
||||
|
||||
statusStore.cursorStyle = status ? 'crosshair' : 'default';
|
||||
viewer.canvas.style.cursor = status ? 'crosshair' : 'default';
|
||||
|
||||
if (status) {
|
||||
registerMapClickHandler();
|
||||
} else {
|
||||
removeMapClickHandler();
|
||||
clearAllAnalysisResources();
|
||||
showAreaDialog.value = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '隐藏行政区划',
|
||||
callback: (status: boolean) => {
|
||||
console.log('隐藏行政区划', status);
|
||||
useStatusStore().mapLayers.showAdministrativeDivision.show = !status;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return {
|
||||
selectedButtonIndex,
|
||||
showAreaDialog,
|
||||
radius,
|
||||
dialogPosition,
|
||||
analysisButtons,
|
||||
handleButtonClick,
|
||||
handleConfirm,
|
||||
handleCancel,
|
||||
refreshPulseEffect,
|
||||
pulsePoints,
|
||||
showPulsePointList,
|
||||
startAreaAnalysisFromSearch,
|
||||
};
|
||||
};
|
||||
@@ -1,159 +0,0 @@
|
||||
import { computed, ref } from 'vue';
|
||||
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
|
||||
import { useStatusStore } from '@/stores/useStatusStore';
|
||||
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
|
||||
import { LoadingResource } from '@/types/common/LoadingResourceType';
|
||||
import type { PointResource, ResourceConfig } from '@/types/common/useAroundAnalysisType';
|
||||
|
||||
/**
|
||||
* 搜索组件钩子函数
|
||||
* @returns 搜索相关的状态和方法
|
||||
*/
|
||||
export const useAroundSearch = () => {
|
||||
const statusStore = useStatusStore();//用于访问图层显示状态
|
||||
const loadingResourceStore = useLoadingResourceStore();//用于访问各类点位数据
|
||||
// 计算属性：获取图层的显示状态
|
||||
const poi = computed(() => statusStore.poiLayers);
|
||||
const map = computed(() => statusStore.mapLayers);
|
||||
const infra = computed(() => statusStore.infrastructureLayers);
|
||||
|
||||
/**
|
||||
* 资源配置列表
|
||||
*/
|
||||
const RESOURCE_CONFIGS: ResourceConfig[] = [
|
||||
{ key: LoadingResource.SCHOOL, category: 'school', isVisible: () => poi.value.showSchool.show },
|
||||
{ key: LoadingResource.HOSPITAL, category: 'hospital', isVisible: () => poi.value.showHospital.show },
|
||||
{ key: LoadingResource.DANGEROUS_SOURCE, category: 'danger', isVisible: () => poi.value.showDangerSource.show },
|
||||
{ key: LoadingResource.EMERGENCY_SHELTER, category: 'shelter', isVisible: () => poi.value.showRefugeeShelter.show },
|
||||
{ key: LoadingResource.FIRE_STATION, category: 'fire', isVisible: () => poi.value.showFireStation.show },
|
||||
{ key: LoadingResource.STORE_POINTS, category: 'store', isVisible: () => poi.value.showReservePoint.show },
|
||||
{ key: LoadingResource.SUBWAY_STATION, category: 'subway', isVisible: () => poi.value.showSubwayStation.show },
|
||||
{ key: LoadingResource.LANDSLIDE_HIDDEN_POINT, category: 'hidden-danger', forcedType: 'landslide', isVisible: () => poi.value.showLandslideHiddenPoint.show },
|
||||
{ key: LoadingResource.DEBRIS_FLOW_HIDDEN_POINT, category: 'hidden-danger', forcedType: 'debris_flow', isVisible: () => poi.value.showDebrisFlowHiddenPoint.show },
|
||||
{ key: LoadingResource.WATER_LOGGING_HIDDEN_POINT, category: 'hidden-danger', forcedType: 'water_logging', isVisible: () => poi.value.showWaterLoggingHiddenPoint.show },
|
||||
{ key: LoadingResource.FLASH_FLOOD_HIDDEN_POINT, category: 'hidden-danger', forcedType: 'flash_flood', isVisible: () => poi.value.showFlashFloodHiddenPoint.show },
|
||||
{ key: LoadingResource.COLLAPSE_HIDDEN_POINT, category: 'hidden-danger', forcedType: 'collapse', isVisible: () => poi.value.showCollapseHiddenPoint.show },
|
||||
{ key: LoadingResource.RISK_POINT, category: 'risk-point', isVisible: () => map.value.riskPointShow.show },
|
||||
{ key: LoadingResource.BRIDGE, category: 'bridge', isVisible: () => infra.value.showBridge.show },
|
||||
{ key: LoadingResource.RESERVOIR, category: 'reservoir', isVisible: () => infra.value.showReservoir.show },
|
||||
];
|
||||
|
||||
/**
|
||||
* 所有资源数据
|
||||
*/
|
||||
const allResources = ref<PointResource[]>([]);
|
||||
|
||||
/**
|
||||
* 计算属性：判断是否允许搜索
|
||||
*/
|
||||
const canSearch = computed(() => {
|
||||
return RESOURCE_CONFIGS.some(config => config.isVisible());
|
||||
});
|
||||
|
||||
/**
|
||||
* 查询建议回调
|
||||
* @param queryString - 搜索字符串
|
||||
* @param cb - 回调函数
|
||||
*/
|
||||
function querySearch(queryString: string, cb: (results: PointResource[]) => void) {
|
||||
if (!canSearch.value) {
|
||||
cb([]);
|
||||
return;
|
||||
}
|
||||
const lowerQuery = queryString.toLowerCase();
|
||||
const filteredResults = allResources.value.filter(item => {
|
||||
const config = RESOURCE_CONFIGS.find(c => c.category === item.category);
|
||||
let isVisible = false;
|
||||
if (config) {
|
||||
if (item.category === 'hidden-danger') {
|
||||
const type = (item.originalType as string)?.toLowerCase();
|
||||
isVisible = (type === config.forcedType?.toLowerCase()) && config.isVisible();
|
||||
} else {
|
||||
isVisible = config.isVisible();
|
||||
}
|
||||
}
|
||||
if (!isVisible) return false;
|
||||
if (!queryString) return true;
|
||||
const matchStr = (item.value || '').toLowerCase();
|
||||
return matchStr.includes(lowerQuery);
|
||||
});
|
||||
cb(filteredResults);
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择建议回调
|
||||
* @param item - 选中的点资源
|
||||
* @param onAnalysisStart - 搜索后触发区域分析的回调（由父组件传入）
|
||||
*/
|
||||
async function handleSelect(item: PointResource, onAnalysisStart?: (point: PointResource) => void) {
|
||||
if (item.lon == null || item.lat == null) return;
|
||||
|
||||
await CesiumUtilsSingleton.flyToTarget([item.lon, item.lat, 6000]);
|
||||
|
||||
// 飞行完成后，触发区域分析回调
|
||||
if (onAnalysisStart) {
|
||||
onAnalysisStart(item);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理聚焦事件，重新加载数据
|
||||
*/
|
||||
function handleFocus() {
|
||||
loadAllPointData();
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据处理：将 Store 数据转换为资源格式
|
||||
* @param infoList - 原始数据列表
|
||||
* @param category - 资源分类
|
||||
* @param forcedType - 强制类型
|
||||
* @returns 转换后的点资源数组
|
||||
*/
|
||||
function convertStoreDataToResources(
|
||||
infoList: Record<string, unknown>[],
|
||||
category: PointResource['category'],
|
||||
forcedType?: string,
|
||||
): PointResource[] {
|
||||
if (!Array.isArray(infoList)) return [];
|
||||
return infoList.map(item => {
|
||||
const id = item.id || item._id || item.uuid || 'unknown_id';
|
||||
const safeId = typeof id === 'string' || typeof id === 'number' ? id : 'unknown_id';
|
||||
const name = item.name && String(item.name).trim() !== '' ? String(item.name) : String(safeId);
|
||||
return {
|
||||
...item,
|
||||
id: safeId,
|
||||
value: name,
|
||||
category,
|
||||
originalType: (forcedType || item.type || item.disasterType)?.toString().toLowerCase(),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载所有点类数据
|
||||
*/
|
||||
function loadAllPointData() {
|
||||
const resources = RESOURCE_CONFIGS.flatMap(config =>
|
||||
convertStoreDataToResources(loadingResourceStore.getLoadingResource(config.key).info, config.category, config.forcedType)
|
||||
);
|
||||
const uniqueMap = new Map<string | number, PointResource>();
|
||||
resources.forEach(item => uniqueMap.set(item.id, item));
|
||||
allResources.value = Array.from(uniqueMap.values());
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜索框的值
|
||||
*/
|
||||
const state = ref('');
|
||||
|
||||
return {
|
||||
state,
|
||||
allResources,
|
||||
canSearch,
|
||||
querySearch,
|
||||
handleSelect,
|
||||
handleFocus,
|
||||
loadAllPointData,
|
||||
};
|
||||
};
|
||||
@@ -6,7 +6,9 @@ import {
|
||||
HorizontalOrigin,
|
||||
HeightReference,
|
||||
CallbackProperty,
|
||||
JulianDate
|
||||
JulianDate,
|
||||
LabelStyle,
|
||||
NearFarScalar
|
||||
} from 'cesium';
|
||||
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
|
||||
import type { PointResource } from '@/types/common/useAroundAnalysisType';
|
||||
@@ -80,6 +82,23 @@ export const usePulseEffect = () => {
|
||||
heightReference: HeightReference.CLAMP_TO_GROUND,
|
||||
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||||
},
|
||||
label: {
|
||||
text: point.value || String(point.id),
|
||||
font: 'bold 16px Microsoft YaHei, sans-serif',
|
||||
fillColor: Color.WHITE,
|
||||
outlineColor: Color.BLACK,
|
||||
outlineWidth: 5,
|
||||
style: LabelStyle.FILL_AND_OUTLINE,
|
||||
verticalOrigin: VerticalOrigin.BOTTOM,
|
||||
horizontalOrigin: HorizontalOrigin.CENTER,
|
||||
pixelOffset: new Cartesian3(0, -20),
|
||||
eyeOffset: new Cartesian3(0, 0, -100),
|
||||
heightReference: HeightReference.NONE,
|
||||
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||||
showBackground: false,
|
||||
scaleByDistance: new NearFarScalar(1000, 1.2, 50000, 0.8),
|
||||
translucencyByDistance: new NearFarScalar(1000, 1.0, 30000, 0.9),
|
||||
},
|
||||
});
|
||||
|
||||
pulseEntities.push(pulseEntity);
|
||||
|
||||
@@ -8,17 +8,17 @@ import type { Ref } from 'vue';
|
||||
* 点资源分类类型
|
||||
*/
|
||||
export type PointResourceCategory =
|
||||
| 'school'
|
||||
| 'hospital'
|
||||
| 'danger'
|
||||
| 'shelter'
|
||||
| 'fire'
|
||||
| 'store'
|
||||
| 'hidden-danger'
|
||||
| 'risk-point'
|
||||
| 'bridge'
|
||||
| 'reservoir'
|
||||
| 'subway';
|
||||
| 'school'
|
||||
| 'hospital'
|
||||
| 'danger'
|
||||
| 'shelter'
|
||||
| 'fire'
|
||||
| 'store'
|
||||
| 'hidden-danger'
|
||||
| 'risk-point'
|
||||
| 'bridge'
|
||||
| 'reservoir'
|
||||
| 'subway';
|
||||
|
||||
/**
|
||||
* 点资源数据结构
|
||||
@@ -41,7 +41,7 @@ export interface PointResource {
|
||||
}
|
||||
|
||||
/**
|
||||
* 资源配置接口（用于 SearchComponent）
|
||||
* 资源配置接口（统一版本）
|
||||
*/
|
||||
export interface ResourceConfig {
|
||||
/** 加载资源键 */
|
||||
@@ -51,19 +51,7 @@ export interface ResourceConfig {
|
||||
/** 强制类型（用于隐患点） */
|
||||
forcedType?: string;
|
||||
/** 是否可见的判断函数 */
|
||||
isVisible: () => boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 资源配置接口（用于 ButtonComponent，不含 isVisible）
|
||||
*/
|
||||
export interface ButtonResourceConfig {
|
||||
/** 加载资源键 */
|
||||
key: LoadingResource;
|
||||
/** 资源分类 */
|
||||
category: PointResourceCategory;
|
||||
/** 强制类型（用于隐患点） */
|
||||
forcedType?: string;
|
||||
isVisible?: () => boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -89,10 +77,9 @@ export interface DialogPosition {
|
||||
}
|
||||
|
||||
/**
|
||||
* 周边分析按钮状态接口（用于 provide/inject 共享）
|
||||
* 注意：响应式属性使用 Ref 类型
|
||||
* 周边分析统一状态接口
|
||||
*/
|
||||
export interface AnalysisButtonState {
|
||||
export interface AroundAnalysisState {
|
||||
/** 当前选中的按钮索引 */
|
||||
selectedButtonIndex: Ref<number>;
|
||||
/** 是否显示区域选择弹窗 */
|
||||
@@ -103,6 +90,15 @@ export interface AnalysisButtonState {
|
||||
dialogPosition: DialogPosition;
|
||||
/** 分析按钮配置列表 */
|
||||
analysisButtons: AnalysisButtonConfig[];
|
||||
/** 搜索框状态 */
|
||||
searchState: Ref<string>;
|
||||
/** 是否允许搜索 */
|
||||
canSearch: Ref<boolean>;
|
||||
/** 脉冲点列表 */
|
||||
pulsePoints: Ref<PointResource[]>;
|
||||
/** 是否显示脉冲点列表 */
|
||||
showPulsePointList: Ref<boolean>;
|
||||
|
||||
/** 按钮点击处理函数 */
|
||||
handleButtonClick: (index: number, callback: (status: boolean) => void) => void;
|
||||
/** 确认添加区域分析 */
|
||||
@@ -111,32 +107,8 @@ export interface AnalysisButtonState {
|
||||
handleCancel: () => void;
|
||||
/** 刷新脉冲效果 */
|
||||
refreshPulseEffect: () => void;
|
||||
/** 脉冲点列表 */
|
||||
pulsePoints: Ref<PointResource[]>;
|
||||
/** 是否显示脉冲点列表 */
|
||||
showPulsePointList: Ref<boolean>;
|
||||
/** 从搜索结果启动区域分析 */
|
||||
startAreaAnalysisFromSearch: (point: PointResource) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜索区域分析状态接口（用于 provide/inject 共享）
|
||||
*/
|
||||
export interface SearchAreaAnalysisState {
|
||||
/** 是否显示区域选择对话框 */
|
||||
showAreaDialog: Ref<boolean>;
|
||||
/** 区域半径（公里） */
|
||||
areaRadius: Ref<number>;
|
||||
/** 对话框位置 */
|
||||
dialogPosition: Ref<DialogPosition>;
|
||||
/** 确认区域分析 */
|
||||
handleAreaConfirm: () => void;
|
||||
/** 取消区域分析 */
|
||||
handleAreaCancel: () => void;
|
||||
/** 搜索框状态 */
|
||||
state: Ref<string>;
|
||||
/** 是否允许搜索 */
|
||||
canSearch: Ref<boolean>;
|
||||
/** 查询建议 */
|
||||
querySearch: (queryString: string, cb: (results: PointResource[]) => void) => void;
|
||||
/** 选择建议回调 */
|
||||
|
||||
@@ -0,0 +1,103 @@
|
||||
import { useStatusStore } from '@/stores/useStatusStore';
|
||||
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
|
||||
import type { PointResource, PointResourceCategory, ResourceConfig } from '@/types/common/useAroundAnalysisType';
|
||||
|
||||
/**
|
||||
* 判断资源分类是否可见
|
||||
*/
|
||||
export const isCategoryVisible = (
|
||||
category: PointResourceCategory,
|
||||
originalType?: string
|
||||
): boolean => {
|
||||
const statusStore = useStatusStore();
|
||||
const poi = statusStore.poiLayers;
|
||||
const map = statusStore.mapLayers;
|
||||
const infra = statusStore.infrastructureLayers;
|
||||
|
||||
const visibilityMap: Record<string, () => boolean> = {
|
||||
school: () => poi.showSchool.show,
|
||||
hospital: () => poi.showHospital.show,
|
||||
danger: () => poi.showDangerSource.show,
|
||||
shelter: () => poi.showRefugeeShelter.show,
|
||||
fire: () => poi.showFireStation.show,
|
||||
store: () => poi.showReservePoint.show,
|
||||
subway: () => poi.showSubwayStation.show,
|
||||
'risk-point': () => map.riskPointShow.show,
|
||||
bridge: () => infra.showBridge.show,
|
||||
reservoir: () => infra.showReservoir.show,
|
||||
'hidden-danger': () => {
|
||||
const hiddenMap: Record<string, () => boolean> = {
|
||||
landslide: () => poi.showLandslideHiddenPoint.show,
|
||||
debris_flow: () => poi.showDebrisFlowHiddenPoint.show,
|
||||
water_logging: () => poi.showWaterLoggingHiddenPoint.show,
|
||||
flash_flood: () => poi.showFlashFloodHiddenPoint.show,
|
||||
collapse: () => poi.showCollapseHiddenPoint.show,
|
||||
};
|
||||
return hiddenMap[originalType || '']?.() ?? false;
|
||||
},
|
||||
};
|
||||
return visibilityMap[category]?.() ?? false;
|
||||
};
|
||||
|
||||
/**
|
||||
* 转换 Store 数据为资源格式
|
||||
*/
|
||||
export const convertStoreDataToResources = (
|
||||
infoList: Record<string, unknown>[],
|
||||
category: PointResource['category'],
|
||||
forcedType?: string
|
||||
): PointResource[] => {
|
||||
if (!Array.isArray(infoList)) return [];
|
||||
return infoList.map(item => {
|
||||
const id = item.id || item._id || item.uuid || 'unknown_id';
|
||||
const safeId = typeof id === 'string' || typeof id === 'number' ? id : 'unknown_id';
|
||||
const name = item.name && String(item.name).trim() !== '' ? String(item.name) : String(safeId);
|
||||
return {
|
||||
...item,
|
||||
id: safeId,
|
||||
value: name,
|
||||
category,
|
||||
originalType: (forcedType || item.type || item.disasterType)?.toString().toLowerCase(),
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 加载所有点数据
|
||||
*/
|
||||
export const loadAllPointData = (configs: ResourceConfig[]): PointResource[] => {
|
||||
const loadingResourceStore = useLoadingResourceStore();
|
||||
const resources = configs.flatMap(config =>
|
||||
convertStoreDataToResources(
|
||||
loadingResourceStore.getLoadingResource(config.key).info,
|
||||
config.category,
|
||||
config.forcedType
|
||||
)
|
||||
);
|
||||
|
||||
const uniqueMap = new Map<string | number, PointResource>();
|
||||
resources.forEach(item => uniqueMap.set(item.id, item));
|
||||
return Array.from(uniqueMap.values());
|
||||
};
|
||||
|
||||
/**
|
||||
* 计算两点间距离（Haversine 公式）
|
||||
*/
|
||||
export const calculateDistance = (
|
||||
centerLon: number,
|
||||
centerLat: number,
|
||||
pointLon: unknown,
|
||||
pointLat: unknown
|
||||
): number => {
|
||||
const pLon = Number(pointLon);
|
||||
const pLat = Number(pointLat);
|
||||
|
||||
if (isNaN(pLon) || isNaN(pLat)) return Infinity;
|
||||
|
||||
const dLat = (pLat - centerLat) * Math.PI / 180;
|
||||
const dLon = (pLon - centerLon) * Math.PI / 180;
|
||||
const a = Math.sin(dLat / 2) ** 2 +
|
||||
Math.cos(centerLat * Math.PI / 180) * Math.cos(pLat * Math.PI / 180) *
|
||||
Math.sin(dLon / 2) ** 2;
|
||||
return 6371000 * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||||
};
|
||||
Reference in New Issue
Block a user