重构组件结构，添加周边分析组件结构（但无具体实现）
This commit is contained in:
wzy-warehouse
@@ -0,0 +1,120 @@
|
||||
<!-- 危险源组件 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 加载危险源 -->
|
||||
<LoadingPoints
|
||||
v-if="
|
||||
useStatusStore().appLoadingCompleted && dangerousSourcePoints.length > 0
|
||||
"
|
||||
:base-points="dangerousSourcePoints"
|
||||
:get-disaster-icon="getDisasterIcon"
|
||||
:prefix="config.prefix.dangerousSourcePointId"
|
||||
:is-default="false"
|
||||
:loading-resource-field="LoadingResource.DANGEROUS_SOURCE"
|
||||
/>
|
||||
|
||||
<!-- 显示信息框 -->
|
||||
<InformationBox
|
||||
:data="dangerousSourcePointDetail as Record<string, any>"
|
||||
:field="field"
|
||||
v-if="useLoadingInformationStore().dangerousSource.loading"
|
||||
:title="informationBoxTitle"
|
||||
:offset-x="offsetX"
|
||||
:offset-y="offsetY"
|
||||
:key="useLoadingInformationStore().dangerousSource.id"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { $api } from '@/api/api.ts';
|
||||
import type { Point } from '@/types/base/Point.ts';
|
||||
import LoadingPoints from '@/component/common/LoadingPoints.vue';
|
||||
import config from '@/config/config.json';
|
||||
import InformationBox from '@/component/common/InformationBox.vue';
|
||||
import { useStatusStore } from '@/stores/useStatusStore.ts';
|
||||
import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
|
||||
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
|
||||
import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
|
||||
import { useDangerousSourcePoint } from '@/hooks/rain-earthquake/useDangerousSourcePoint.ts';
|
||||
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
|
||||
|
||||
const dangerousSourcePoints = ref<Point[]>([]);
|
||||
|
||||
// 信息框相关配置
|
||||
const offsetX = ref(0);
|
||||
const offsetY = ref(0);
|
||||
const dangerousSourcePointDetail = ref<Point>();
|
||||
const informationBoxTitle = ref('');
|
||||
|
||||
// 获取钩子函数
|
||||
const { field, getDisasterIcon } = useDangerousSourcePoint();
|
||||
|
||||
$api.dangerousSource.getBasePoints().then((res) => {
|
||||
dangerousSourcePoints.value = res.data;
|
||||
});
|
||||
|
||||
// 监听id变化
|
||||
watch(
|
||||
() => useLoadingInformationStore().dangerousSource.id,
|
||||
async (newId: number) => {
|
||||
if (newId === -1) {
|
||||
return;
|
||||
}
|
||||
// 获取危险源数据
|
||||
const clickObject = useLoadingInformationStore().clickObject;
|
||||
|
||||
if (!clickObject || !clickObject.primitive) {
|
||||
console.warn('点击对象或图元不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await $api.dangerousSource.getPointDetailById(
|
||||
useLoadingInformationStore().dangerousSource.id
|
||||
);
|
||||
|
||||
// 更新数据
|
||||
dangerousSourcePointDetail.value = res.data;
|
||||
informationBoxTitle.value = res.data.name || '危险源信息';
|
||||
|
||||
try {
|
||||
// 将坐标转换为偏移量
|
||||
const screenPos = CesiumUtilsSingleton.convertScreenPosition(
|
||||
clickObject.primitive.position
|
||||
);
|
||||
offsetX.value = screenPos.x;
|
||||
offsetY.value = screenPos.y;
|
||||
|
||||
// 显示新的信息框
|
||||
useLoadingInformationStore().dangerousSource.loading = true;
|
||||
} catch (error) {
|
||||
throw new Error(`坐标转换失败:${error}`);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 监听显示隐藏
|
||||
watch(
|
||||
() => useStatusStore().poiLayers.showDangerSource.show,
|
||||
(newValue: boolean) => {
|
||||
if (newValue) {
|
||||
// 显示危险源
|
||||
CesiumUtilsSingleton.batchShowPrimitives(
|
||||
useLoadingResourceStore().getLoadingResource(
|
||||
LoadingResource.DANGEROUS_SOURCE
|
||||
)
|
||||
);
|
||||
} else {
|
||||
// 隐藏危险源
|
||||
CesiumUtilsSingleton.batchHidePrimitives(
|
||||
useLoadingResourceStore().getLoadingResource(
|
||||
LoadingResource.DANGEROUS_SOURCE
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,121 @@
|
||||
<!-- 避难所组件 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 加载避难所 -->
|
||||
<LoadingPoints
|
||||
v-if="
|
||||
useStatusStore().appLoadingCompleted &&
|
||||
emergencyShelterPoints.length > 0
|
||||
"
|
||||
:base-points="emergencyShelterPoints"
|
||||
:get-disaster-icon="getDisasterIcon"
|
||||
:prefix="config.prefix.emergencyShelterPointId"
|
||||
:is-default="false"
|
||||
:loading-resource-field="LoadingResource.EMERGENCY_SHELTER"
|
||||
/>
|
||||
|
||||
<!-- 显示信息框 -->
|
||||
<InformationBox
|
||||
:data="emergencyShelterPointDetail as Record<string, any>"
|
||||
:field="field"
|
||||
v-if="useLoadingInformationStore().emergencyShelter.loading"
|
||||
:title="informationBoxTitle"
|
||||
:offset-x="offsetX"
|
||||
:offset-y="offsetY"
|
||||
:key="useLoadingInformationStore().emergencyShelter.id"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { $api } from '@/api/api.ts';
|
||||
import type { Point } from '@/types/base/Point.ts';
|
||||
import LoadingPoints from '@/component/common/LoadingPoints.vue';
|
||||
import config from '@/config/config.json';
|
||||
import InformationBox from '@/component/common/InformationBox.vue';
|
||||
import { useStatusStore } from '@/stores/useStatusStore.ts';
|
||||
import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
|
||||
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
|
||||
import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
|
||||
import { useEmergencyShelterPoint } from '@/hooks/rain-earthquake/useEmergencyShelterPoint.ts';
|
||||
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
|
||||
|
||||
const emergencyShelterPoints = ref<Point[]>([]);
|
||||
|
||||
// 信息框相关配置
|
||||
const offsetX = ref(0);
|
||||
const offsetY = ref(0);
|
||||
const emergencyShelterPointDetail = ref<Point>();
|
||||
const informationBoxTitle = ref('');
|
||||
|
||||
// 获取钩子函数
|
||||
const { field, getDisasterIcon } = useEmergencyShelterPoint();
|
||||
|
||||
$api.emergencyShelter.getBasePoints().then((res) => {
|
||||
emergencyShelterPoints.value = res.data;
|
||||
});
|
||||
|
||||
// 监听id变化
|
||||
watch(
|
||||
() => useLoadingInformationStore().emergencyShelter.id,
|
||||
async (newId: number) => {
|
||||
if (newId === -1) {
|
||||
return;
|
||||
}
|
||||
// 获取避难所数据
|
||||
const clickObject = useLoadingInformationStore().clickObject;
|
||||
|
||||
if (!clickObject || !clickObject.primitive) {
|
||||
console.warn('点击对象或图元不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await $api.emergencyShelter.getPointDetailById(
|
||||
useLoadingInformationStore().emergencyShelter.id
|
||||
);
|
||||
|
||||
// 更新数据
|
||||
emergencyShelterPointDetail.value = res.data;
|
||||
informationBoxTitle.value = res.data.name || '避难所信息';
|
||||
|
||||
try {
|
||||
// 将坐标转换为偏移量
|
||||
const screenPos = CesiumUtilsSingleton.convertScreenPosition(
|
||||
clickObject.primitive.position
|
||||
);
|
||||
offsetX.value = screenPos.x;
|
||||
offsetY.value = screenPos.y;
|
||||
|
||||
// 显示新的信息框
|
||||
useLoadingInformationStore().emergencyShelter.loading = true;
|
||||
} catch (error) {
|
||||
throw new Error(`坐标转换失败:${error}`);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 监听显示隐藏
|
||||
watch(
|
||||
() => useStatusStore().poiLayers.showRefugeeShelter.show,
|
||||
(newValue: boolean) => {
|
||||
if (newValue) {
|
||||
// 显示避难所
|
||||
CesiumUtilsSingleton.batchShowPrimitives(
|
||||
useLoadingResourceStore().getLoadingResource(
|
||||
LoadingResource.EMERGENCY_SHELTER
|
||||
)
|
||||
);
|
||||
} else {
|
||||
// 隐藏避难所
|
||||
CesiumUtilsSingleton.batchHidePrimitives(
|
||||
useLoadingResourceStore().getLoadingResource(
|
||||
LoadingResource.EMERGENCY_SHELTER
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,120 @@
|
||||
<!-- 消防站组件 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 加载消防站 -->
|
||||
<LoadingPoints
|
||||
v-if="
|
||||
useStatusStore().appLoadingCompleted && fireStationPoints.length > 0
|
||||
"
|
||||
:base-points="fireStationPoints"
|
||||
:get-disaster-icon="getDisasterIcon"
|
||||
:prefix="config.prefix.fireStationPointId"
|
||||
:is-default="false"
|
||||
:loading-resource-field="LoadingResource.FIRE_STATION"
|
||||
/>
|
||||
|
||||
<!-- 显示信息框 -->
|
||||
<InformationBox
|
||||
:data="fireStationPointDetail as Record<string, any>"
|
||||
:field="field"
|
||||
v-if="useLoadingInformationStore().fireStation.loading"
|
||||
:title="informationBoxTitle"
|
||||
:offset-x="offsetX"
|
||||
:offset-y="offsetY"
|
||||
:key="useLoadingInformationStore().fireStation.id"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { $api } from '@/api/api.ts';
|
||||
import type { Point } from '@/types/base/Point.ts';
|
||||
import LoadingPoints from '@/component/common/LoadingPoints.vue';
|
||||
import config from '@/config/config.json';
|
||||
import InformationBox from '@/component/common/InformationBox.vue';
|
||||
import { useStatusStore } from '@/stores/useStatusStore.ts';
|
||||
import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
|
||||
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
|
||||
import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
|
||||
import { useFireStationPoint } from '@/hooks/rain-earthquake/useFireStationPoint.ts';
|
||||
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
|
||||
|
||||
const fireStationPoints = ref<Point[]>([]);
|
||||
|
||||
// 信息框相关配置
|
||||
const offsetX = ref(0);
|
||||
const offsetY = ref(0);
|
||||
const fireStationPointDetail = ref<Point>();
|
||||
const informationBoxTitle = ref('');
|
||||
|
||||
// 获取钩子函数
|
||||
const { field, getDisasterIcon } = useFireStationPoint();
|
||||
|
||||
$api.firefighter.getBasePoints().then((res) => {
|
||||
fireStationPoints.value = res.data;
|
||||
});
|
||||
|
||||
// 监听id变化
|
||||
watch(
|
||||
() => useLoadingInformationStore().fireStation.id,
|
||||
async (newId: number) => {
|
||||
if (newId === -1) {
|
||||
return;
|
||||
}
|
||||
// 获取消防站数据
|
||||
const clickObject = useLoadingInformationStore().clickObject;
|
||||
|
||||
if (!clickObject || !clickObject.primitive) {
|
||||
console.warn('点击对象或图元不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await $api.firefighter.getPointDetailById(
|
||||
useLoadingInformationStore().fireStation.id
|
||||
);
|
||||
|
||||
// 更新数据
|
||||
fireStationPointDetail.value = res.data;
|
||||
informationBoxTitle.value = res.data.teamName || '消防站信息';
|
||||
|
||||
try {
|
||||
// 将坐标转换为偏移量
|
||||
const screenPos = CesiumUtilsSingleton.convertScreenPosition(
|
||||
clickObject.primitive.position
|
||||
);
|
||||
offsetX.value = screenPos.x;
|
||||
offsetY.value = screenPos.y;
|
||||
|
||||
// 显示新的信息框
|
||||
useLoadingInformationStore().fireStation.loading = true;
|
||||
} catch (error) {
|
||||
throw new Error(`坐标转换失败:${error}`);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 监听显示隐藏
|
||||
watch(
|
||||
() => useStatusStore().poiLayers.showFireStation.show,
|
||||
(newValue: boolean) => {
|
||||
if (newValue) {
|
||||
// 显示消防站
|
||||
CesiumUtilsSingleton.batchShowPrimitives(
|
||||
useLoadingResourceStore().getLoadingResource(
|
||||
LoadingResource.FIRE_STATION
|
||||
)
|
||||
);
|
||||
} else {
|
||||
// 隐藏消防站
|
||||
CesiumUtilsSingleton.batchHidePrimitives(
|
||||
useLoadingResourceStore().getLoadingResource(
|
||||
LoadingResource.FIRE_STATION
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,114 @@
|
||||
<!-- 医院组件 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 加载医院 -->
|
||||
<LoadingPoints
|
||||
v-if="useStatusStore().appLoadingCompleted && hospitalPoints.length > 0"
|
||||
:base-points="hospitalPoints"
|
||||
:get-disaster-icon="getDisasterIcon"
|
||||
:prefix="config.prefix.hospitalPointId"
|
||||
:is-default="false"
|
||||
:loading-resource-field="LoadingResource.HOSPITAL"
|
||||
/>
|
||||
|
||||
<!-- 显示信息框 -->
|
||||
<InformationBox
|
||||
:data="hospitalPointDetail as Record<string, any>"
|
||||
:field="field"
|
||||
v-if="useLoadingInformationStore().hospital.loading"
|
||||
:title="informationBoxTitle"
|
||||
:offset-x="offsetX"
|
||||
:offset-y="offsetY"
|
||||
:key="useLoadingInformationStore().hospital.id"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { $api } from '@/api/api.ts';
|
||||
import type { Point } from '@/types/base/Point.ts';
|
||||
import LoadingPoints from '@/component/common/LoadingPoints.vue';
|
||||
import config from '@/config/config.json';
|
||||
import InformationBox from '@/component/common/InformationBox.vue';
|
||||
import { useStatusStore } from '@/stores/useStatusStore.ts';
|
||||
import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
|
||||
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
|
||||
import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
|
||||
import { useHospitalPoint } from '@/hooks/rain-earthquake/useHospitalPoint.ts';
|
||||
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
|
||||
|
||||
const hospitalPoints = ref<Point[]>([]);
|
||||
|
||||
// 信息框相关配置
|
||||
const offsetX = ref(0);
|
||||
const offsetY = ref(0);
|
||||
const hospitalPointDetail = ref<Point>();
|
||||
const informationBoxTitle = ref('');
|
||||
|
||||
// 获取钩子函数
|
||||
const { field, getDisasterIcon } = useHospitalPoint();
|
||||
|
||||
$api.hospitals.getBasePoins().then((res) => {
|
||||
hospitalPoints.value = res.data;
|
||||
});
|
||||
|
||||
// 监听id变化
|
||||
watch(
|
||||
() => useLoadingInformationStore().hospital.id,
|
||||
async (newId: number) => {
|
||||
if (newId === -1) {
|
||||
return;
|
||||
}
|
||||
// 获取医院数据
|
||||
const clickObject = useLoadingInformationStore().clickObject;
|
||||
|
||||
if (!clickObject || !clickObject.primitive) {
|
||||
console.warn('点击对象或图元不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await $api.hospitals.getPointDetailById(
|
||||
useLoadingInformationStore().hospital.id
|
||||
);
|
||||
|
||||
// 更新数据
|
||||
hospitalPointDetail.value = res.data;
|
||||
informationBoxTitle.value = res.data.name || '医院信息';
|
||||
|
||||
try {
|
||||
// 将坐标转换为偏移量
|
||||
const screenPos = CesiumUtilsSingleton.convertScreenPosition(
|
||||
clickObject.primitive.position
|
||||
);
|
||||
offsetX.value = screenPos.x;
|
||||
offsetY.value = screenPos.y;
|
||||
|
||||
// 显示新的信息框
|
||||
useLoadingInformationStore().hospital.loading = true;
|
||||
} catch (error) {
|
||||
throw new Error(`坐标转换失败:${error}`);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 监听显示隐藏
|
||||
watch(
|
||||
() => useStatusStore().poiLayers.showHospital.show,
|
||||
(newValue: boolean) => {
|
||||
if (newValue) {
|
||||
// 显示医院
|
||||
CesiumUtilsSingleton.batchShowPrimitives(
|
||||
useLoadingResourceStore().getLoadingResource(LoadingResource.HOSPITAL)
|
||||
);
|
||||
} else {
|
||||
// 隐藏医院
|
||||
CesiumUtilsSingleton.batchHidePrimitives(
|
||||
useLoadingResourceStore().getLoadingResource(LoadingResource.HOSPITAL)
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<!-- 加载人口网格 -->
|
||||
<LoadingGeoserverLayer
|
||||
:id="`people`"
|
||||
:layers="`xian:xian_people`"
|
||||
@provide-layers="provideLayers"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useStatusStore } from '@/stores/useStatusStore.ts';
|
||||
import type { ImageryLayer } from 'cesium';
|
||||
import { onMounted, watch } from 'vue';
|
||||
import LoadingGeoserverLayer from '../../common/LoadingGeoserverLayer.vue';
|
||||
|
||||
// 保存图层引用
|
||||
let populationLayer: ImageryLayer | null = null;
|
||||
|
||||
onMounted(() => {
|
||||
// 监听显示
|
||||
watch(
|
||||
() => useStatusStore().poiLayers.showPopulationGrid.show,
|
||||
(newValue: boolean) => {
|
||||
populationLayer!.show = newValue;
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
/**
|
||||
* 提供图层
|
||||
* @param layer 图层
|
||||
*/
|
||||
function provideLayers(layer: ImageryLayer) {
|
||||
populationLayer = layer;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,120 @@
|
||||
<!-- 物资储备点组件 -->
|
||||
<template>
|
||||
<div>
|
||||
<!-- 加载物资储备点 -->
|
||||
<LoadingPoints
|
||||
v-if="
|
||||
useStatusStore().appLoadingCompleted && storePointsList.length > 0
|
||||
"
|
||||
:base-points="storePointsList"
|
||||
:get-disaster-icon="getDisasterIcon"
|
||||
:prefix="config.prefix.storePointsPointId"
|
||||
:is-default="false"
|
||||
:loading-resource-field="LoadingResource.STORE_POINTS"
|
||||
/>
|
||||
|
||||
<!-- 显示信息框 -->
|
||||
<InformationBox
|
||||
:data="storePointDetail as Record<string, any>"
|
||||
:field="field"
|
||||
v-if="useLoadingInformationStore().storePoints.loading"
|
||||
:title="informationBoxTitle"
|
||||
:offset-x="offsetX"
|
||||
:offset-y="offsetY"
|
||||
:key="useLoadingInformationStore().storePoints.id"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { $api } from '@/api/api.ts';
|
||||
import type { Point } from '@/types/base/Point.ts';
|
||||
import LoadingPoints from '@/component/common/LoadingPoints.vue';
|
||||
import config from '@/config/config.json';
|
||||
import InformationBox from '@/component/common/InformationBox.vue';
|
||||
import { useStatusStore } from '@/stores/useStatusStore.ts';
|
||||
import { useLoadingInformationStore } from '@/stores/useLoadingInformation.ts';
|
||||
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
|
||||
import { LoadingResource } from '@/types/common/LoadingResourceType.ts';
|
||||
import { useStorePointsPoint } from '@/hooks/rain-earthquake/useStorePointsPoint.ts';
|
||||
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore.ts';
|
||||
|
||||
const storePointsList = ref<Point[]>([]);
|
||||
|
||||
// 信息框相关配置
|
||||
const offsetX = ref(0);
|
||||
const offsetY = ref(0);
|
||||
const storePointDetail = ref<Point>();
|
||||
const informationBoxTitle = ref('');
|
||||
|
||||
// 获取钩子函数
|
||||
const { field, getDisasterIcon } = useStorePointsPoint();
|
||||
|
||||
$api.storePoints.getBasePoints().then((res) => {
|
||||
storePointsList.value = res.data;
|
||||
});
|
||||
|
||||
// 监听id变化
|
||||
watch(
|
||||
() => useLoadingInformationStore().storePoints.id,
|
||||
async (newId: number) => {
|
||||
if (newId === -1) {
|
||||
return;
|
||||
}
|
||||
// 获取物资储备点数据
|
||||
const clickObject = useLoadingInformationStore().clickObject;
|
||||
|
||||
if (!clickObject || !clickObject.primitive) {
|
||||
console.warn('点击对象或图元不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await $api.storePoints.getPointDetailById(
|
||||
useLoadingInformationStore().storePoints.id
|
||||
);
|
||||
|
||||
// 更新数据
|
||||
storePointDetail.value = res.data;
|
||||
informationBoxTitle.value = res.data.name || '物资储备点信息';
|
||||
|
||||
try {
|
||||
// 将坐标转换为偏移量
|
||||
const screenPos = CesiumUtilsSingleton.convertScreenPosition(
|
||||
clickObject.primitive.position
|
||||
);
|
||||
offsetX.value = screenPos.x;
|
||||
offsetY.value = screenPos.y;
|
||||
|
||||
// 显示新的信息框
|
||||
useLoadingInformationStore().storePoints.loading = true;
|
||||
} catch (error) {
|
||||
throw new Error(`坐标转换失败:${error}`);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 监听显示隐藏
|
||||
watch(
|
||||
() => useStatusStore().poiLayers.showReservePoint.show,
|
||||
(newValue: boolean) => {
|
||||
if (newValue) {
|
||||
// 显示物资储备点
|
||||
CesiumUtilsSingleton.batchShowPrimitives(
|
||||
useLoadingResourceStore().getLoadingResource(
|
||||
LoadingResource.STORE_POINTS
|
||||
)
|
||||
);
|
||||
} else {
|
||||
// 隐藏物资储备点
|
||||
CesiumUtilsSingleton.batchHidePrimitives(
|
||||
useLoadingResourceStore().getLoadingResource(
|
||||
LoadingResource.STORE_POINTS
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,38 @@
|
||||
<!-- 供水管网 -->
|
||||
<template>
|
||||
<LoadingGeoserverLayer
|
||||
:id="`waterPipe`"
|
||||
:layers="`xian:xian_water_pipe`"
|
||||
@provide-layers="provideLayers"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useStatusStore } from '@/stores/useStatusStore.ts';
|
||||
import type { ImageryLayer } from 'cesium';
|
||||
import { onMounted, watch } from 'vue';
|
||||
import LoadingGeoserverLayer from '../../common/LoadingGeoserverLayer.vue';
|
||||
|
||||
// 保存图层引用
|
||||
let waterPipeLayer: ImageryLayer | null = null;
|
||||
|
||||
onMounted(() => {
|
||||
// 监听显示隐藏
|
||||
watch(
|
||||
() => useStatusStore().infrastructureLayers.showNetworkSystem.show,
|
||||
(newValue: boolean) => {
|
||||
waterPipeLayer!.show = newValue;
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
/**
|
||||
* 提供图层
|
||||
* @param layer 图层
|
||||
*/
|
||||
function provideLayers(layer: ImageryLayer) {
|
||||
waterPipeLayer = layer;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user