diff --git a/src/app/OlMap/MapComponent.tsx b/src/app/OlMap/MapComponent.tsx index c77e258..6804d06 100644 --- a/src/app/OlMap/MapComponent.tsx +++ b/src/app/OlMap/MapComponent.tsx @@ -84,7 +84,7 @@ const DataContext = createContext(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 any>(func: F, waitFor: number) { let timeout: ReturnType | null = null; @@ -134,7 +134,7 @@ const MapComponent: React.FC = ({ 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 = ({ children }) => { style: defaultFlatStyle, extent: MAP_EXTENT, // 设置图层范围 maxZoom: 24, - minZoom: 12, + minZoom: 11, properties: { name: "节点", // 设置图层名称 value: "junctions", @@ -312,7 +312,7 @@ const MapComponent: React.FC = ({ children }) => { style: defaultFlatStyle, extent: MAP_EXTENT, // 设置图层范围 maxZoom: 24, - minZoom: 12, + minZoom: 11, properties: { name: "管道", // 设置图层名称 value: "pipes", @@ -337,7 +337,7 @@ const MapComponent: React.FC = ({ children }) => { style: valveStyle, extent: MAP_EXTENT, // 设置图层范围 maxZoom: 24, - minZoom: 12, + minZoom: 16, properties: { name: "阀门", // 设置图层名称 value: "valves", @@ -350,7 +350,7 @@ const MapComponent: React.FC = ({ children }) => { style: reservoirStyle, extent: MAP_EXTENT, // 设置图层范围 maxZoom: 24, - minZoom: 12, + minZoom: 11, properties: { name: "水库", // 设置图层名称 value: "reservoirs", @@ -363,7 +363,7 @@ const MapComponent: React.FC = ({ children }) => { style: pumpStyle, extent: MAP_EXTENT, // 设置图层范围 maxZoom: 24, - minZoom: 12, + minZoom: 11, properties: { name: "水泵", // 设置图层名称 value: "pumps", @@ -376,7 +376,7 @@ const MapComponent: React.FC = ({ children }) => { style: tankStyle, extent: MAP_EXTENT, // 设置图层范围 maxZoom: 24, - minZoom: 12, + minZoom: 11, properties: { name: "水箱", // 设置图层名称 value: "tanks", @@ -389,7 +389,7 @@ const MapComponent: React.FC = ({ children }) => { style: scadaStyle, // extent: extent, // 设置图层范围 maxZoom: 24, - minZoom: 12, + minZoom: 11, properties: { name: "SCADA", // 设置图层名称 value: "scada", @@ -590,17 +590,64 @@ const MapComponent: React.FC = ({ 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: {