格式化代码并添加视角高度控制以及视角范围控制

2026-04-13 10:30:03 +08:00
parent 83f8fec3a4
commit 5eb71642d2
46 changed files with 2084 additions and 1535 deletions
@@ -5,24 +5,27 @@
    <MapComponent />

    <!-- 隐患点组件 -->
-    <HiddenPointComponent :disaster-type="props.disasterType" v-if="useViewerStore().getViewerLoadingCompleted()"/>
+    <HiddenPointComponent
+      :disaster-type="props.disasterType"
+      v-if="useViewerStore().getViewerLoadingCompleted()"
+    />

    <!-- 风险点组件 -->
-    <RiskPointComponent v-if="useViewerStore().getViewerLoadingCompleted()"/>
+    <RiskPointComponent v-if="useViewerStore().getViewerLoadingCompleted()" />
  </div>
 </template>

 <script setup lang="ts">
-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";
+  import MapComponent from '@/component/map/MapComponent.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<{
-  disasterType: DisasterType
-}>()
+  // 获取父组件传递德数据
+  const props = defineProps<{
+    disasterType: DisasterType;
+  }>();
 </script>

 <style scoped></style>
@@ -2,107 +2,129 @@
 <template>
  <div>
    <!-- 加载基础隐患点 -->
-    <LoadingPoints v-if="useViewerStore().getViewerLoadingCompleted() && baseHiddenPoints.length > 0"
-      :base-points="baseHiddenPoints" :get-disaster-icon="getDisasterIcon"
-      :prefix="config.prefix.hiddenDangerPointId" />
+    <LoadingPoints
+      v-if="
+        useViewerStore().getViewerLoadingCompleted() &&
+        baseHiddenPoints.length > 0
+      "
+      :base-points="baseHiddenPoints"
+      :get-disaster-icon="getDisasterIcon"
+      :prefix="config.prefix.hiddenDangerPointId"
+    />

    <!-- 显示信息框 -->
-    <InformationBox :data='hiddenDangerPointDetail as Record<string, any>' :field="field"
-      v-if="useLoadingInformationStore().getLoadingHiddenPointInformationStatus()" :title="informationBoxTitle"
-      :offset-x="offsetX" :offset-y="offsetY" :key="useLoadingInformationStore().getHiddenPointId()" />
+    <InformationBox
+      :data="hiddenDangerPointDetail as Record<string, any>"
+      :field="field"
+      v-if="
+        useLoadingInformationStore().getLoadingHiddenPointInformationStatus()
+      "
+      :title="informationBoxTitle"
+      :offset-x="offsetX"
+      :offset-y="offsetY"
+      :key="useLoadingInformationStore().getHiddenPointId()"
+    />
  </div>
 </template>

 <script setup lang="ts">
-import { DisasterType } from "@/types/common/DisasterType";
-import { ref, watch } from "vue";
-import { $api } from "@/api/api.ts";
-import type { Point } from "@/types/base/Point";
-import LoadingPoints from "@/component/rain-earthquake/LoadingPoints.vue";
-import landslide from '@/assets/images/icon/landslide.png';
-import debrisFlow from '@/assets/images/icon/debris-flow.png';
-import flashFlood from '@/assets/images/icon/flash-flood.png';
-import waterlogging from '@/assets/images/icon/waterlogging.png';
-import config from '@/config/config.json'
-import InformationBox from "@/component/common/InformationBox.vue";
-import { useViewerStore } from "@/stores/useViewerStore";
-import { useLoadingInformationStore } from "@/stores/useLoadingInformation";
-import { CesiumUtilsSingleton } from "@/utils/cesium/CesiumUtils";
+  import { DisasterType } from '@/types/common/DisasterType';
+  import { ref, watch } from 'vue';
+  import { $api } from '@/api/api.ts';
+  import type { Point } from '@/types/base/Point';
+  import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
+  import landslide from '@/assets/images/icon/landslide.png';
+  import debrisFlow from '@/assets/images/icon/debris-flow.png';
+  import flashFlood from '@/assets/images/icon/flash-flood.png';
+  import waterlogging from '@/assets/images/icon/waterlogging.png';
+  import config from '@/config/config.json';
+  import InformationBox from '@/component/common/InformationBox.vue';
+  import { useViewerStore } from '@/stores/useViewerStore';
+  import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';

