添加显示隐藏状态控制

src/App.vue

@@ -6,7 +6,7 @@
   import { RouterView } from 'vue-router';
   import { ElLoading } from 'element-plus';
   import { watch } from 'vue';
-  import { useViewerStore } from './stores/useViewerStore';
+  import { useStatusStore } from './stores/useStatusStore';
 
   const loadingOption = {
     fullscreen: true,
@@ -16,7 +16,7 @@
   let loadingInstanve = ElLoading.service(loadingOption);
 
   watch(
-    () => useViewerStore().getViewerLoadingCompleted(),
+    () => useStatusStore().getAppLoadingCompleted(),
     (val) => {
       if (val) {
         loadingInstanve.close();

src/component/map/AdministrativeDivision.vue

@@ -5,6 +5,7 @@
 
 <script lang="ts" setup>
   import { useAdministrativeDivision } from '@/hooks/map/useAdministrativeDivision';
+  import { useStatusStore } from '@/stores/useStatusStore';
   import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
   import { Color } from 'cesium';
   import { onMounted } from 'vue';
@@ -13,7 +14,7 @@
   const { areas, areasId, areasColor, areaTransparency, labelTransparency } =
     useAdministrativeDivision();
 
-  onMounted(() => {
+  onMounted(async () => {
     // 构建批量添加配置数组
     const layerConfigs = areasId.map((id, index) => ({
       layerId: id,
@@ -39,7 +40,12 @@
       },
     }));
 
-    CesiumUtilsSingleton.batchAddGeoJsonLayers(layerConfigs);
+    await CesiumUtilsSingleton.batchAddGeoJsonLayers(layerConfigs);
+
+    // 根据状态显示隐藏行政区划
+    if (!useStatusStore().getShowAdministrativeDivision()) {
+      CesiumUtilsSingleton.batchHideGeoJsonLayers(areasId);
+    }
   });
 </script>
 

src/component/map/MapComponent.vue

@@ -2,14 +2,14 @@
   <div class="map_container" id="map-container"></div>
 
   <!-- 行政区划 -->
-  <AdministrativeDivision v-if="useViewerStore().getViewerLoadingCompleted()" />
+  <AdministrativeDivision v-if="useStatusStore().getAppLoadingCompleted()" />
 </template>
 
 <script lang="ts" setup>
   import { onBeforeMount, onMounted } from 'vue';
 
   import AdministrativeDivision from './AdministrativeDivision.vue';
-  import { useViewerStore } from '@/stores/useViewerStore';
+  import { useStatusStore } from '@/stores/useStatusStore';
   import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
 
   import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
@@ -21,7 +21,7 @@
 
   onBeforeMount(() => {
     // 初始化为false
-    useViewerStore().setViewerLoadingCompleted(false);
+    useStatusStore().setAppLoadingCompleted(false);
 
     // 重置状态
     useLoadingInformationStore().resetStatue();
@@ -42,7 +42,7 @@
     });
 
     // 设置状态
-    useViewerStore().setViewerLoadingCompleted(true);
+    useStatusStore().setAppLoadingCompleted(true);
 
     // 注册全局点击监听器
     useMap().registerAndClickOnTheListener();

src/component/rain-earthquake/BasicComponent.vue

@@ -7,11 +7,11 @@
     <!-- 隐患点组件 -->
     <HiddenPointComponent
       :disaster-type="props.disasterType"
-      v-if="useViewerStore().getViewerLoadingCompleted()"
+      v-if="useStatusStore().getAppLoadingCompleted()"
     />
 
     <!-- 风险点组件 -->
-    <RiskPointComponent v-if="useViewerStore().getViewerLoadingCompleted()" />
+    <RiskPointComponent v-if="useStatusStore().getAppLoadingCompleted()" />
   </div>
 </template>
 
@@ -20,7 +20,7 @@
   import type { DisasterType } from '@/types/common/DisasterType.ts';
   import HiddenPointComponent from './HiddenPointComponent.vue';
   import RiskPointComponent from './RiskPointComponent.vue';
-  import { useViewerStore } from '@/stores/useViewerStore';
+  import { useStatusStore } from '@/stores/useStatusStore';
 
   // 获取父组件传递德数据
   const props = defineProps<{

src/component/rain-earthquake/DisasterChainPointComponent.vue

@@ -6,11 +6,14 @@
       type="primary"
       @click="changeStatus"
       circle
-      :title="`${btnStatus ? '关闭' : '打开'}灾害链影响点列表`"
+      :title="`${useStatusStore().getDisasterChainPointShow() ? '关闭' : '打开'}灾害链影响点列表`"
-      >{{ btnStatus ? '-' : '+' }}</el-button
+      >{{ useStatusStore().getDisasterChainPointShow() ? '-' : '+' }}</el-button
     >
   </div>
-  <div class="disaster-list-box" v-show="btnStatus">
+  <div
+    class="disaster-list-box"
+    v-show="useStatusStore().getDisasterChainPointShow()"
+  >
     <header class="table-title">
       <span>灾害链影响点列表</span>
     </header>
@@ -73,6 +76,7 @@
 </template>
 
 <script lang="ts" setup>
+  import { useStatusStore } from '@/stores/useStatusStore';
   import type { Point } from '@/types/base/Point';
   import { PointType } from '@/types/common/DisasterType';
   import type { PaginationType } from '@/types/common/PaginationType';
@@ -95,11 +99,6 @@
     (e: 'changeCurrentPage', value: number): void;
   }>();
 
-  // ==================== 状态管理 ====================
-
-  // 按钮状态
-  const btnStatus: Ref<boolean> = ref(false);
-
   // 搜索条件
   const conditions: Ref<{ tableData: string; hiddenPoint: PointType }> = ref({
     tableData: '',
@@ -123,7 +122,9 @@
 
   // 切换面板显示状态
   const changeStatus = () => {
-    btnStatus.value = !btnStatus.value;
+    useStatusStore().setDisasterChainPointShow(
+      !useStatusStore().getDisasterChainPointShow()
+    );
   };
 
   // 上一页

src/component/rain-earthquake/HiddenPointComponent.vue

@@ -4,12 +4,12 @@
     <!-- 加载基础隐患点 -->
     <LoadingPoints
       v-if="
-        useViewerStore().getViewerLoadingCompleted() &&
+        useStatusStore().getAppLoadingCompleted() && baseHiddenPoints.length > 0
-        baseHiddenPoints.length > 0
       "
       :base-points="baseHiddenPoints"
       :get-disaster-icon="getDisasterIcon"
       :prefix="config.prefix.hiddenDangerPointId"
+      :show-points="useStatusStore().getHiddenDangerPointShow()"
     />
 
     <!-- 显示信息框 -->
@@ -35,7 +35,7 @@
   import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
   import config from '@/config/config.json';
   import InformationBox from '@/component/common/InformationBox.vue';
-  import { useViewerStore } from '@/stores/useViewerStore';
+  import { useStatusStore } from '@/stores/useStatusStore';
   import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
   import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
   import { useHiddenPoint } from '@/hooks/rain-earthquake/useHiddenPoint';

src/component/rain-earthquake/LegendComponent.vue

@@ -1,6 +1,20 @@
 <!-- 图例组件 -->
 <template>
-  <div class="legend-box">
+  <!-- 控制按钮 -->
+  <div
+    class="control-box"
+    :style="{
+      bottom: `${useStatusStore().getLegendShow() ? 248 : 25}px`,
+    }"
+  >
+    <el-button
+      @click="changeStatus"
+      circle
+      :title="`${useStatusStore().getLegendShow() ? '关闭' : '打开'}图例`"
+      >{{ useStatusStore().getLegendShow() ? '-' : '+' }}</el-button
+    >
+  </div>
+  <div class="legend-box" v-show="useStatusStore().getLegendShow()">
     <div class="title-box">
       <header>图例</header>
     </div>
@@ -26,6 +40,7 @@
 </template>
 
 <script setup lang="ts">
+  import { useStatusStore } from '@/stores/useStatusStore';
   import { Utils } from '@/utils/utils';
   import { onMounted, ref, type Ref } from 'vue';
 
@@ -38,6 +53,11 @@
   // 处理后图例列表
   const finalLegendList: Ref<{ name: string; link: string }[][]> = ref([]);
 
+  // 切换图例显示状态
+  const changeStatus = () => {
+    useStatusStore().setLegendShow(!useStatusStore().getLegendShow());
+  };
+
   onMounted(() => {
     finalLegendList.value = Utils.chunkArray(props.legendList, props.colsNum);
   });
@@ -58,6 +78,12 @@
     border: 1px solid rgba(0, 225, 255, 1);
   }
 
+  .control-box {
+    position: absolute;
+    right: 30px;
+    z-index: 1001;
+  }
+
   .title-box {
     background: linear-gradient(
       180deg,

src/component/rain-earthquake/LoadingPoints.vue

@@ -7,12 +7,14 @@
   import { onMounted } from 'vue';
   import { usePointsHandle } from '@/hooks/usePointsHandle';
   import type { Point } from '@/types/base/Point';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
 
   // 属性
   const props = defineProps<{
     basePoints: Point[];
     getDisasterIcon: (disasterType?: string) => string;
     prefix: string;
+    showPoints: boolean;
   }>();
 
   // 点处理钩子
@@ -20,11 +22,16 @@
 
   onMounted(() => {
     // 加载点
-    pointsHandle.addPoints(
+    const ids: string[] = pointsHandle.addPoints(
       props.basePoints,
       props.getDisasterIcon,
       props.prefix
     );
+
+    // 显示隐藏点
+    if (!props.showPoints) {
+      CesiumUtilsSingleton.batchTogglePrimitives(ids, props.showPoints);
+    }
   });
 </script>
 

src/component/rain-earthquake/RiskPointComponent.vue

@@ -3,12 +3,11 @@
   <div>
     <!-- 加载风险点 -->
     <LoadingPoints
-      v-if="
+      v-if="useStatusStore().getAppLoadingCompleted() && riskPoints.length > 0"
-        useViewerStore().getViewerLoadingCompleted() && riskPoints.length > 0
-      "
       :base-points="riskPoints"
       :get-disaster-icon="getDisasterIcon"
       :prefix="config.prefix.riskPointId"
+      :show-points="useStatusStore().getRiskPointShow()"
     />
 
     <!-- 显示信息框 -->
@@ -31,7 +30,7 @@
   import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
   import config from '@/config/config.json';
   import InformationBox from '@/component/common/InformationBox.vue';
-  import { useViewerStore } from '@/stores/useViewerStore';
+  import { useStatusStore } from '@/stores/useStatusStore';
   import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
   import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
   import { useRiskPoint } from '@/hooks/rain-earthquake/useRiskPoint';

src/stores/useStatusStore.ts

@@ -0,0 +1,131 @@
+import { defineStore } from 'pinia';
+import { type Ref, ref } from 'vue';
+
+/**
+ * 全局状态管理
+ * @returns 应用状态及相关方法
+ */
+export const useStatusStore = defineStore('status', () => {
+  /**
+   * 应用加载完成状态
+   */
+  const appLoadingCompleted: Ref<boolean> = ref(false);
+
+  /**
+   * 显示行政区划
+   */
+  const showAdministrativeDivision = ref(true);
+
+  /**
+   * 灾情链影响点表格显示状态
+   */
+  const disasterChainPointShow = ref(false);
+
+  /**
+   * 图例显示状态
+   */
+  const legendShow = ref(true);
+
+  /**
+   * 隐患点显示状态
+   */
+  const hiddenDangerPointShow = ref(true);
+
+  /**
+   * 风险点显示状态
+   */
+  const riskPointShow = ref(true);
+
+  /**
+   * 获取应用加载完成状态
+   * @returns 加载完成状态
+   */
+  const getAppLoadingCompleted = () => appLoadingCompleted.value;
+  /**
+   * 设置应用加载完成状态
+   * @param value - 加载完成状态
+   */
+  const setAppLoadingCompleted = (value: boolean) => {
+    appLoadingCompleted.value = value;
+  };
+
+  /**
+   * 获取显示行政区划
+   * @returns 显示行政区划
+   */
+  const getShowAdministrativeDivision = () => showAdministrativeDivision.value;
+  /**
+   * 设置显示行政区划
+   * @param value - 显示行政区划
+   */
+  const setShowAdministrativeDivision = (value: boolean) => {
+    showAdministrativeDivision.value = value;
+  };
+
+  /**
+   * 获取灾情链影响点表格显示状态
+   * @returns 灾情链影像点表格显示状态
+   */
+  const getDisasterChainPointShow = () => disasterChainPointShow.value;
+  /**
+   * 设置灾情链影响点表格显示状态
+   * @param value - 灾情链影像点表格显示状态
+   */
+  const setDisasterChainPointShow = (value: boolean) => {
+    disasterChainPointShow.value = value;
+  };
+
+  /**
+   * 获取图例显示状态
+   * @returns 图例显示状态
+   */
+  const getLegendShow = () => legendShow.value;
+  /**
+   * 设置图例显示状态
+   * @param value - 图例显示状态
+   */
+  const setLegendShow = (value: boolean) => {
+    legendShow.value = value;
+  };
+
+  /**
+   * 获取隐患点显示状态
+   * @returns 隐患点显示状态
+   */
+  const getHiddenDangerPointShow = () => hiddenDangerPointShow.value;
+  /**
+   * 设置隐患点显示状态
+   * @param value - 隐患点显示状态
+   */
+  const setHiddenDangerPointShow = (value: boolean) => {
+    hiddenDangerPointShow.value = value;
+  };
+
+  /**
+   * 获取风险点显示状态
+   * @returns 风险点显示状态
+   */
+  const getRiskPointShow = () => riskPointShow.value;
+  /**
+   * 设置风险点显示状态
+   * @param value - 风险点显示状态
+   */
+  const setRiskPointShow = (value: boolean) => {
+    riskPointShow.value = value;
+  };
+
+  return {
+    getAppLoadingCompleted,
+    setAppLoadingCompleted,
+    getShowAdministrativeDivision,
+    setShowAdministrativeDivision,
+    getDisasterChainPointShow,
+    setDisasterChainPointShow,
+    getLegendShow,
+    setLegendShow,
+    getHiddenDangerPointShow,
+    setHiddenDangerPointShow,
+    getRiskPointShow,
+    setRiskPointShow,
+  };
+});

src/stores/useViewerStore.ts

@@ -1,28 +0,0 @@
-import { defineStore } from 'pinia';
-import { type Ref, ref } from 'vue';
-
-/**
- * Viewer加载状态管理
- * @returns Viewer加载完成状态及相关方法
- */
-export const useViewerStore = defineStore('viewer', () => {
-  /**
-   * Viewer加载完成状态
-   */
-  const viewerLoadingCompleted: Ref<boolean> = ref(false);
-
-  /**
-   * 获取Viewer加载完成状态
-   * @returns 加载完成状态
-   */
-  const getViewerLoadingCompleted = () => viewerLoadingCompleted.value;
-  /**
-   * 设置Viewer加载完成状态
-   * @param value - 加载完成状态
-   */
-  const setViewerLoadingCompleted = (value: boolean) => {
-    viewerLoadingCompleted.value = value;
-  };
-
-  return { getViewerLoadingCompleted, setViewerLoadingCompleted };
-});

src/utils/cesium/CesiumUtils.ts

@@ -246,6 +246,34 @@ export class CesiumUtils {
     return this.#primitiveManager!.getPrimitiveIds(clearType);
   }
 
+  /**
+   * 批量切换Primitives可见性
+   * @param ids - Primitive ID 数组
+   * @param visible - 是否可见
+   */
+  batchTogglePrimitives(ids: string[], visible: boolean): void {
+    this.#checkManager(this.#primitiveManager, 'PrimitiveManager');
+    this.#primitiveManager!.batchTogglePrimitives(ids, visible);
+  }
+
+  /**
+   * 批量显示Primitives
+   * @param ids - Primitive ID 数组
+   */
+  batchShowPrimitives(ids: string[]): void {
+    this.#checkManager(this.#primitiveManager, 'PrimitiveManager');
+    this.#primitiveManager!.batchShowPrimitives(ids);
+  }
+
+  /**
+   * 批量隐藏Primitives
+   * @param ids - Primitive ID 数组
+   */
+  batchHidePrimitives(ids: string[]): void {
+    this.#checkManager(this.#primitiveManager, 'PrimitiveManager');
+    this.#primitiveManager!.batchHidePrimitives(ids);
+  }
+
   // ===================== 图层管理 =====================
 
   /**

src/utils/cesium/PrimitiveManager.ts

@@ -122,6 +122,44 @@ export class PrimitiveManager {
     return this.#getTargetIdsByType(clearType);
   }
 
+  /**
+   * 批量显示或隐藏Primitive
+   * @param ids - Primitive ID 数组
+   * @param visible - 是否显示
+   */
+  batchTogglePrimitives(ids: string[], visible: boolean): void {
+    const uniquePrimitives = new Set<Primitive | BillboardCollection>();
+
+    for (const id of ids) {
+      const primitive = this.getPrimitiveById(id);
+      if (primitive) {
+        uniquePrimitives.add(primitive);
+      } else {
+        console.warn(`Primitive ID "${id}" 不存在，无法设置显示`);
+      }
+    }
+
+    for (const primitive of uniquePrimitives) {
+      primitive.show = visible;
+    }
+  }
+
+  /**
+   * 批量显示Primitive
+   * @param ids - Primitive ID 数组
+   */
+  batchShowPrimitives(ids: string[]): void {
+    this.batchTogglePrimitives(ids, true);
+  }
+
+  /**
+   * 批量隐藏Primitive
+   * @param ids - Primitive ID 数组
+   */
+  batchHidePrimitives(ids: string[]): void {
+    this.batchTogglePrimitives(ids, false);
+  }
+
   // ===================== 私有方法 =====================
 
   #groupPrimitivesByType(primitives: PrimitiveOptions[]) {

src/views/IndexView.vue

@@ -10,7 +10,7 @@
       </div>
       <div class="nav-list">
         <router-link
-          @click="useViewerStore().setViewerLoadingCompleted(false)"
+          @click="useStatusStore().setAppLoadingCompleted(false)"
           v-for="(item, index) in topNavMap"
           :key="index"
           :to="{ name: item.name, query: item.query }"
@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-  import { useViewerStore } from '@/stores/useViewerStore';
+  import { useStatusStore } from '@/stores/useStatusStore';
   import { RouterView } from 'vue-router';
   import { backgroundImage, mainLogoImage } from '@/assets';
   import { useIndex } from '@/hooks/useIndex';