完成页面的基础配置

src/app/OlMap/Controls/ScaleLine.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from "react";
+import { useMap } from "../MapComponent";
+
+const Scale: React.FC = () => {
+  const map = useMap();
+  const [zoomLevel, setZoomLevel] = useState(0);
+  const [coordinates, setCoordinates] = useState<[number, number]>([0, 0]);
+
+  useEffect(() => {
+    if (!map) return;
+
+    const updateZoomLevel = () => {
+      const zoom = map.getView().getZoom();
+      setZoomLevel(zoom ?? 0); // 如果 zoom 是 undefined，则使用默认值 0
+    };
+
+    const updateCoordinates = (event: any) => {
+      const coords = event.coordinate;
+      const transformedCoords = coords.map((c: number) =>
+        parseFloat(c.toFixed(4))
+      );
+      setCoordinates(transformedCoords);
+    };
+
+    map.on("moveend", updateZoomLevel);
+    map.on("pointermove", updateCoordinates);
+
+    // Initialize values
+    updateZoomLevel();
+
+    return () => {
+      map.un("moveend", updateZoomLevel);
+      map.un("pointermove", updateCoordinates);
+    };
+  }, [map]);
+
+  return (
+    <div className="absolute bottom-0 right-0 flex col-auto px-2 bg-white bg-opacity-70 text-black rounded-tl shadow-md text-sm">
+      <div className="px-1">Zoom Level: {zoomLevel.toFixed(1)}</div>
+      <div className="px-1">
+        Coordinates: {coordinates[0]}, {coordinates[1]}
+      </div>
+    </div>
+  );
+};
+
+export default Scale;