From 1c364a65a82722071c87cd76216fe51a05c326f4 Mon Sep 17 00:00:00 2001 From: Aifeilong <2993607249@qq.com> Date: Thu, 19 Oct 2023 16:03:41 +0800 Subject: [PATCH] fix --- .../ClimateReconDataAssim/index.jsx | 1 + .../common/TextInfoPanel/index.module.less | 4 +- src/components/common/WavePoint/index.jsx | 2 +- src/components/domain/Four/ChartPanel.jsx | 4 +- src/components/domain/Four/Labels.jsx | 2 +- src/components/domain/One/ChartPanel.jsx | 8 +- src/components/domain/One/CustomFlyTo.jsx | 8 +- src/components/domain/One/Cyclone.jsx | 92 ++++++++++++++++--- src/components/domain/One/Labels.jsx | 10 +- .../domain/Six/SceneOne/index.module.less | 2 +- src/components/domain/Two/Circles.jsx | 16 ++-- src/components/domain/Two/CustomFlyTo.jsx | 71 ++++++++++++-- src/components/domain/Two/IndiaOceanSST.jsx | 4 +- src/components/domain/Two/Labels.jsx | 6 +- src/components/domain/Two/Point.jsx | 12 +-- src/components/domain/Two/TimeLinePanel.jsx | 54 +++++++++++ src/components/domain/Two/index.jsx | 2 + src/components/domain/Two/index.module.less | 30 ++++++ src/components/map/Layout/index.jsx | 2 +- src/components/map/Layout/index.module.less | 10 +- 20 files changed, 271 insertions(+), 69 deletions(-) create mode 100644 src/components/domain/Two/TimeLinePanel.jsx diff --git a/src/components/catalog/IntegrationAndOnlineCalc/ClimateReconDataAssim/index.jsx b/src/components/catalog/IntegrationAndOnlineCalc/ClimateReconDataAssim/index.jsx index bfc7e19..70fa326 100644 --- a/src/components/catalog/IntegrationAndOnlineCalc/ClimateReconDataAssim/index.jsx +++ b/src/components/catalog/IntegrationAndOnlineCalc/ClimateReconDataAssim/index.jsx @@ -7,6 +7,7 @@ function ClimateReconDataAssim() { return (
+
过去千年气候重建数据同化
diff --git a/src/components/common/TextInfoPanel/index.module.less b/src/components/common/TextInfoPanel/index.module.less index 8be1c4b..cefbb89 100644 --- a/src/components/common/TextInfoPanel/index.module.less +++ b/src/components/common/TextInfoPanel/index.module.less @@ -2,10 +2,10 @@ width: 100%; height: 100%; border: 1px solid #04fbfd; - color: #02f9ff !important; + color: white !important; background-color: #000000e7; pointer-events: auto; - font-size: 18px; + font-size: 19px; text-indent: 2em; line-height: 1.5; z-index: 999; diff --git a/src/components/common/WavePoint/index.jsx b/src/components/common/WavePoint/index.jsx index 66ff5b3..a4a97a0 100644 --- a/src/components/common/WavePoint/index.jsx +++ b/src/components/common/WavePoint/index.jsx @@ -129,7 +129,7 @@ function WavePoint({ {}, easingFunction: EasingFunction.LINEAR_NONE, orientation: { heading: 6.283, - pitch: -1.569, - roll: 0.45, + pitch: -1.4, + roll: 0, }, }; // 俯视看箭头上升 const sideViewOptions = { - destination: Cartesian3.fromDegrees(-50, 46, 2000000), + destination: Cartesian3.fromDegrees(-50, 46, 2200000), duration: 5, orientation: { heading: Math.toRadians(-15.0), diff --git a/src/components/domain/One/Cyclone.jsx b/src/components/domain/One/Cyclone.jsx index 7089e6a..63a687c 100644 --- a/src/components/domain/One/Cyclone.jsx +++ b/src/components/domain/One/Cyclone.jsx @@ -14,6 +14,8 @@ let totalSeconds = 60; let numberOfSamples = 120; let wheelAngle = 0; +const height = 1000000; + function Cyclone() { const { viewer } = useCesium(); @@ -48,7 +50,9 @@ function Cyclone() { const getPassTime = useCallback(() => { const { startTime, currentTime } = viewer.clock; - const _time = Math.floor(currentTime.secondsOfDay - startTime.secondsOfDay); + const _time = (currentTime.secondsOfDay - startTime.secondsOfDay).toFixed( + 1 + ); return _time; }, [viewer]); @@ -63,7 +67,7 @@ function Cyclone() { new CallbackProperty(function (time, result) { const passTime = getPassTime(); if (passTime < 5) return; - return Cartesian3.fromDegrees(-62, 69, 1000000); + return Cartesian3.fromDegrees(-62, 69, height); }, true) } > @@ -79,15 +83,22 @@ function Cyclone() { color={anticycloneColor} colorBlendMode={ColorBlendMode.REPLACE} /> - + + + + + @@ -113,7 +141,24 @@ function Cyclone() { new CallbackProperty(function (time, result) { const passTime = getPassTime(); if (passTime < 15) return; - return Cartesian3.fromDegrees(29, 49, 1000000); + return Cartesian3.fromDegrees(29, 49, height); + }, true) + } + > + + + @@ -130,7 +175,24 @@ function Cyclone() { new CallbackProperty(function (time, result) { const passTime = getPassTime(); if (passTime < 20) return; - return Cartesian3.fromDegrees(62, 45, 1000000); + return Cartesian3.fromDegrees(62, 45, height); + }, true) + } + > + + + @@ -147,7 +209,7 @@ function Cyclone() { new CallbackProperty(function (time, result) { const passTime = getPassTime(); if (passTime < 25) return; - return Cartesian3.fromDegrees(98, 48, 1000000); + return Cartesian3.fromDegrees(98, 48, height); }, true) } > diff --git a/src/components/domain/One/Labels.jsx b/src/components/domain/One/Labels.jsx index e2d64f3..d561be2 100644 --- a/src/components/domain/One/Labels.jsx +++ b/src/components/domain/One/Labels.jsx @@ -37,7 +37,7 @@ function Labels() { ); @@ -32,7 +32,7 @@ const highCircle = ( innerRadii={new Cartesian3(415000.0, 415000.0, 415000.0)} minimumCone={CesiumMath.toRadians(89.8)} maximumCone={CesiumMath.toRadians(90.2)} - material={new Color(0.99, 0.23, 0.23, 1)} + material={new Color(1, 0, 0, 1)} /> ); @@ -100,7 +100,7 @@ function Circles() { diff --git a/src/components/domain/Two/CustomFlyTo.jsx b/src/components/domain/Two/CustomFlyTo.jsx index fe08153..13a3852 100644 --- a/src/components/domain/Two/CustomFlyTo.jsx +++ b/src/components/domain/Two/CustomFlyTo.jsx @@ -7,7 +7,7 @@ function CustomFlyTo() { function cameraFlyToLine() { const area1Options = { destination: Cartesian3.fromDegrees(-110, -86, 10000000), - duration: 5, + duration: 2, orientation: { heading: 6, pitch: -1.3, @@ -17,13 +17,14 @@ function CustomFlyTo() { viewer.clock.shouldAnimate = true; setTimeout(() => { camera.flyTo(area2Options); - }, 5000); + }, 2000); }, easingFunction: EasingFunction.LINEAR_NONE, }; const area2Options = { - destination: Cartesian3.fromDegrees(-30, -65, 10000000), + destination: Cartesian3.fromDegrees(-30, -85, 10000000), + // destination: Cartesian3.fromDegrees(-30, -65, 10000000), duration: 5, complete: function () { camera.flyTo(area3Options); @@ -37,31 +38,81 @@ function CustomFlyTo() { }; const area3Options = { - destination: Cartesian3.fromDegrees(30, -40, 10000000), + destination: Cartesian3.fromDegrees(40, -75, 10000000), duration: 5, complete: function () { camera.flyTo(area4Options); }, easingFunction: EasingFunction.LINEAR_NONE, + orientation: { + heading: 5.8, + pitch: -1.3, + roll: -6, + }, }; const area4Options = { - destination: Cartesian3.fromDegrees(65, -55, 10000000), - duration: 5, + destination: Cartesian3.fromDegrees(65, -65, 10000000), + duration: 4, orientation: { heading: 6, pitch: -1.3, roll: -6, }, complete: function () { - camera.flyTo({ - duration: 7, - destination: Cartesian3.fromDegrees(90, 5, 14000000), - }); + camera.flyTo(area5Options); }, easingFunction: EasingFunction.LINEAR_NONE, }; + const area5Options = { + destination: Cartesian3.fromDegrees(90, -60, 10000000), + duration: 4, + orientation: { + heading: 6, + pitch: -1.3, + roll: -6, + }, + complete: function () { + camera.flyTo(IndiaOceanOptions); + }, + easingFunction: EasingFunction.LINEAR_NONE, + }; + + const IndiaOceanOptions = { + destination: Cartesian3.fromDegrees(80, 0, 14000000), + duration: 3, + complete: function () { + setTimeout(() => { + camera.flyTo(QTPlateauOption); + }, 3000); + }, + easingFunction: EasingFunction.LINEAR_NONE, + }; + + const QTPlateauOption = { + destination: Cartesian3.fromDegrees(88, 18, 5000000), + duration: 2, + orientation: { + heading: 6, + pitch: -1.3, + roll: -6, + }, + easingFunction: EasingFunction.LINEAR_NONE, + }; + + const xx = { + destination: Cartesian3.fromDegrees(80, 0, 14000000), + duration: 5, + // orientation: { + // heading: 6, + // pitch: -1.3, + // roll: -6, + // }, + easingFunction: EasingFunction.LINEAR_NONE, + }; + + // camera.flyTo(xx); camera.flyTo(area1Options); } cameraFlyToLine(); diff --git a/src/components/domain/Two/IndiaOceanSST.jsx b/src/components/domain/Two/IndiaOceanSST.jsx index 63d7938..d171a4f 100644 --- a/src/components/domain/Two/IndiaOceanSST.jsx +++ b/src/components/domain/Two/IndiaOceanSST.jsx @@ -15,12 +15,12 @@ function IndianOceanSST() { stopTime.secondsOfDay - currentTime.secondsOfDay ); - if (leftTime < 5) { + if (leftTime <= 10) { setShow(true); } else if (show) setShow(false); }, [show]); - useInterval(showAnimate, 100); + useInterval(showAnimate, 300); const tempProvider = useMemo( () => diff --git a/src/components/domain/Two/Labels.jsx b/src/components/domain/Two/Labels.jsx index 7e2a1b0..64b2659 100644 --- a/src/components/domain/Two/Labels.jsx +++ b/src/components/domain/Two/Labels.jsx @@ -31,7 +31,7 @@ function Labels() { { + const { startTime, currentTime, shouldAnimate } = viewer.clock; + const passtime = Math.floor( + currentTime.secondsOfDay - startTime.secondsOfDay + ); + if (!shouldAnimate) return; + + if (passtime < 2) { + setShowIndex(0); + } else if (passtime > 2 && passtime < 20) { + setShowIndex(1); + } else if (passtime > 20 && passtime < 23) { + setShowIndex(2); + } else if (passtime > 23 && passtime < 25) { + setShowIndex(3); + } else if (passtime > 25 && passtime < 30) { + setShowIndex(4); + } + }, 300); + + return ( +
+ {textList.map((text, index) => ( +
+ {text} +
+ ))} +
+ ); +} diff --git a/src/components/domain/Two/index.jsx b/src/components/domain/Two/index.jsx index 3bb8874..595e615 100644 --- a/src/components/domain/Two/index.jsx +++ b/src/components/domain/Two/index.jsx @@ -14,6 +14,7 @@ import MoistureTransport from "./MoistureTransport"; import Sites from "./Site"; import SiteLegend from "./SiteLegend"; import Labels from "./Labels"; +import TimeLinePanel from "./TimeLinePanel"; export default function DomainTwo() { return ( @@ -35,6 +36,7 @@ export default function DomainTwo() {
+ {/* */} ); diff --git a/src/components/domain/Two/index.module.less b/src/components/domain/Two/index.module.less index 19d5cc4..402c8c9 100644 --- a/src/components/domain/Two/index.module.less +++ b/src/components/domain/Two/index.module.less @@ -22,3 +22,33 @@ } } } + +.timeLinePanel :global { + position: absolute; + top: 24px; + left: 12px; + width: 450px; + background-color: #00000000; + display: flex; + flex-direction: column; + + .timeline-panel-item { + color: white; + padding: 4px 8px; + font-size: 18px; + + span { + padding: 4px; + } + } + + .highlight { + span { + font-size: 20px; + font-weight: 600; + color: #04fbfd; + background-color: #04fbfd1a; + border-radius: 8px; + } + } +} diff --git a/src/components/map/Layout/index.jsx b/src/components/map/Layout/index.jsx index 5efb9c2..0556ff5 100644 --- a/src/components/map/Layout/index.jsx +++ b/src/components/map/Layout/index.jsx @@ -27,7 +27,7 @@ function MapLayout({ children, className, ...rest }) { - {/* */} + {children} ); diff --git a/src/components/map/Layout/index.module.less b/src/components/map/Layout/index.module.less index 4bc294d..7ffddc8 100644 --- a/src/components/map/Layout/index.module.less +++ b/src/components/map/Layout/index.module.less @@ -126,7 +126,7 @@ .entity-legend { position: absolute; bottom: 140px; - width: 50%; + width: 960px; left: 25%; display: grid; grid-template-columns: repeat(3, 1fr); @@ -152,7 +152,7 @@ .legend { position: absolute; bottom: 12px; - width: 50%; + width: 960px; left: 25%; // height: 40px; @@ -166,7 +166,9 @@ padding: 8px; .legend-title { - color: #04fbfd; + color: #fff; + font-size: 20px; + font-weight: 600; } .colorbar { @@ -199,7 +201,7 @@ text-align: right; font-weight: 600; color: white; - -webkit-text-stroke: #04fbfd 1px; + -webkit-text-stroke: white 1px; } } }