From 9edef5775df1f95ad74895621f98c43cea42b35a Mon Sep 17 00:00:00 2001 From: Aifeilong <2993607249@qq.com> Date: Thu, 28 Sep 2023 14:44:35 +0800 Subject: [PATCH] fix --- src/components/HomeLayout/NavBar.jsx | 10 +++- src/components/map/Layout/CustomToolbar.jsx | 3 +- .../DynamicImageryLayer/LayerLabToQTP.jsx | 14 ++++-- .../map/Layout/Entities/Barotorpic.jsx | 4 +- .../map/Layout/Entities/Cyclone.jsx | 2 + .../map/Layout/Entities/PlateauPolygon.jsx | 46 +++++++++++++------ .../Layout/InfoLayout/ChartInfoPanel/TPTT.jsx | 2 +- .../ChartInfoPanel/TripolarTemperature.jsx | 2 +- src/components/map/Layout/index.jsx | 2 +- src/models/data.js | 12 +++++ 10 files changed, 72 insertions(+), 25 deletions(-) diff --git a/src/components/HomeLayout/NavBar.jsx b/src/components/HomeLayout/NavBar.jsx index febfe53..0ee8801 100644 --- a/src/components/HomeLayout/NavBar.jsx +++ b/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 ( diff --git a/src/components/map/Layout/CustomToolbar.jsx b/src/components/map/Layout/CustomToolbar.jsx index ce2d22e..a444bd1 100644 --- a/src/components/map/Layout/CustomToolbar.jsx +++ b/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) => { diff --git a/src/components/map/Layout/DynamicImageryLayer/LayerLabToQTP.jsx b/src/components/map/Layout/DynamicImageryLayer/LayerLabToQTP.jsx index c294dea..9a73681 100644 --- a/src/components/map/Layout/DynamicImageryLayer/LayerLabToQTP.jsx +++ b/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; diff --git a/src/components/map/Layout/Entities/Barotorpic.jsx b/src/components/map/Layout/Entities/Barotorpic.jsx index 72aa978..08314d3 100644 --- a/src/components/map/Layout/Entities/Barotorpic.jsx +++ b/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 <>; diff --git a/src/components/map/Layout/Entities/Cyclone.jsx b/src/components/map/Layout/Entities/Cyclone.jsx index b3af22e..2372afb 100644 --- a/src/components/map/Layout/Entities/Cyclone.jsx +++ b/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, // }), diff --git a/src/components/map/Layout/Entities/PlateauPolygon.jsx b/src/components/map/Layout/Entities/PlateauPolygon.jsx index 6462885..6551a3c 100644 --- a/src/components/map/Layout/Entities/PlateauPolygon.jsx +++ b/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 ( - - {/* */} - - - - + + + ); } diff --git a/src/components/map/Layout/InfoLayout/ChartInfoPanel/TPTT.jsx b/src/components/map/Layout/InfoLayout/ChartInfoPanel/TPTT.jsx index 588482a..0e09de7 100644 --- a/src/components/map/Layout/InfoLayout/ChartInfoPanel/TPTT.jsx +++ b/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%", diff --git a/src/components/map/Layout/InfoLayout/ChartInfoPanel/TripolarTemperature.jsx b/src/components/map/Layout/InfoLayout/ChartInfoPanel/TripolarTemperature.jsx index c02d97f..7c52ae3 100644 --- a/src/components/map/Layout/InfoLayout/ChartInfoPanel/TripolarTemperature.jsx +++ b/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%", diff --git a/src/components/map/Layout/index.jsx b/src/components/map/Layout/index.jsx index 0d54857..632fd3d 100644 --- a/src/components/map/Layout/index.jsx +++ b/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"; diff --git a/src/models/data.js b/src/models/data.js index d0e84a6..bc69761 100644 --- a/src/models/data.js +++ b/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) => ({}), };