右侧控制显示面板，同时规整显示隐藏点的逻辑

src/component/rain-earthquake/BasicComponent.vue

@@ -7,11 +7,11 @@
     <!-- 隐患点组件 -->
     <HiddenPointComponent
       :disaster-type="props.disasterType"
-      v-if="useStatusStore().getAppLoadingCompleted()"
+      v-if="useStatusStore().appLoadingCompleted"
     />
 
     <!-- 风险点组件 -->
-    <RiskPointComponent v-if="useStatusStore().getAppLoadingCompleted()" />
+    <RiskPointComponent v-if="useStatusStore().appLoadingCompleted" />
   </div>
 </template>
 

src/component/rain-earthquake/ControlShowComponent.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="control-show-panel-box">
+    <div class="title-box">
+      <header>控制显示</header>
+    </div>
+
+    <div class="control-show-list">
+      <div v-for="(item, index) in constrolShowList" :key="index">
+        <el-checkbox
+          v-model="item.selected"
+          :label="item.name"
+          @change="item.callback(item.selected)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  defineProps<{
+    constrolShowList: {
+      name: string;
+      selected: boolean;
+      callback: (...args: unknown[]) => unknown;
+    }[];
+  }>();
+</script>
+
+<style scoped>
+  .control-show-panel-box {
+    position: absolute;
+    top: 75px;
+    right: 0px;
+    border-radius: 2px;
+    z-index: 1000;
+    width: 160px;
+    overflow: auto;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    color: white;
+    border: 1px solid rgb(0, 225, 255);
+  }
+  .title-box {
+    font-weight: bold;
+    font-size: 12px;
+    background: linear-gradient(
+      180deg,
+      rgb(86, 204, 242) 0%,
+      rgb(47, 128, 237) 100%
+    );
+    padding: 8px;
+    text-align: center;
+  }
+  .control-show-list {
+    background: rgba(14, 52, 98, 0.8);
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    font-size: 12px;
+    gap: 6px;
+  }
+  :deep(.el-checkbox) {
+    height: auto;
+    color: #fff;
+  }
+</style>

src/component/rain-earthquake/DisasterChainPointComponent.vue

@@ -6,13 +6,15 @@
       type="primary"
       @click="changeStatus"
       circle
-      :title="`${useStatusStore().getDisasterChainPointShow() ? '关闭' : '打开'}灾害链影响点列表`"
-      >{{ useStatusStore().getDisasterChainPointShow() ? '-' : '+' }}</el-button
+      :title="`${useStatusStore().uiComponents.disasterChainPointShow ? '关闭' : '打开'}灾害链影响点列表`"
+      >{{
+        useStatusStore().uiComponents.disasterChainPointShow ? '-' : '+'
+      }}</el-button
     >
   </div>
   <div
     class="disaster-list-box"
-    v-show="useStatusStore().getDisasterChainPointShow()"
+    v-show="useStatusStore().uiComponents.disasterChainPointShow"
   >
     <header class="table-title">
       <span>灾害链影响点列表</span>
@@ -122,9 +124,8 @@
 
   // 切换面板显示状态
   const changeStatus = () => {
-    useStatusStore().setDisasterChainPointShow(
-      !useStatusStore().getDisasterChainPointShow()
-    );
+    useStatusStore().uiComponents.disasterChainPointShow =
+      !useStatusStore().uiComponents.disasterChainPointShow;
   };
 
   // 上一页

src/component/rain-earthquake/HiddenPointComponent.vue

@@ -3,14 +3,12 @@
   <div>
     <!-- 加载基础隐患点 -->
     <LoadingPoints
-      v-if="
-        useStatusStore().getAppLoadingCompleted() && baseHiddenPoints.length > 0
-      "
+      v-if="useStatusStore().appLoadingCompleted && baseHiddenPoints.length > 0"
       :base-points="baseHiddenPoints"
       :get-disaster-icon="getDisasterIcon"
       :prefix="config.prefix.hiddenDangerPointId"
-      :show-points="useStatusStore().getHiddenDangerPointShow()"
       :is-default="true"
+      :loading-resource-field="LoadingResource.HIDDEN_DANGER_POINT"
     />
 
     <!-- 显示信息框 -->
