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

2026-04-13 10:30:03 +08:00
parent 83f8fec3a4
commit 5eb71642d2
46 changed files with 2084 additions and 1535 deletions
@@ -1,75 +1,102 @@
 <!-- 加载行政区划 -->
 <template>
-
+  <div></div>
 </template>

 <script lang="ts" setup>
-import BaQiiao from '@/assets/json/BaQiao.json';
-import BeiLin from '@/assets/json/BeiLin.json';
-import ChangAn from '@/assets/json/ChangAn.json';
-import GaoLing from '@/assets/json/GaoLing.json';
-import HuYi from '@/assets/json/HuYi.json';
-import LanTian from '@/assets/json/LanTian.json';
-import LianHu from '@/assets/json/LianHu.json';
-import LinTong from '@/assets/json/LinTong.json';
-import WeiYang from '@/assets/json/WeiYang.json';
-import XinCheng from '@/assets/json/XinCheng.json';
-import YanLiang from '@/assets/json/YanLiang.json';
-import YanTa from '@/assets/json/YanTa.json';
-import ZhouZhi from '@/assets/json/ZhouZhi.json';
-import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
-import { Color } from 'cesium';
-import { onMounted } from 'vue';
+  import BaQiiao from '@/assets/json/BaQiao.json';
+  import BeiLin from '@/assets/json/BeiLin.json';
+  import ChangAn from '@/assets/json/ChangAn.json';
+  import GaoLing from '@/assets/json/GaoLing.json';
+  import HuYi from '@/assets/json/HuYi.json';
+  import LanTian from '@/assets/json/LanTian.json';
+  import LianHu from '@/assets/json/LianHu.json';
+  import LinTong from '@/assets/json/LinTong.json';
+  import WeiYang from '@/assets/json/WeiYang.json';
+  import XinCheng from '@/assets/json/XinCheng.json';
+  import YanLiang from '@/assets/json/YanLiang.json';
+  import YanTa from '@/assets/json/YanTa.json';
+  import ZhouZhi from '@/assets/json/ZhouZhi.json';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+  import { Color } from 'cesium';
+  import { onMounted } from 'vue';

-const areas = [BaQiiao, BeiLin, ChangAn, GaoLing, HuYi, LanTian, LianHu, LinTong, WeiYang, XinCheng, YanLiang, YanTa, ZhouZhi]
-const areasId = ['baqiao', 'beilin', 'changan', 'gaoling', 'huyi', 'lantian', 'lianhu', 'lintong', 'weiyang', 'xincheng', 'yanliang', 'yanta', 'zhouzhi'];
-const areasColor = [
-            new Color(255 / 255, 153 / 255, 0 / 255),
-            new Color(255 / 255, 51 / 255, 102 / 255),
-            new Color(0 / 255, 178 / 255, 255 / 255),
-            new Color(102 / 255, 255 / 255, 102 / 255),
-            new Color(204 / 255, 102 / 255, 255 / 255),
-            new Color(255 / 255, 204 / 255, 0 / 255),
-            new Color(0 / 255, 204 / 255, 153 / 255),
-            new Color(255 / 255, 102 / 255, 102 / 255),
-            new Color(102 / 255, 153 / 255, 255 / 255),
-            new Color(255 / 255, 178 / 255, 102 / 255),
-            new Color(153 / 255, 255 / 255, 204 / 255),
-            new Color(255 / 255, 153 / 255, 204 / 255),
-            new Color(190 / 255, 255 / 255, 232 / 255)
-        ]
-const areaTransparency = 0.3;
-const labelTransparency = 1;
+  const areas = [
+    BaQiiao,
+    BeiLin,
+    ChangAn,
+    GaoLing,
+    HuYi,
+    LanTian,
+    LianHu,
+    LinTong,
+    WeiYang,
+    XinCheng,
+    YanLiang,
+    YanTa,
+    ZhouZhi,
+  ];
+  const areasId = [
+    'baqiao',
+    'beilin',
+    'changan',
+    'gaoling',
+    'huyi',
+    'lantian',
+    'lianhu',
+    'lintong',
+    'weiyang',
+    'xincheng',
+    'yanliang',
+    'yanta',
+    'zhouzhi',
+  ];
+  const areasColor = [
+    new Color(255 / 255, 153 / 255, 0 / 255),
+    new Color(255 / 255, 51 / 255, 102 / 255),
+    new Color(0 / 255, 178 / 255, 255 / 255),
+    new Color(102 / 255, 255 / 255, 102 / 255),
+    new Color(204 / 255, 102 / 255, 255 / 255),
+    new Color(255 / 255, 204 / 255, 0 / 255),
+    new Color(0 / 255, 204 / 255, 153 / 255),
+    new Color(255 / 255, 102 / 255, 102 / 255),
+    new Color(102 / 255, 153 / 255, 255 / 255),
+    new Color(255 / 255, 178 / 255, 102 / 255),
+    new Color(153 / 255, 255 / 255, 204 / 255),
+    new Color(255 / 255, 153 / 255, 204 / 255),
+    new Color(190 / 255, 255 / 255, 232 / 255),
+  ];
+  const areaTransparency = 0.3;
+  const labelTransparency = 1;

