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

src/hooks/earthquake/useEarthquakeDisasterChain.ts

@@ -2,6 +2,11 @@ import { ref } from 'vue';
 import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
 import type { PaginationType } from '@/types/common/PaginationType';
 import { PointType } from '@/types/common/DisasterType';
+import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+import config from '@/config/config.json';
+import { useStatusStore } from '@/stores/useStatusStore';
+import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+import { LoadingResource } from '@/types/common/LoadingResourceType';
 
 /**
  * 暴雨灾害链影响点列表钩子函数
@@ -123,6 +128,176 @@ export const useEarthquakeDisasterChain = () => {
     },
   ];
 
+  /**
+   * 右侧按钮信息
+   */
+  const rightButtonInfo = [
+    {
+      name: '地震模拟',
+      callback: () => {
+        console.log('地震模拟');
+      },
+    },
+    {
+      name: '图件下载',
+      callback: () => {
+        console.log('图件下载');
+      },
+    },
+    {
+      name: '清除模拟',
+      callback: () => {
+        CesiumUtilsSingleton.clearAllResources('custom');
+      },
+      executeOnce: true,
+    },
+    {
+      name: '视角重置',
+      callback: () => {
+        CesiumUtilsSingleton.flyToTarget(
+          config.defaultPosition as [number, number, number]
+        );
+      },
+      executeOnce: true,
+    },
+  ];
+
+  const controlPanel = ref([
+    {
+      name: '显示隐患点',
+      selected: useStatusStore().mapLayers.hiddenDangerPointShow,
+      callback: (status: unknown) => {
+        if (status as boolean) {
+          // 显示隐患点
+          CesiumUtilsSingleton.batchShowPrimitives(
+            useLoadingResourceStore().getLoadingResource(
+              LoadingResource.HIDDEN_DANGER_POINT
+            )
+          );
+
+          // 显示风险点
+          CesiumUtilsSingleton.batchShowPrimitives(
+            useLoadingResourceStore().getLoadingResource(
+              LoadingResource.RISK_POINT
+            )
+          );
+        } else {
+          // 隐藏隐患点
+          CesiumUtilsSingleton.batchHidePrimitives(
+            useLoadingResourceStore().getLoadingResource(
+              LoadingResource.HIDDEN_DANGER_POINT
+            )
+          );
+
+          // 隐藏风险点
+          CesiumUtilsSingleton.batchHidePrimitives(
+            useLoadingResourceStore().getLoadingResource(
+              LoadingResource.RISK_POINT
+            )
+          );
+        }
+      },
+    },
+    {
+      name: '显示医院',
+      selected: useStatusStore().poiLayers.showHospital,
+      callback: () => {
+        console.log('显示医院');
+      },
+    },
+    {
+      name: '显示危险源',
+      selected: useStatusStore().poiLayers.showDangerSource,
+      callback: () => {
+        console.log('显示危险源');
+      },
+    },
+    {
+      name: '显示避难所',
+      selected: useStatusStore().poiLayers.showRefugeeShelter,
+      callback: () => {
+        console.log('显示避难所');
+      },
+    },
+    {
+      name: '显示消防站',
+      selected: useStatusStore().poiLayers.showFireStation,
+      callback: () => {
+        console.log('显示消防站');
+      },
+    },
+    {
+      name: '显示储备点',
+      selected: useStatusStore().poiLayers.showReservePoint,
+      callback: () => {
+        console.log('显示储备点');
+      },
+    },
+    {
+      name: '显示学校',
+      selected: useStatusStore().poiLayers.showSchool,
+      callback: () => {
+        console.log('显示学校');
+      },
+    },
+    {
+      name: '显示人口网格',
+      selected: useStatusStore().poiLayers.showPopulationGrid,
+      callback: () => {
+        console.log('显示人口网格');
+      },
+    },
+    {
+      name: '显示管网系统',
+      selected: useStatusStore().infrastructureLayers.showNetworkSystem,
+      callback: () => {
+        console.log('显示管网系统');
+      },
+    },
+    {
+      name: '显示交通道路',
+      selected: useStatusStore().infrastructureLayers.showTrafficRoad,
+      callback: () => {
+        console.log('显示交通道路');
+      },
+    },
+    {
+      name: '显示桥梁',
+      selected: useStatusStore().infrastructureLayers.showBridge,
+      callback: () => {
+        console.log('显示桥梁');
+      },
+    },
+    {
+      name: '显示高速',
+      selected: useStatusStore().infrastructureLayers.showHighway,
+      callback: () => {
+        console.log('显示高速');
+      },
+    },
+    {
+      name: '显示国道',
+      selected: useStatusStore().infrastructureLayers.showMainRoad,
+      callback: () => {
+        console.log('显示国道');
+      },
+    },
+    {
+      name: '显示水库',
+      selected: useStatusStore().infrastructureLayers.showReservoir,
+      callback: () => {
+        console.log('显示水库');
+      },
+    },
+    {
+      name: '显示地铁站',
+      selected: useStatusStore().infrastructureLayers.showReservoir,
+      callback: () => {
+        console.log('显示地铁站');
+      },
+    },
+  ]);
+
   // 把所有需要用到的数据/方法 return 出去
   return {
     conditions,
@@ -131,6 +306,8 @@ export const useEarthquakeDisasterChain = () => {
     tableColumns,
     paginationConfig,
     leftButtonInfo,
+    rightButtonInfo,
+    controlPanel,
     changeConditions,
     changeCurrentPage,
   };