@@ -36,10 +34,11 @@
   import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
   import config from '@/config/config.json';
   import InformationBox from '@/component/common/InformationBox.vue';
-  import { useStatusStore } from '@/stores/useStatusStore';
   import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
   import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
   import { useHiddenPoint } from '@/hooks/rain-earthquake/useHiddenPoint';
+  import { useStatusStore } from '@/stores/useStatusStore';
+  import { LoadingResource } from '@/types/common/LoadingResourceType';
 
   // 接收父组件传递的参数
   const props = defineProps<{

src/component/rain-earthquake/LeftButtonComponent.vue

@@ -2,7 +2,7 @@
   <div
     class="left-button-box"
     :style="{
-      left: `${useStatusStore().getDisasterChainPointShow() ? 575 : 100}px`,
+      left: `${useStatusStore().uiComponents.disasterChainPointShow ? 575 : 100}px`,
     }"
   >
     <ul class="left-button-ul">

src/component/rain-earthquake/LegendComponent.vue

@@ -4,17 +4,17 @@
   <div
     class="control-box"
     :style="{
-      bottom: `${useStatusStore().getLegendShow() ? 248 : 25}px`,
+      bottom: `${useStatusStore().uiComponents.legendShow ? 248 : 25}px`,
     }"
   >
     <el-button
       @click="changeStatus"
       circle
-      :title="`${useStatusStore().getLegendShow() ? '关闭' : '打开'}图例`"
-      >{{ useStatusStore().getLegendShow() ? '-' : '+' }}</el-button
+      :title="`${useStatusStore().uiComponents.legendShow ? '关闭' : '打开'}图例`"
+      >{{ useStatusStore().uiComponents.legendShow ? '-' : '+' }}</el-button
     >
   </div>
-  <div class="legend-box" v-show="useStatusStore().getLegendShow()">
+  <div class="legend-box" v-show="useStatusStore().uiComponents.legendShow">
     <div class="title-box">
       <header>图例</header>
     </div>
@@ -55,7 +55,8 @@
 
   // 切换图例显示状态
   const changeStatus = () => {
-    useStatusStore().setLegendShow(!useStatusStore().getLegendShow());
+    useStatusStore().uiComponents.legendShow =
+      !useStatusStore().uiComponents.legendShow;
   };
 
   onMounted(() => {

src/component/rain-earthquake/LoadingPoints.vue

@@ -7,15 +7,16 @@
   import { onMounted } from 'vue';
   import { usePointsHandle } from '@/hooks/usePointsHandle';
   import type { Point } from '@/types/base/Point';
-  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+  import type { LoadingResource } from '@/types/common/LoadingResourceType';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
 
   // 属性
   const props = defineProps<{
     basePoints: Point[];
     getDisasterIcon: (disasterType?: string) => string;
     prefix: string;
-    showPoints: boolean;
     isDefault?: boolean;
+    loadingResourceField?: LoadingResource;
   }>();
 
   // 点处理钩子
@@ -30,10 +31,11 @@
       props.isDefault
     );
 
-    // 显示隐藏点
-    if (!props.showPoints) {
-      CesiumUtilsSingleton.batchTogglePrimitives(ids, props.showPoints);
-    }
+    // 记录id
+    useLoadingResourceStore().addLoadingResource(
+      props.loadingResourceField!,
+      ids
+    );
   });
 </script>
 

src/component/rain-earthquake/RiskPointComponent.vue

@@ -3,12 +3,12 @@
   <div>
     <!-- 加载风险点 -->
     <LoadingPoints
-      v-if="useStatusStore().getAppLoadingCompleted() && riskPoints.length > 0"
+      v-if="useStatusStore().appLoadingCompleted && riskPoints.length > 0"
       :base-points="riskPoints"
       :get-disaster-icon="getDisasterIcon"
       :prefix="config.prefix.riskPointId"
-      :show-points="useStatusStore().getRiskPointShow()"
       :is-default="true"
+      :loading-resource-field="LoadingResource.RISK_POINT"
     />
 
     <!-- 显示信息框 -->
@@ -35,6 +35,7 @@
   import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
   import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
   import { useRiskPoint } from '@/hooks/rain-earthquake/useRiskPoint';
+  import { LoadingResource } from '@/types/common/LoadingResourceType';
 
   const riskPoints = ref<Point[]>([]);