fix

src/components/HomeLayout/NavBar.jsx

@@ -2,14 +2,22 @@ import { Button } from "antd";
 import { useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import NavBarButton from "./NavBarButton";
+import { useDispatch } from "react-redux";
 
 function NavBar() {
   const navigate = useNavigate();
+  const dispatch = useDispatch();
+
   const navigateHandler = useCallback(
     (type) => {
       navigate(`/map/${type}`, { replace: true });
+      if (type !== 1 && type !== 2) {
+        dispatch.data.update({
+          toolbar: { showPanel: true },
+        });
+      }
     },
-    [navigate]
+    [navigate, dispatch]
   );
 
   return (

src/components/map/Layout/CustomToolbar.jsx

@@ -61,7 +61,8 @@ function CustomToolbar() {
 
   const navigateHandler = useCallback(() => {
     navigate("/home", { replace: true });
-  }, [navigate]);
+    dispatch.data.resetState();
+  }, [navigate, dispatch]);
 
   const showPanelHandler = useCallback(
     (value) => {

src/components/map/Layout/DynamicImageryLayer/LayerLabToQTP.jsx

@@ -18,6 +18,7 @@ function LayerLabToQTP() {
   const [index, setIndex] = useState(0);
 
   //viewer.clock?.shouldAnimate
+  console.log("viewer.clock?.shouldAnimate :>> ", viewer.clock?.shouldAnimate);
 
   useEffect(() => {
     const { labrador } = imageLayer;
@@ -52,14 +53,19 @@ function LayerLabToQTP() {
 
   useInterval(() => {
     setIndex((index) => index + 1);
-    if (!viewer.clock?.shouldAnimate) {
+
+    if (index >= nameList.length) {
+      setTimeout(() => {
+        setIndex(0);
+        setDelay(1000);
+      }, (60 - nameList.length) * 1000);
       setDelay(undefined);
     }
-    if (index >= nameList.length) setDelay(undefined);
   }, delay);
 
-  return <></>;
-  // return layers[index];
+  if (!viewer.clock?.shouldAnimate) return;
+
+  return layers[index];
 }
 
 export default LayerLabToQTP;

src/components/map/Layout/Entities/Barotorpic.jsx

@@ -22,12 +22,12 @@ function Barotropic() {
       stopTime.secondsOfDay - currentTime.secondsOfDay
     );
 
-    if (leftTime <= 10) {
+    if (leftTime < 10) {
       setShow(true);
     } else if (show) setShow(false);
   }, [show]);
 
-  useInterval(showAnimate, 1000);
+  useInterval(showAnimate, 100);
 
   if (type !== "1") return <></>;
 

src/components/map/Layout/Entities/Cyclone.jsx

@@ -13,6 +13,7 @@ function Cyclone() {
 
   if (type !== "1") return <></>;
 
+  // 自转
   // const position = new Cesium.SampledPositionProperty();
 
   // const velocityVectorProperty = new Cesium.VelocityVectorProperty(
@@ -63,6 +64,7 @@ function Cyclone() {
           uri={arrowRound}
           minimumPixelSize={64}
           // nodeTransformations={{
+          //   自转
           //   group_0: new Cesium.NodeTransformationProperty({
           //     rotation: rotationProperty,
           //   }),

src/components/map/Layout/Entities/PlateauPolygon.jsx

@@ -1,20 +1,38 @@
-import { Fragment } from "react";
-import { Entity, PolygonGraphics } from "resium";
-import WavePoint from "./WavePoint";
+import { useCallback, useState } from "react";
+import { useParams } from "react-router-dom";
+import { Entity, PolygonGraphics, useCesium } from "resium";
+import { useInterval } from "ahooks";
 
 function PlateauPolygon() {
+  const { type } = useParams();
+  const { viewer } = useCesium();
+  const [show, setShow] = useState(false);
+
+  const showAnimate = useCallback(() => {
+    const { currentTime, stopTime } = viewer.clock;
+    const leftTime = Math.floor(
+      stopTime.secondsOfDay - currentTime.secondsOfDay
+    );
+
+    if (leftTime < (type === "1" ? 10 : 20)) {
+      setShow(true);
+    } else if (show) setShow(false);
+  }, [show, type]);
+
+  useInterval(showAnimate, 100);
+
+  if (type !== "1" && type !== "2") return <></>;
+
   return (
-    <Fragment>
-      {/* <WavePoint stationLat={32.5} stationLon={88} /> */}
-      <Entity id="plateau">
+    <Entity id="plateau" show={show}>
       <PolygonGraphics
         hierarchy={Cesium.Cartesian3.fromDegreesArray([
-            85, 30, 91, 30, 91, 35, 85, 35,
+          // 85, 30, 91, 30, 91, 35, 85, 35,
+          80, 31, 84, 29.5, 87.4, 28, 91, 28, 98, 29, 94, 35, 79, 34.4, 80, 31,
         ])}
         material={new Cesium.Color(1, 0, 0, 0.1)}
       />
     </Entity>
-    </Fragment>
   );
 }
 

src/components/map/Layout/InfoLayout/ChartInfoPanel/TPTT.jsx

@@ -28,7 +28,7 @@ function TPTT() {
       data: ["观测结果", "预测结果"],
       textStyle: { color: "#04fbfd", cursor: "point" },
     },
-    animationDuration: 3000,
+    animationDuration: years.length * 1000,
     animationEasing: "cubicInOut",
     grid: {
       left: "3%",

src/components/map/Layout/InfoLayout/ChartInfoPanel/TripolarTemperature.jsx

@@ -83,7 +83,7 @@ function TripolarTemperature() {
       data: ["南极", "北极", "青藏高原"],
       textStyle: { color: "#04fbfd", cursor: "point" },
     },
-    animationDuration: 3000,
+    animationDuration: years.length * 500,
     animationEasing: "cubicInOut",
     grid: {
       left: "3%",

src/components/map/Layout/index.jsx

@@ -1,4 +1,4 @@
-import { Viewer, Scene } from "resium";
+import { Viewer } from "resium";
 import CustomClock from "./CustomClock";
 import CustomFlyTo from "./CustomFlyTo";
 import CustomToolbar from "./CustomToolbar";

src/models/data.js

@@ -21,6 +21,18 @@ export const data = {
       const { imageLayer } = state;
       return { ...state, imageLayer: { ...imageLayer, ...payload } };
     },
+    resetState(state, payload) {
+      return {
+        showSite: false,
+        toolbar: {
+          showPanel: undefined,
+        },
+        imageLayer: {
+          labrador: undefined,
+          indianOcean: undefined,
+        },
+      };
+    },
   },
   effects: (dispatch) => ({}),
 };