加载断裂带，同时允许cesium加载EPSG:4490数据

package.json

@@ -19,6 +19,7 @@
     "element-plus": "^2.13.6",
     "gm-crypto": "^0.1.12",
     "pinia": "^3.0.3",
+    "proj4": "^2.20.8",
     "spark-md5": "^3.0.2",
     "vite-plugin-cesium": "^1.2.22",
     "vue": "^3.5.32",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       pinia:
         specifier: ^3.0.3
         version: 3.0.4(typescript@6.0.2)(vue@3.5.32(typescript@6.0.2))
+      proj4:
+        specifier: ^2.20.8
+        version: 2.20.8
       spark-md5:
         specifier: ^3.0.2
         version: 3.0.2
@@ -1540,6 +1543,9 @@ packages:
   meshoptimizer@0.18.1:
     resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==}
 
+  mgrs@1.0.0:
+    resolution: {integrity: sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA==}
+
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
@@ -1718,6 +1724,9 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
+  proj4@2.20.8:
+    resolution: {integrity: sha512-1C8sfT4xY4PAPwk0MroFBTGF4R4bzDXdmPQTGYVLsoNssrZ9odzObxS2dTeGBty8jW8KO7h16C1Hs2JP+ctfFw==}
+
   protobufjs@7.5.4:
     resolution: {integrity: sha512-CvexbZtbov6jW2eXAvLukXjXUW1TzFaivC46BpWc/3BpcCysb5Vffu+B3XHMm8lVEuy2Mm4XGex8hBSg1yapPg==}
     engines: {node: '>=12.0.0'}
@@ -2112,6 +2121,9 @@ packages:
     engines: {node: ^18.17.0 || >=20.5.0}
     hasBin: true
 
+  wkt-parser@1.5.5:
+    resolution: {integrity: sha512-/zMYi94/7D7fxcOSlVmWn6vnOMj3Gq5d1xvVjaYOS9n6h0qOJ4I7YYVxBWYcH1vq9+suhqzXkn05Yx47zQNUIA==}
+
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
@@ -3615,6 +3627,8 @@ snapshots:
 
   meshoptimizer@0.18.1: {}
 
+  mgrs@1.0.0: {}
+
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
@@ -3776,6 +3790,11 @@ snapshots:
 
   prettier@3.6.2: {}
 
+  proj4@2.20.8:
+    dependencies:
+      mgrs: 1.0.0
+      wkt-parser: 1.5.5
+
   protobufjs@7.5.4:
     dependencies:
       '@protobufjs/aspromise': 1.1.2
@@ -4198,6 +4217,8 @@ snapshots:
     dependencies:
       isexe: 3.1.5
 
+  wkt-parser@1.5.5: {}
+
   word-wrap@1.2.5: {}
 
   wsl-utils@0.1.0:

src/assets/index.ts

@@ -31,3 +31,4 @@ export { default as yanLiang } from '@/assets/json/YanLiang.json';
 export { default as yanTa } from '@/assets/json/YanTa.json';
 export { default as zhouZhi } from '@/assets/json/ZhouZhi.json';
 export { default as xiAn } from '@/assets/json/XiAn.json';
+export { default as xianFaultData } from '@/assets/json/西安断层数据.json';

src/component/rain-earthquake/ControlShowComponent.vue

@@ -62,4 +62,7 @@
     height: auto;
     color: #fff;
   }
+  :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
+    color: #fff;
+  }
 </style>

src/main.ts

@@ -5,6 +5,8 @@ import App from './App.vue';
 import router from './router';
 import * as ElementPlusIconsVue from '@element-plus/icons-vue';
 import 'element-plus/dist/index.css';
+import proj4 from 'proj4';
+import { Cartesian3, GeoJsonDataSource } from 'cesium';
 
 const app = createApp(App);
 
@@ -16,3 +18,21 @@ app.use(createPinia());
 app.use(router);
 
 app.mount('#app');
+
+// 定义 EPSG:4490 (CGCS2000)
+proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs +type=crs');
+
+// 定义 EPSG:4326 (WGS84)
+proj4.defs('EPSG:4326', '+proj=longlat +datum=WGS84 +no_defs +type=crs');
+
+// 坐标转换函数
+const transformFunc = proj4('EPSG:4490', 'EPSG:4326').forward;
+
+// 将坐标转换函数注册给Cesium，让它能自动处理所有标记为EPSG:4490的坐标数据
+GeoJsonDataSource.crsNames['EPSG:4490'] = function (coordinates: number[]) {
+  const [x, y] = coordinates;
+  // 使用 proj4 进行坐标转换
+  const [lon, lat] = transformFunc([x, y]);
+  // 返回 Cesium 能识别的笛卡尔坐标
+  return Cartesian3.fromDegrees(lon, lat);
+};

src/views/home/earthquake/EarthquakeView.vue

@@ -31,6 +31,7 @@
 </template>
 
 <script setup lang="ts">
+  import { xianFaultData } from '@/assets';
   import BasicComponent from '@/component/rain-earthquake/BasicComponent.vue';
   import ControlShowComponent from '@/component/rain-earthquake/ControlShowComponent.vue';
   import DisasterChainPointComponent from '@/component/rain-earthquake/DisasterChainPointComponent.vue';
@@ -38,8 +39,11 @@
   import LegendComponent from '@/component/rain-earthquake/LegendComponent.vue';
   import RightButtonComponent from '@/component/rain-earthquake/RightButtonComponent.vue';
   import { useEarthquakeDisasterChain } from '@/hooks/earthquake/useEarthquakeDisasterChain';
+  import { useStatusStore } from '@/stores/useStatusStore';
   import { DisasterType } from '@/types/common/DisasterType.ts';
-  import { watch } from 'vue';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+  import { Color } from 'cesium';
+  import { onMounted, watch } from 'vue';
   import { useRoute } from 'vue-router';
 
   const route = useRoute();
@@ -58,6 +62,35 @@
     changeCurrentPage,
   } = useEarthquakeDisasterChain();
 
+  /**
+   * 组件挂载
+   */
+  onMounted(() => {
+    /**
+     * 加载西安断层数据
+     */
+    watch(
+      () => useStatusStore().appLoadingCompleted,
+      (newStatue: boolean) => {
+        if (newStatue) {
+          CesiumUtilsSingleton.addGeoJsonLayer(
+            'xian-earthque-fault-data',
+            xianFaultData,
+            {
+              showName: false,
+              isDefault: true,
+              polylineStyle: {
+                width: 2,
+                material: Color.RED,
+                clampToGround: true,
+              },
+            }
+          );
+        }
+      }
+    );
+  });
+
   // 监听条件变化
   watch(
     conditions,