From 03e5f1456cc9b5046f722d9065dff4aecffdb472 Mon Sep 17 00:00:00 2001
From: JIANG <jiang@email.com>
Date: Wed, 11 Feb 2026 11:52:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=AF=94=E4=BE=8B=E5=B0=BA?=
 =?UTF-8?q?=E6=8E=A7=E4=BB=B6=EF=BC=8C=E8=B0=83=E6=95=B4=E6=8E=A7=E4=BB=B6?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/OlMap/Controls/BaseLayers.tsx |  2 +-
 src/app/OlMap/Controls/ScaleLine.tsx  | 53 ++++++++++++++++++++++++---
 src/app/OlMap/Controls/Zoom.tsx       |  2 +-
 3 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/src/app/OlMap/Controls/BaseLayers.tsx b/src/app/OlMap/Controls/BaseLayers.tsx
index 7f17bb1..03f2a76 100644
--- a/src/app/OlMap/Controls/BaseLayers.tsx
+++ b/src/app/OlMap/Controls/BaseLayers.tsx
@@ -179,7 +179,7 @@ const BaseLayers: React.FC = () => {
   };
 
   return (
-    <div className="absolute right-17 bottom-8 z-1300">
+    <div className="absolute right-17 bottom-11 z-1300">
       <div
         className="w-20 h-20 bg-white rounded-xl drop-shadow-xl shadow-black"
         onMouseEnter={handleEnter}
diff --git a/src/app/OlMap/Controls/ScaleLine.tsx b/src/app/OlMap/Controls/ScaleLine.tsx
index 24070cd..81c41a6 100644
--- a/src/app/OlMap/Controls/ScaleLine.tsx
+++ b/src/app/OlMap/Controls/ScaleLine.tsx
@@ -1,10 +1,12 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useMap } from "../MapComponent";
+import { ScaleLine } from "ol/control";
 
 const Scale: React.FC = () => {
   const map = useMap();
   const [zoomLevel, setZoomLevel] = useState(0);
   const [coordinates, setCoordinates] = useState<[number, number]>([0, 0]);
+  const scaleLineRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!map) return;
@@ -28,19 +30,58 @@ const Scale: React.FC = () => {
     // Initialize values
     updateZoomLevel();
 
+    // ScaleLine control
+    const scaleControl = new ScaleLine({
+      target: scaleLineRef.current || undefined,
+      units: "metric",
+      bar: false,
+      steps: 4,
+      text: true,
+      minWidth: 64,
+    });
+    map.addControl(scaleControl);
+
     return () => {
       map.un("moveend", updateZoomLevel);
       map.un("pointermove", updateCoordinates);
+      map.removeControl(scaleControl);
     };
   }, [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 z-1300">
-      <div className="px-1">缩放: {zoomLevel.toFixed(1)}</div>
-      <div className="px-1">
-        坐标: {coordinates[0]}, {coordinates[1]}
+    <>
+      <style>
+        {`
+          .custom-scale-line .ol-scale-line {
+            position: static;
+            background: transparent;
+            padding: 0;
+          }
+          .custom-scale-line .ol-scale-line-inner {
+            border: 1px solid #475569;
+            border-top: none;
+            color: #334155;
+            font-size: 0.75rem;
+            font-weight: 600;
+            transition: all 0.3s;
+          }
+        `}
+      </style>
+      <div className="absolute bottom-0 right-0 flex items-center gap-2 px-3 py-1.5 bg-white/90 hover:bg-white rounded-tl-xl shadow-lg backdrop-blur-sm text-xs font-medium text-slate-700 z-1300 transition-all duration-300 pointer-events-auto">
+        <div
+          ref={scaleLineRef}
+          className="custom-scale-line flex items-center justify-center min-w-[60px]"
+        />
+        <div className="h-3 w-px bg-slate-300 mx-1" />
+        <div className="min-w-[60px] text-center">
+          缩放: {zoomLevel.toFixed(1)}
+        </div>
+        <div className="h-3 w-px bg-slate-300 mx-1" />
+        <div className="tabular-nums min-w-[140px] text-center">
+          坐标: {coordinates[0]}, {coordinates[1]}
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/src/app/OlMap/Controls/Zoom.tsx b/src/app/OlMap/Controls/Zoom.tsx
index 7059a7d..e857abb 100644
--- a/src/app/OlMap/Controls/Zoom.tsx
+++ b/src/app/OlMap/Controls/Zoom.tsx
@@ -30,7 +30,7 @@ const Zoom: React.FC = () => {
   };
 
   return (
-    <div className="absolute right-4 bottom-8 z-1300">
+    <div className="absolute right-4 bottom-11 z-1300">
       <div className="w-8 h-26 flex flex-col gap-2 items-center">
         <div className="w-8 h-8 bg-gray-50 flex items-center justify-center rounded-xl drop-shadow-xl shadow-black">
           <button