断裂带

src/component/earthquake/FaultComponent.vue

@@ -0,0 +1,27 @@
+<!-- 加载断层组件 -->
+<template>
+  <div></div>
+</template>
+<script setup lang="ts">
+  import { xianFaultData } from '@/assets';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+  import { Color } from 'cesium';
+  import { onMounted } from 'vue';
+
+  onMounted(() => {
+    CesiumUtilsSingleton.addGeoJsonLayer(
+      'xian-earthque-fault-data',
+      xianFaultData,
+      {
+        showName: false,
+        isDefault: true,
+        polylineStyle: {
+          width: 2,
+          material: Color.RED,
+          clampToGround: true,
+        },
+      }
+    );
+  });
+</script>
+<style scoped lang="less"></style>

src/stores/useStatusStore.ts

@@ -37,6 +37,8 @@ export const useStatusStore = defineStore('status', () => {
     hiddenDangerPointShow: true,
     /** 风险点显示状态 */
     riskPointShow: true,
+    /** 断裂带显示状态 */
+    faultShow: true,
   });
 
   /**

src/views/home/earthquake/EarthquakeView.vue

@@ -6,6 +6,14 @@
       :key="route.fullPath"
     />
 
+    <!-- 断裂带 -->
+    <FaultComponent
+      v-if="
+        useStatusStore().appLoadingCompleted &&
+        useStatusStore().mapLayers.faultShow
+      "
+    />
+
     <!-- 灾害链影响列表组件 -->
     <DisasterChainPointComponent
       :select-options="selectOptions"
@@ -31,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-  import { xianFaultData } from '@/assets';
+  import FaultComponent from '@/component/earthquake/FaultComponent.vue';
   import BasicComponent from '@/component/rain-earthquake/BasicComponent.vue';
   import ControlShowComponent from '@/component/rain-earthquake/ControlShowComponent.vue';
   import DisasterChainPointComponent from '@/component/rain-earthquake/DisasterChainPointComponent.vue';
@@ -41,9 +49,7 @@
   import { useEarthquakeDisasterChain } from '@/hooks/earthquake/useEarthquakeDisasterChain';
   import { useStatusStore } from '@/stores/useStatusStore';
   import { DisasterType } from '@/types/common/DisasterType.ts';
-  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+  import { watch } from 'vue';
-  import { Color } from 'cesium';
-  import { onMounted, watch } from 'vue';
   import { useRoute } from 'vue-router';
 
   const route = useRoute();
@@ -62,35 +68,6 @@
     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,