完成管网在线模拟页面组件基本样式和布局

src/app/OlMap/Controls/Zoom.tsx

@@ -1,16 +1,12 @@
-import React, { useState } from "react";
+import React from "react";
 import { useMap } from "../MapComponent";
-import Geolocation from "ol/Geolocation";
 import AddRoundedIcon from "@mui/icons-material/AddRounded";
 import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded";
-import GpsFixedRoundedIcon from "@mui/icons-material/GpsFixedRounded";
-import clsx from "clsx";
-
-const INITIAL_ZOOM = 14; // 默认缩放级别
+import FitScreenIcon from "@mui/icons-material/FitScreen";
+import { config } from "@config/config";
 
 const Zoom: React.FC = () => {
   const map = useMap();
-  const [locateDisabled, setLocateDisabled] = useState(false);
 
   // 放大函数
   const handleZoomIn = () => {
@@ -26,57 +22,22 @@ const Zoom: React.FC = () => {
     view.animate({ zoom: (view.getZoom() ?? 0) - 1, duration: 200 });
   };
 
-  // 定位功能
-  const handleLocate = () => {
+  // 缩放到全局 Extent
+  const handleFitScreen = () => {
     if (!map) return;
-    
-    const geolocation = new Geolocation({
-      trackingOptions: { enableHighAccuracy: true },
-      projection: map.getView().getProjection(),
-    });
-
-    geolocation.once("change:position", () => {
-      const coords = geolocation.getPosition();
-      if (coords) {
-        map
-          .getView()
-          .animate({ center: coords, zoom: INITIAL_ZOOM, duration: 500 });
-      }
-      geolocation.setTracking(false);
-    });
-    
-    geolocation.setTracking(true);
-  };
-
-  // 包装 handleLocate，点击后禁用按钮一段时间
-  const onLocateClick = () => {
-    navigator.geolocation.getCurrentPosition(
-      () => {
-        handleLocate();
-      },
-      (error) => {
-        console.log(error.message);
-        setLocateDisabled(true); // 定位失败后禁用按钮
-        // alert("定位失败，将使用默认位置。");
-      }
-    );
+    const view = map.getView();
+    view.fit(config.mapExtent, { duration: 500 });
   };
 
   return (
     <div className="absolute right-4 bottom-8">
       <div className="w-8 h-26 flex flex-col gap-2 items-center">
-        <div
-          className={clsx(
-            "w-8 h-8 bg-gray-50 flex items-center justify-center rounded-xl drop-shadow-xl shadow-black",
-            locateDisabled && "text-gray-300"
-          )}
-        >
+        <div className="w-8 h-8 bg-gray-50 flex items-center justify-center rounded-xl drop-shadow-xl shadow-black">
           <button
-            className="w-6 h-6 flex items-center justify-center rounded-xl  hover:bg-white transition-all duration-100"
-            onClick={onLocateClick}
-            disabled={locateDisabled}
+            className="w-6 h-6 flex items-center justify-center rounded-xl hover:bg-white transition-all duration-100"
+            onClick={handleFitScreen}
           >
-            <GpsFixedRoundedIcon fontSize="small" />
+            <FitScreenIcon fontSize="small" />
           </button>
         </div>
         <div className="w-8 h-16 flex flex-col items-center justify-center bg-gray-50 rounded-xl drop-shadow-xl shadow-black">