-onMounted(() => {
+  onMounted(() => {
    // 构建批量添加配置数组
    const layerConfigs = areasId.map((id, index) => ({
-        layerId: id,
-        geojsonData: areas[index],
-        isDefault: true,
-        options: {
-            showName: true,
-            labelStyle: {
-                labelText: areas[index].features[0].properties.name,
-                center: [
-                    areas[index].features[0].properties.center[0],
-                    areas[index].features[0].properties.center[1],
-                    0
-                ] as [number, number, number],
-                labelColor: Color.BLACK,
-                backgroundColor: areasColor[index].withAlpha(labelTransparency)
-            },
-            polygonStyle: {
-                fill: true,
-                fillColor: areasColor[index].withAlpha(areaTransparency),
-                outline: false
-            }
-        }
+      layerId: id,
+      geojsonData: areas[index],
+      isDefault: true,
+      options: {
+        showName: true,
+        labelStyle: {
+          labelText: areas[index].features[0].properties.name,
+          center: [
+            areas[index].features[0].properties.center[0],
+            areas[index].features[0].properties.center[1],
+            0,
+          ] as [number, number, number],
+          labelColor: Color.BLACK,
+          backgroundColor: areasColor[index].withAlpha(labelTransparency),
+        },
+        polygonStyle: {
+          fill: true,
+          fillColor: areasColor[index].withAlpha(areaTransparency),
+          outline: false,
+        },
+      },
    }));

    CesiumUtilsSingleton.batchAddGeoJsonLayers(layerConfigs);
-})
-
+  });
 </script>

-<style scoped></style>
+<style scoped></style>
@@ -1,90 +0,0 @@
-<template>
-    <div class="map_container" id="map-container"></div>
-
-    <!-- 行政区划 -->
-    <AdministrativeDivision v-if="useViewerStore().getViewerLoadingCompleted()" />
-</template>
-
-<script lang="ts" setup>
-import { onBeforeMount, onMounted } from 'vue';
-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';
-import xiAnGeoJSON from '@/assets/json/XiAn.json'
-import type { GeoJsonFileType } from '@/types/cesium/GeoJsonFileType';
-import { Color } from 'cesium';
-
-onBeforeMount(() => {
-    // 初始化为false
-    useViewerStore().setViewerLoadingCompleted(false)
-
-    // 重置状态
-    useLoadingInformationStore().resetStatue()
-})
-
-onMounted(async() => {
-    await CesiumUtilsSingleton.initCesiumViewer({
-        containerId: 'map-container',
-        mark: {
-            include: true,
-            geoJson: xiAnGeoJSON as GeoJsonFileType,
-            color: Color.BLACK.withAlpha(0.8),
-            border: {
-                width: 3
-            }
-        }
-    },)
-
-    useViewerStore().setViewerLoadingCompleted(true)
-    
-    // 注册全局点击监听器
-    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()
-        }
-    })
-
-    CesiumUtilsSingleton.viewToTarget(config.defaultPosition as [number, number, number]);
-})
-
-</script>
-
-<style scoped>
-.map_container {
-    width: 100vw;
-    height: 100vh;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-</style>
@@ -0,0 +1,118 @@
+<template>
+  <div class="map_container" id="map-container"></div>
+
+  <!-- 行政区划 -->
+  <AdministrativeDivision v-if="useViewerStore().getViewerLoadingCompleted()" />
+</template>
+
+<script lang="ts" setup>
+  import { onBeforeMount, onMounted } from 'vue';
+  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';
+  import xiAnGeoJSON from '@/assets/json/XiAn.json';
+  import type { GeoJsonFileType } from '@/types/cesium/GeoJsonFileType';
+  import { Color, ScreenSpaceEventType } from 'cesium';
+  import type { ClickObject } from '@/types/cesium/ClickObject';
+
+  onBeforeMount(() => {
+    // 初始化为false
+    useViewerStore().setViewerLoadingCompleted(false);
+
+    // 重置状态
+    useLoadingInformationStore().resetStatue();
+  });
+
+  onMounted(async () => {
+    await CesiumUtilsSingleton.initCesiumViewer({
+      containerId: 'map-container',
+      mark: {
+        include: true,
+        geoJson: xiAnGeoJSON as GeoJsonFileType,
+        color: Color.BLACK.withAlpha(0.8),
+        border: {
+          width: 3,
+        },
+      },
+    });
+
+    useViewerStore().setViewerLoadingCompleted(true);
+
+    // 注册全局点击监听器
+    CesiumUtilsSingleton.clickLayer((pickedObject: ClickObject) => {
+      console.log('点击对象：', pickedObject);
+      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();
+      }
+    });
+
+    // 注册全局滚轮监听器
+    CesiumUtilsSingleton.getViewer()!.scene.canvas.addEventListener(
+      'wheel',
+      () => {
+        // 设置最小最大高度
+        CesiumUtilsSingleton.setHeightLimits();
+      }
+    );
+
+    // 当行政区超出页面时，自动拉回视角
+    CesiumUtilsSingleton.outOverView();
+
+    // 禁止全局默认双击事件
+    CesiumUtilsSingleton.getViewer()?.cesiumWidget.screenSpaceEventHandler.removeInputAction(
+      ScreenSpaceEventType.LEFT_DOUBLE_CLICK
+    );
+
+    // 默认视角
+    CesiumUtilsSingleton.viewToTarget(
+      config.defaultPosition as [number, number, number]
+    );
+  });
+</script>
+
+<style scoped>
+  .map_container {
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+</style>