为时间轴新增 draggable 特性

package-lock.json

@@ -38,6 +38,7 @@
         "postcss": "^8.5.6",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-draggable": "^4.5.0",
         "react-icons": "^5.5.0",
         "react-window": "^1.8.10",
         "tailwindcss": "^4.1.13"
@@ -3752,20 +3753,6 @@
         }
       }
     },
-    "node_modules/@mui/base/node_modules/@mui/types": {
-      "version": "7.2.24",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.24.tgz",
-      "integrity": "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/core-downloads-tracker": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.5.0.tgz",
@@ -16388,6 +16375,20 @@
         "react": "^19.1.1"
       }
     },
+    "node_modules/react-draggable": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.5.0.tgz",
+      "integrity": "sha512-VC+HBLEZ0XJxnOxVAZsdRi8rD04Iz3SiiKOoYzamjylUcju/hP9np/aZdLHf/7WOD268WMoNJMvYfB5yAK45cw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.63.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.63.0.tgz",

package.json

@@ -43,6 +43,7 @@
     "postcss": "^8.5.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-draggable": "^4.5.0",
     "react-icons": "^5.5.0",
     "react-window": "^1.8.10",
     "tailwindcss": "^4.1.13"

src/app/OlMap/Controls/Timeline.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { useNotification } from "@refinedev/core";
+import Draggable from "react-draggable";
 
 import {
   Box,
@@ -84,6 +85,9 @@ const Timeline: React.FC<TimelineProps> = ({
       setSelectedDate(schemeDate);
     }
   }, [schemeDate]);
+  // 新增：用于 Draggable 的 nodeRef
+  const draggableRef = useRef<HTMLDivElement>(null);
+
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
   const timelineRef = useRef<HTMLDivElement>(null);
   // 添加缓存引用
@@ -527,7 +531,11 @@ const Timeline: React.FC<TimelineProps> = ({
   };
 
   return (
-    <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 w-[920px] opacity-90 hover:opacity-100 transition-opacity duration-300">
+    <Draggable nodeRef={draggableRef}>
+      <div
+        ref={draggableRef}
+        className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 w-[920px] opacity-90 hover:opacity-100 transition-opacity duration-300"
+      >
         <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-cn">
           <Paper
             elevation={3}
@@ -564,7 +572,9 @@ const Timeline: React.FC<TimelineProps> = ({
                 <DatePicker
                   label="模拟数据日期选择"
                   value={dayjs(selectedDate)}
-                onChange={(value) => value && handleDateChange(value.toDate())}
+                  onChange={(value) =>
+                    value && handleDateChange(value.toDate())
+                  }
                   enableAccessibleFieldDOMStructure={false}
                   format="YYYY-MM-DD"
                   sx={{ width: 180, "& .MuiInputBase-root": { height: 40 } }}
@@ -777,6 +787,7 @@ const Timeline: React.FC<TimelineProps> = ({
           </Paper>
         </LocalizationProvider>
       </div>
+    </Draggable>
   );
 };
 

src/app/OlMap/MapComponent.tsx

@@ -748,13 +748,14 @@ const MapComponent: React.FC<MapComponentProps> = ({ children }) => {
       id: "junctionContourLayer",
       name: "等值线",
       data: junctionData,
-      cellSize: 400,
+      aggregation: "MEAN",
+      cellSize: 200,
       contours: [
-        { threshold: [0, 10], color: [255, 0, 0] },
-        { threshold: [10, 20], color: [255, 127, 0] },
-        { threshold: [20, 30], color: [255, 215, 0] },
-        { threshold: [30, 40], color: [199, 224, 0] },
-        { threshold: [40, 9999], color: [142, 68, 173] },
+        { threshold: [0, 16], color: [255, 0, 0] },
+        { threshold: [16, 20], color: [255, 127, 0] },
+        { threshold: [20, 22], color: [255, 215, 0] },
+        { threshold: [22, 24], color: [199, 224, 0] },
+        { threshold: [24, 26], color: [76, 175, 80] },
       ],
       getPosition: (d) => d.position,
       getWeight: (d: any) =>