更改 valvesLayer 显示范围；新增持久化地图显示范围

src/app/OlMap/MapComponent.tsx

@@ -84,7 +84,7 @@ const DataContext = createContext<DataContextType | undefined>(undefined);
 const MAP_EXTENT = config.MAP_EXTENT;
 const MAP_URL = config.MAP_URL;
 const MAP_WORKSPACE = config.MAP_WORKSPACE;
-
+const MAP_VIEW_STORAGE_KEY = `${MAP_WORKSPACE}_map_view`; // 持久化 key
 // 添加防抖函数
 function debounce<F extends (...args: any[]) => any>(func: F, waitFor: number) {
   let timeout: ReturnType<typeof setTimeout> | null = null;
@@ -134,7 +134,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
   const [junctionText, setJunctionText] = useState("pressure");
   const [pipeText, setPipeText] = useState("flow");
   const flowAnimation = useRef(false); // 添加动画控制标志
-  const [currentZoom, setCurrentZoom] = useState(12); // 当前缩放级别
+  const [currentZoom, setCurrentZoom] = useState(11); // 当前缩放级别
 
   // 防抖更新函数
   const debouncedUpdateData = useRef(
@@ -292,7 +292,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
     style: defaultFlatStyle,
     extent: MAP_EXTENT, // 设置图层范围
     maxZoom: 24,
-    minZoom: 12,
+    minZoom: 11,
     properties: {
       name: "节点", // 设置图层名称
       value: "junctions",
@@ -312,7 +312,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
     style: defaultFlatStyle,
     extent: MAP_EXTENT, // 设置图层范围
     maxZoom: 24,
-    minZoom: 12,
+    minZoom: 11,
     properties: {
       name: "管道", // 设置图层名称
       value: "pipes",
@@ -337,7 +337,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
     style: valveStyle,
     extent: MAP_EXTENT, // 设置图层范围
     maxZoom: 24,
-    minZoom: 12,
+    minZoom: 16,
     properties: {
       name: "阀门", // 设置图层名称
       value: "valves",
@@ -350,7 +350,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
     style: reservoirStyle,
     extent: MAP_EXTENT, // 设置图层范围
     maxZoom: 24,
-    minZoom: 12,
+    minZoom: 11,
     properties: {
       name: "水库", // 设置图层名称
       value: "reservoirs",
@@ -363,7 +363,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
     style: pumpStyle,
     extent: MAP_EXTENT, // 设置图层范围
     maxZoom: 24,
-    minZoom: 12,
+    minZoom: 11,
     properties: {
       name: "水泵", // 设置图层名称
       value: "pumps",
@@ -376,7 +376,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
     style: tankStyle,
     extent: MAP_EXTENT, // 设置图层范围
     maxZoom: 24,
-    minZoom: 12,
+    minZoom: 11,
     properties: {
       name: "水箱", // 设置图层名称
       value: "tanks",
@@ -389,7 +389,7 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
     style: scadaStyle,
     // extent: extent, // 设置图层范围
     maxZoom: 24,
-    minZoom: 12,
+    minZoom: 11,
     properties: {
       name: "SCADA", // 设置图层名称
       value: "scada",
@@ -590,17 +590,64 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       controls: [],
     });
     setMap(map);
-    map.getView().fit(MAP_EXTENT, {
-      padding: [50, 50, 50, 50], // 添加一些内边距
-      duration: 1000, // 动画持续时间
-    });
-    // 监听缩放变化
-    map.getView().on("change", () => {
+    // 恢复上次视图；如果没有则适配 MAP_EXTENT
+    try {
+      const stored = localStorage.getItem(MAP_VIEW_STORAGE_KEY);
+      if (stored) {
+        const viewState = JSON.parse(stored);
+        if (
+          viewState &&
+          Array.isArray(viewState.center) &&
+          viewState.center.length === 2 &&
+          typeof viewState.zoom === "number"
+        ) {
+          map.getView().setCenter(viewState.center);
+          map.getView().setZoom(viewState.zoom);
+        } else {
+          map.getView().fit(MAP_EXTENT, {
+            padding: [50, 50, 50, 50],
+            duration: 1000,
+          });
+        }
+      } else {
+        map.getView().fit(MAP_EXTENT, {
+          padding: [50, 50, 50, 50],
+          duration: 1000,
+        });
+      }
+    } catch (err) {
+      console.warn("Restore map view failed", err);
+      map.getView().fit(MAP_EXTENT, {
+        padding: [50, 50, 50, 50],
+        duration: 1000,
+      });
+    }
+    // 持久化视图（中心点 + 缩放），防抖写入 localStorage
+    const persistView = debounce(() => {
+      try {
+        const view = map.getView();
+        const center = view.getCenter();
+        const zoom = view.getZoom();
+        if (center && typeof zoom === "number") {
+          localStorage.setItem(
+            MAP_VIEW_STORAGE_KEY,
+            JSON.stringify({ center, zoom })
+          );
+        }
+      } catch (err) {
+        console.warn("Save map view failed", err);
+      }
+    }, 250);
+
+    // 监听缩放变化并持久化，同时更新 currentZoom
+    const handleViewChange = () => {
       setTimeout(() => {
         const zoom = map.getView().getZoom() || 0;
         setCurrentZoom(zoom);
+        persistView();
       }, 0);
-    });
+    };
+    map.getView().on("change", handleViewChange);
     // 初始化 deck.gl
     const deck = new Deck({
       initialViewState: {