diff --git a/src/api/api.ts b/src/api/api.ts index 6f8840d..097075c 100644 --- a/src/api/api.ts +++ b/src/api/api.ts @@ -1,8 +1,10 @@ import type { DisasterType } from '@/types/common/DisasterType' import { getSm2PublicKey } from './crypto' -import { getBasePoins, getPointDetailById } from './hidden-danger-spots' +import { getBasePoins as getHiddenDangerBasePoints, getPointDetailById as getHiddenDangerPointDetailById} from './hidden-danger-spots' +import { getBasePoins as getRiskBasePoints, getPointDetailById as getRiskPointDetailById} from './risk-spots' import type { ApiResponse } from '@/types/ApiResponse' import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots' +import type { XianRiskSpots } from '@/types/base/XianRiskSpots' export const $api = { @@ -15,9 +17,18 @@ export const $api = { // 隐患点信息 hiddenDangerSpots: { // 获取所有基础隐患点 - getBasePoins: (disasterType: DisasterType): Promise> => getBasePoins(disasterType), + getBasePoins: (disasterType: DisasterType): Promise> => getHiddenDangerBasePoints(disasterType), // 根据id获取隐患点详情 - getPointDetailById: (id: number): Promise> => getPointDetailById(id), + getPointDetailById: (id: number): Promise> => getHiddenDangerPointDetailById(id), + }, + + // 风险点信息 + riskSpots: { + // 获取所有基础风险点 + getBasePoins: (): Promise> => getRiskBasePoints(), + + // 根据id获取风险点详情 + getPointDetailById: (id: number): Promise> => getRiskPointDetailById(id), }, } diff --git a/src/api/hidden-danger-spots.ts b/src/api/hidden-danger-spots.ts index 0723bf2..95514cb 100644 --- a/src/api/hidden-danger-spots.ts +++ b/src/api/hidden-danger-spots.ts @@ -4,7 +4,7 @@ import type { DisasterType } from "@/types/common/DisasterType" import httpInstance from "@/utils/request/http" /** - * 获取隐藏危险点数据 + * 获取隐患点数据 * @param disasterType 灾害类型 * @returns 隐患点数据 */ @@ -18,7 +18,7 @@ export const getBasePoins = (disasterType: DisasterType): Promise> => { diff --git a/src/api/risk-spots.ts b/src/api/risk-spots.ts new file mode 100644 index 0000000..7d09944 --- /dev/null +++ b/src/api/risk-spots.ts @@ -0,0 +1,20 @@ +import type { ApiResponse } from "@/types/ApiResponse" +import type { XianRiskSpots } from "@/types/base/XianRiskSpots" +import httpInstance from "@/utils/request/http" + +/** + * 获取风险点数据 + * @returns 风险点数据 + */ +export const getBasePoins = (): Promise> => { + return httpInstance.get('/risk-spots/base-points') +} + +/** + * 根据id获取风险点详情 + * @param id 风险点id + * @returns 风险点详情 + */ +export const getPointDetailById = (id: number): Promise> => { + return httpInstance.get(`/risk-spots/point-detail/${id}`) +} \ No newline at end of file diff --git a/src/assets/images/icon/risk-area.png b/src/assets/images/icon/risk-area.png new file mode 100644 index 0000000..22ee97e Binary files /dev/null and b/src/assets/images/icon/risk-area.png differ diff --git a/src/component/map/Map.vue b/src/component/map/Map.vue index 932dbdf..aa773cb 100644 --- a/src/component/map/Map.vue +++ b/src/component/map/Map.vue @@ -11,15 +11,14 @@ import config from '@/config/config.json'; import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils'; import AdministrativeDivision from './AdministrativeDivision.vue'; import { useViewerStore } from '@/stores/useViewerStore'; +import { useLoadingInformationStore } from '@/stores/useLoadingInformation'; onBeforeMount(() => { // 初始化为false useViewerStore().setViewerLoadingCompleted(false) - // 清除viewer相关资源 - if (CesiumUtilsSingleton.getViewer()) { - CesiumUtilsSingleton.clearAllResources('all') - } + // 重置状态 + useLoadingInformationStore().resetStatue() }) onMounted(() => { @@ -27,6 +26,38 @@ onMounted(() => { containerId: 'map-container' }) + // 注册全局点击监听器 + CesiumUtilsSingleton.clickLayer((pickedObject: any) => { + if (pickedObject && pickedObject.id && (typeof pickedObject.id === 'string')) { + const matchResult = pickedObject.id.match(/\d+$/) + const id = matchResult ? parseInt(matchResult[0]) : -1 + + // 当id改变时候,重置状态 + if (useLoadingInformationStore().getHiddenPointId() !== id && useLoadingInformationStore().getRiskPointId() !== id) { + useLoadingInformationStore().resetStatue() + } + + // 点击对象 + useLoadingInformationStore().setClickObject(pickedObject) + + // 隐患点 + if (pickedObject.id.startsWith(config.prefix.hiddenDangerPointId)) { + useLoadingInformationStore().setHiddenPointId(id) + } + + // 风险点 + else if (pickedObject.id.startsWith(config.prefix.riskPointId)) { + useLoadingInformationStore().setRiskPointId(id) + }else { + // 重置状态 + useLoadingInformationStore().resetStatue() + } + } else { + // 重置状态 + useLoadingInformationStore().resetStatue() + } + }) + // 更新完成状态 useViewerStore().setViewerLoadingCompleted(true) CesiumUtilsSingleton.viewToTarget(config.defaultPosition as [number, number, number]); diff --git a/src/component/rain-earthquake/BasicComponent.vue b/src/component/rain-earthquake/BasicComponent.vue index bde6f40..72c8fcf 100644 --- a/src/component/rain-earthquake/BasicComponent.vue +++ b/src/component/rain-earthquake/BasicComponent.vue @@ -5,10 +5,10 @@ - + - + @@ -16,6 +16,8 @@ import MapComponent from "@/component/map/Map.vue" import type { DisasterType } from "@/types/common/DisasterType"; import HiddenPointComponent from "./HiddenPointComponent.vue"; +import RiskPointComponent from "./RiskPointComponent.vue"; +import { useViewerStore } from "@/stores/useViewerStore"; // 获取父组件传递德数据 const props = defineProps<{ diff --git a/src/component/rain-earthquake/HiddenPointComponent.vue b/src/component/rain-earthquake/HiddenPointComponent.vue index ce3d734..7796a45 100644 --- a/src/component/rain-earthquake/HiddenPointComponent.vue +++ b/src/component/rain-earthquake/HiddenPointComponent.vue @@ -2,24 +2,20 @@ diff --git a/src/component/rain-earthquake/RiskPointComponent.vue b/src/component/rain-earthquake/RiskPointComponent.vue new file mode 100644 index 0000000..f36f77e --- /dev/null +++ b/src/component/rain-earthquake/RiskPointComponent.vue @@ -0,0 +1,90 @@ + + + + + + + + diff --git a/src/hooks/usePointsHandle.ts b/src/hooks/usePointsHandle.ts index 3375f77..7cfd1e9 100644 --- a/src/hooks/usePointsHandle.ts +++ b/src/hooks/usePointsHandle.ts @@ -2,7 +2,6 @@ import type { Point } from "@/types/base/Point"; import type { PrimitiveOptions } from "@/types/cesium/PrimitiveOptions"; import { CesiumUtilsSingleton } from "@/utils/cesium/CesiumUtils"; import { Cartesian3, HorizontalOrigin, NearFarScalar, VerticalOrigin } from "cesium"; -import config from '@/config/config.json' /** * 公共批量处理点钩子函数 @@ -14,9 +13,10 @@ export const usePointsHandle = () => { * 添加点 * @param points - 点数据 * @param getDisasterIcon - 获取灾害图标的函数 + * @param prefix - 前缀 * @returns 点的ID列表 */ - function addPoints(points: Point[], getDisasterIcon: (disasterType: string) => string): string[] { + function addPoints(points: Point[], getDisasterIcon: (disasterType?: string) => string, prefix: string): string[] { // 设置加载配置 const options: PrimitiveOptions[] = []; @@ -26,15 +26,14 @@ export const usePointsHandle = () => { points.forEach(point => { try { - if (point.lon === undefined || point.lat === undefined || point.disasterType === undefined) { - throw new Error(`点位数据缺少经纬度或者灾害类型:${point.id}`); + if (point.lon === undefined || point.lat === undefined) { + throw new Error(`点位数据缺少经纬度:${point.id}`); } - // 将经纬度转换为笛卡尔坐标 - const position = Cartesian3.fromDegrees(point.lon, point.lat, 0); + // 将经纬度转换为笛卡尔坐标,太高一点高度,方便点击 + const position = Cartesian3.fromDegrees(point.lon, point.lat, 10); - const id = `${config.prefix.hiddenDangerPointId}${point.id}` + const id = `${prefix}${point.id}` ids.push(id) - options.push({ id: id, type: 'billboard', @@ -51,10 +50,9 @@ export const usePointsHandle = () => { }, }); } catch (error) { - throw new Error(`处理点位失败:${point.id}`); + throw new Error(`处理点位失败:${error}`); } }) - // 批量创建图层 CesiumUtilsSingleton.addPrimitivesBatch(options); diff --git a/src/stores/useLoadingInformation.ts b/src/stores/useLoadingInformation.ts new file mode 100644 index 0000000..cfbe97b --- /dev/null +++ b/src/stores/useLoadingInformation.ts @@ -0,0 +1,52 @@ +import { Billboard } from 'cesium' +import { defineStore } from 'pinia' +import { type Ref, ref } from 'vue' + +/** + * 加载信息弹窗相关参数 + */ +export const useLoadingInformationStore = defineStore('loadingInformation', () => { + + // 点击的对象 + const clickObject: Ref<{ primitive: Billboard | null }> = ref({ primitive: null }) + + // 隐患点 + const loadingHiddenPointInformationStatus: Ref = ref(false) + const hiddenPointId: Ref = ref(-1) + + // 风险点 + const loadingRiskPointInformationStatus: Ref = ref(false) + const riskPointId: Ref = ref(-1) + + // 重置状态 + const resetStatue = () => { + loadingHiddenPointInformationStatus.value = false + hiddenPointId.value = -1 + loadingRiskPointInformationStatus.value = false + riskPointId.value = -1 + } + + // get/set方法 + const getClickObject = () => clickObject.value + const setClickObject = (value: {primitive: Billboard}) => { + clickObject.value = value + } + const getLoadingHiddenPointInformationStatus = () => loadingHiddenPointInformationStatus.value + const setLoadingHiddenPointInformationStatus = (value: boolean) => { + loadingHiddenPointInformationStatus.value = value + } + const getLoadingRiskPointInformationStatus = () => loadingRiskPointInformationStatus.value + const setLoadingRiskPointInformationStatus = (value: boolean) => { + loadingRiskPointInformationStatus.value = value + } + const getHiddenPointId = () => hiddenPointId.value + const setHiddenPointId = (value: number) => { + hiddenPointId.value = value + } + const getRiskPointId = () => riskPointId.value + const setRiskPointId = (value: number) => { + riskPointId.value = value + } + + return { resetStatue, getClickObject, setClickObject, getLoadingHiddenPointInformationStatus, setLoadingHiddenPointInformationStatus, getLoadingRiskPointInformationStatus, setLoadingRiskPointInformationStatus, getHiddenPointId, setHiddenPointId, getRiskPointId, setRiskPointId } +}) diff --git a/src/types/base/XianRiskSpots.ts b/src/types/base/XianRiskSpots.ts new file mode 100644 index 0000000..8756101 --- /dev/null +++ b/src/types/base/XianRiskSpots.ts @@ -0,0 +1,42 @@ +import type { Point } from "./Point"; + +export interface XianRiskSpots extends Point { + /** 风险区名称 */ + riskName?: string; + /** 统一编号 */ + unitCode?: string; + /** 风险区等级 */ + riskLevel?: string; + /** 面积 */ + area?: number; + /** 省 */ + province?: string; + /** 市 */ + city?: string; + /** 县 */ + county?: string; + /** 乡 */ + country?: string; + /** 村 */ + village?: string; + /** 位置 */ + position?: string; + /** 居民户数(户) */ + residentCounts?: number; + /** 居民人口(人) */ + addressPopulation?: number; + /** 威胁财产(万元) */ + riskProperty?: number; + /** 常住人口(人) */ + permanentPopulation?: number; + /** 住房(间) */ + housing?: number; + /** 巡查员姓名 */ + inspectorName?: string; + /** 巡查员电话 */ + inspectorTele?: string; + /** 空间 */ + geom?: any; + /** 逻辑删除标识,0未删除,1已删除 */ + isDelete?: number; +} \ No newline at end of file diff --git a/src/utils/cesium/CesiumUtils.ts b/src/utils/cesium/CesiumUtils.ts index f7e371c..5e1bd5a 100644 --- a/src/utils/cesium/CesiumUtils.ts +++ b/src/utils/cesium/CesiumUtils.ts @@ -410,7 +410,6 @@ export class CesiumUtils { handler.setInputAction((clickEvent: {position: Cartesian2}) => { // 在点击位置进行拾取 const pickedObject = CesiumUtilsSingleton.getViewer()?.scene.pick(clickEvent.position); - callback(pickedObject); }, ScreenSpaceEventType.LEFT_CLICK); } diff --git a/src/views/home/earthquake/Earthquake.vue b/src/views/home/earthquake/Earthquake.vue index c006cab..26b92a5 100644 --- a/src/views/home/earthquake/Earthquake.vue +++ b/src/views/home/earthquake/Earthquake.vue @@ -1,12 +1,16 @@ diff --git a/src/views/home/rainstorm/Rainstorm.vue b/src/views/home/rainstorm/Rainstorm.vue index 5a3d38a..63d9458 100644 --- a/src/views/home/rainstorm/Rainstorm.vue +++ b/src/views/home/rainstorm/Rainstorm.vue @@ -1,12 +1,15 @@