-const props = defineProps<{
-  disasterType: DisasterType
-}>()
+  const props = defineProps<{
+    disasterType: DisasterType;
+  }>();

-const baseHiddenPoints = ref<Point[]>([]);
+  const baseHiddenPoints = ref<Point[]>([]);

-const informationBoxTitle = ref('')
-const offsetX = ref(0)
-const offsetY = ref(0)
-const hiddenDangerPointDetail = ref<Point>()
+  const informationBoxTitle = ref('');
+  const offsetX = ref(0);
+  const offsetY = ref(0);
+  const hiddenDangerPointDetail = ref<Point>();

-const field = {
-  fieldCode: '野外编号',
-  disasterName: '灾害点名称',
-  position: '位置',
-  disasterType: '灾害类型',
-  scaleGrade: '规模等级',
-  riskGrade: '风险等级'
-}
+  const field = {
+    fieldCode: '野外编号',
+    disasterName: '灾害点名称',
+    position: '位置',
+    disasterType: '灾害类型',
+    scaleGrade: '规模等级',
+    riskGrade: '风险等级',
+  };

-$api.hiddenDangerSpots.getBasePoins(props.disasterType).then((res) => {
-  baseHiddenPoints.value = res.data
-})
+  $api.hiddenDangerSpots.getBasePoins(props.disasterType).then((res) => {
+    baseHiddenPoints.value = res.data;
+  });

-// 监听id变化
-watch(() => useLoadingInformationStore().getHiddenPointId(), async (newId: number) => {
+  // 监听id变化
+  watch(
+    () => useLoadingInformationStore().getHiddenPointId(),
+    async (newId: number) => {
+      if (newId === -1) {
+        return;
+      }

-  if (newId === -1) {
-    return
-  }
+      // 获取隐患点数据
+      const clickObject = useLoadingInformationStore().getClickObject();

-  // 获取隐患点数据
-  const clickObject = useLoadingInformationStore().getClickObject();
+      if (!clickObject || !clickObject.primitive) {
+        console.warn('点击对象或图元不存在');
+        return;
+      }

-  if (!clickObject || !clickObject.primitive) {
-    console.warn('点击对象或图元不存在');
-    return;
-  }
+      const res = await $api.hiddenDangerSpots.getPointDetailById(
+        useLoadingInformationStore().getHiddenPointId()
+      );

-  const res = await $api.hiddenDangerSpots.getPointDetailById(useLoadingInformationStore().getHiddenPointId());
+      // 更新数据
+      hiddenDangerPointDetail.value = res.data;
+      informationBoxTitle.value = res.data.disasterType + '隐患点';

-  // 更新数据
-  hiddenDangerPointDetail.value = res.data;
-  informationBoxTitle.value = res.data.disasterType + '隐患点';
+      try {
+        // 将坐标转换为偏移量
+        const screenPos = CesiumUtilsSingleton.convertScreenPosition(
+          clickObject.primitive.position
+        );
+        offsetX.value = screenPos.x;
+        offsetY.value = screenPos.y;

-  try {
-    // 将坐标转换为偏移量
-    const screenPos = CesiumUtilsSingleton.convertScreenPosition(clickObject.primitive.position);
-    offsetX.value = screenPos.x;
-    offsetY.value = screenPos.y;
-
-    // 显示新的信息框
-    useLoadingInformationStore().setLoadingHiddenPointInformationStatus(true);
-  } catch (error) {
-    throw new Error(`坐标转换失败:${error}`);
-  }
-})
+        // 显示新的信息框
+        useLoadingInformationStore().setLoadingHiddenPointInformationStatus(
+          true
+        );
+      } catch (error) {
+        throw new Error(`坐标转换失败:${error}`);
+      }
+    }
+  );
 </script>

 <script lang="ts">
