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

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,