-function getDisasterIcon(disasterType?: string): string {
-  switch (disasterType) {
-    case '滑坡':
-      return landslide
-    case '泥石流':
-      return debrisFlow
-    case '内涝':
-      return waterlogging
-    case "山洪":
-      return flashFlood
-    default:
-      throw new Error(`未知的灾害类型: ${disasterType}`);
+  function getDisasterIcon(disasterType?: string): string {
+    switch (disasterType) {
+      case '滑坡':
+        return landslide;
+      case '泥石流':
+        return debrisFlow;
+      case '内涝':
+        return waterlogging;
+      case '山洪':
+        return flashFlood;
+      default:
+        throw new Error(`未知的灾害类型: ${disasterType}`);
+    }
  }
-}
 </script>

 <style scoped></style>
@@ -1,27 +1,31 @@
 <!-- 加载点的组件 -->
 <template>
-
+  <div></div>
 </template>

 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import { usePointsHandle } from '@/hooks/usePointsHandle';
-import type { Point } from '@/types/base/Point';
+  import { onMounted } from 'vue';
+  import { usePointsHandle } from '@/hooks/usePointsHandle';
+  import type { Point } from '@/types/base/Point';

-// 属性
-const props = defineProps<{
-    basePoints: Point[]
-    getDisasterIcon: (disasterType?: string) => string
-    prefix: string
-}>();
+  // 属性
+  const props = defineProps<{
+    basePoints: Point[];
+    getDisasterIcon: (disasterType?: string) => string;
+    prefix: string;
+  }>();

-// 点处理钩子
-const pointsHandle = usePointsHandle()
+  // 点处理钩子
+  const pointsHandle = usePointsHandle();

-onMounted(() => {
+  onMounted(() => {
    // 加载点
-    pointsHandle.addPoints(props.basePoints, props.getDisasterIcon, props.prefix)
-})
+    pointsHandle.addPoints(
+      props.basePoints,
+      props.getDisasterIcon,
+      props.prefix
+    );
+  });
 </script>

 <style scoped></style>
@@ -1,37 +1,49 @@
 <!-- 风险点组件 -->
 <template>
-    <div>
-        <!-- 加载风险点 -->
-        <LoadingPoints v-if="useViewerStore().getViewerLoadingCompleted() && riskPoints.length > 0"
-            :base-points="riskPoints" :get-disaster-icon="getDisasterIcon" :prefix="config.prefix.riskPointId" />
+  <div>
+    <!-- 加载风险点 -->
+    <LoadingPoints
+      v-if="
+        useViewerStore().getViewerLoadingCompleted() && riskPoints.length > 0
+      "
+      :base-points="riskPoints"
+      :get-disaster-icon="getDisasterIcon"
+      :prefix="config.prefix.riskPointId"
+    />

-        <!-- 显示信息框 -->
-        <InformationBox :data='riskPointDetail as Record<string, any>' :field="field"
-            v-if="useLoadingInformationStore().getLoadingRiskPointInformationStatus()" :title="informationBoxTitle"
-            :offset-x="offsetX" :offset-y="offsetY" :key="useLoadingInformationStore().getRiskPointId()" />
-    </div>
+    <!-- 显示信息框 -->
+    <InformationBox
+      :data="riskPointDetail as Record<string, any>"
+      :field="field"
+      v-if="useLoadingInformationStore().getLoadingRiskPointInformationStatus()"
+      :title="informationBoxTitle"
+      :offset-x="offsetX"
+      :offset-y="offsetY"
+      :key="useLoadingInformationStore().getRiskPointId()"
+    />
+  </div>
 </template>

 <script setup lang="ts">
-import { ref, watch } from "vue";
-import { $api } from "@/api/api.ts";
-import type { Point } from "@/types/base/Point";
-import LoadingPoints from "@/component/rain-earthquake/LoadingPoints.vue";
-import riskArea from '@/assets/images/icon/risk-area.png';
-import config from '@/config/config.json'
-import InformationBox from "@/component/common/InformationBox.vue";
-import { useViewerStore } from "@/stores/useViewerStore";
-import { useLoadingInformationStore } from "@/stores/useLoadingInformation";
-import { CesiumUtilsSingleton } from "@/utils/cesium/CesiumUtils";
+  import { ref, watch } from 'vue';
+  import { $api } from '@/api/api.ts';
+  import type { Point } from '@/types/base/Point';
+  import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
+  import riskArea from '@/assets/images/icon/risk-area.png';
+  import config from '@/config/config.json';
+  import InformationBox from '@/component/common/InformationBox.vue';
+  import { useViewerStore } from '@/stores/useViewerStore';
+  import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';

-const riskPoints = ref<Point[]>([]);
+  const riskPoints = ref<Point[]>([]);

-const informationBoxTitle = '风险区域'
-const offsetX = ref(0)
-const offsetY = ref(0)
-const riskPointDetail = ref<Point>()
+  const informationBoxTitle = '风险区域';
+  const offsetX = ref(0);
+  const offsetY = ref(0);
+  const riskPointDetail = ref<Point>();

-const field = {
+  const field = {
    riskName: '风险区名称',
    unitCode: '统一编号',
    housing: '住房（间）',
@@ -42,49 +54,56 @@ const field = {
    inspectorTele: '巡查员手机号',
    position: '位置',
    lon: '经度',
-    lat: '纬度'
-}
+    lat: '纬度',
+  };

-$api.riskSpots.getBasePoins().then((res) => {
-    riskPoints.value = res.data
-})
+  $api.riskSpots.getBasePoins().then((res) => {
+    riskPoints.value = res.data;
+  });

-// 监听id变化
-watch(() => useLoadingInformationStore().getRiskPointId(), async (newId: number) => {
-    if (newId === -1) {
-        return
-    }
-    // 获取风险点数据
-    const clickObject = useLoadingInformationStore().getClickObject();
+  // 监听id变化
+  watch(
+    () => useLoadingInformationStore().getRiskPointId(),
+    async (newId: number) => {
+      if (newId === -1) {
+        return;
+      }
+      // 获取风险点数据
+      const clickObject = useLoadingInformationStore().getClickObject();

-    if (!clickObject || !clickObject.primitive) {
+      if (!clickObject || !clickObject.primitive) {
        console.warn('点击对象或图元不存在');
        return;
-    }
+      }

-    const res = await $api.riskSpots.getPointDetailById(useLoadingInformationStore().getRiskPointId());
+      const res = await $api.riskSpots.getPointDetailById(
+        useLoadingInformationStore().getRiskPointId()
+      );

-    // 更新数据
-    riskPointDetail.value = res.data;
+      // 更新数据
+      riskPointDetail.value = res.data;

-    try {
+      try {
        // 将坐标转换为偏移量
-        const screenPos = CesiumUtilsSingleton.convertScreenPosition(clickObject.primitive.position);
+        const screenPos = CesiumUtilsSingleton.convertScreenPosition(
+          clickObject.primitive.position
+        );
        offsetX.value = screenPos.x;
        offsetY.value = screenPos.y;

        // 显示新的信息框
        useLoadingInformationStore().setLoadingRiskPointInformationStatus(true);
-    } catch (error) {
+      } catch (error) {
        throw new Error(`坐标转换失败:${error}`);
+      }
    }
-})
+  );
 </script>

 <script lang="ts">
-function getDisasterIcon(): string {
+  function getDisasterIcon(): string {
    return riskArea;
-}
+  }
 </script>

 <style scoped></style>