From 29090b3db8f3613a8417b8cb1b57a499a26469fb Mon Sep 17 00:00:00 2001 From: Aifeilong <2993607249@qq.com> Date: Fri, 13 Oct 2023 17:35:36 +0800 Subject: [PATCH] fix --- src/assets/heatflux.png | Bin 0 -> 1045 bytes src/assets/rain.png | Bin 0 -> 696 bytes src/components/common/CustomClock/index.jsx | 4 - src/components/common/TextInfoPanel/index.jsx | 11 +- .../domain/Five/HeatmapImageLayer.jsx | 1 + src/components/domain/Five/Legend.jsx | 4 +- src/components/domain/Five/index.jsx | 5 +- src/components/domain/Four/Labels.jsx | 33 ++-- src/components/domain/Four/Legend.jsx | 42 ----- src/components/domain/Four/index.jsx | 4 +- src/components/domain/One/ChartPanel.jsx | 13 +- src/components/domain/One/CustomFlyTo.jsx | 5 - src/components/domain/One/EntityLegend.jsx | 2 +- src/components/domain/One/Labels.jsx | 35 ++-- src/components/domain/One/PlateauPolygon.jsx | 36 ---- src/components/domain/One/index.jsx | 2 - src/components/domain/Three/ChartPanel.jsx | 8 + src/components/domain/Three/Legend.jsx | 11 +- .../domain/Three/SceneOne/Legend.jsx | 55 ++++++ .../domain/Three/SceneOne/index.jsx | 14 +- .../domain/Three/SceneOne/index.module.less | 152 +++++++++++++++- .../domain/Three/SceneTwo/CustomFlyTo.jsx | 11 ++ .../domain/Three/SceneTwo/HGTImageLayer.jsx | 32 ++++ .../domain/Three/SceneTwo/Legend.jsx | 168 ++++++++++++++++++ .../domain/Three/SceneTwo/SSTImageLayer.jsx | 31 ++++ .../domain/Three/SceneTwo/SceneChartPanel.jsx | 63 +++++-- .../domain/Three/SceneTwo/TSImageLayer.jsx | 31 ++++ .../domain/Three/SceneTwo/index.jsx | 23 ++- .../domain/Three/SceneTwo/index.module.less | 52 ++++++ src/components/domain/Three/index.module.less | 157 +--------------- src/components/domain/Two/Circles.jsx | 29 +-- src/components/domain/Two/CustomFlyTo.jsx | 79 +------- src/components/domain/Two/EntityLegend.jsx | 2 +- src/components/domain/Two/IndiaOceanSST.jsx | 23 ++- src/components/domain/Two/Labels.jsx | 41 ++++- src/components/domain/Two/Legend.jsx | 150 ++++++---------- .../domain/Two/MoistureTransport.jsx | 2 +- src/components/domain/Two/PlateauPolygon.jsx | 36 ---- .../domain/Two/Site/HeatFlux copy.jsx | 99 +++++++++++ src/components/domain/Two/Site/HeatFlux.jsx | 65 +++---- src/components/domain/Two/Site/Rain copy.jsx | 97 ++++++++++ src/components/domain/Two/Site/Rain.jsx | 63 +++---- src/components/domain/Two/Site/index.jsx | 4 - src/components/domain/Two/SiteLegend.jsx | 46 +++++ src/components/domain/Two/WavePoints.jsx | 4 +- src/components/domain/Two/index.jsx | 5 +- src/components/domain/Two/index.module.less | 24 +++ src/components/home/Layout/NavBar.jsx | 9 +- src/components/map/Layout/index.jsx | 4 +- src/components/map/Layout/index.module.less | 17 +- src/models/data.js | 29 +-- 51 files changed, 1125 insertions(+), 708 deletions(-) create mode 100644 src/assets/heatflux.png create mode 100644 src/assets/rain.png delete mode 100644 src/components/domain/Four/Legend.jsx delete mode 100644 src/components/domain/One/PlateauPolygon.jsx create mode 100644 src/components/domain/Three/SceneOne/Legend.jsx create mode 100644 src/components/domain/Three/SceneTwo/CustomFlyTo.jsx create mode 100644 src/components/domain/Three/SceneTwo/HGTImageLayer.jsx create mode 100644 src/components/domain/Three/SceneTwo/Legend.jsx create mode 100644 src/components/domain/Three/SceneTwo/SSTImageLayer.jsx create mode 100644 src/components/domain/Three/SceneTwo/TSImageLayer.jsx create mode 100644 src/components/domain/Three/SceneTwo/index.module.less delete mode 100644 src/components/domain/Two/PlateauPolygon.jsx create mode 100644 src/components/domain/Two/Site/HeatFlux copy.jsx create mode 100644 src/components/domain/Two/Site/Rain copy.jsx create mode 100644 src/components/domain/Two/SiteLegend.jsx create mode 100644 src/components/domain/Two/index.module.less diff --git a/src/assets/heatflux.png b/src/assets/heatflux.png new file mode 100644 index 0000000000000000000000000000000000000000..ab27cfbb887ed1a2ebd86bdd1e72a936a2039630 GIT binary patch literal 1045 zcmV+w1nT>VP)WfYieag4?Xl?6iQ)Niili<5up+h zW)XoeL9e|D5fLFlL_|b{L==${p_mkNI@7#mb}_XyZ#i|Fy1ARP^NsVLZc+5ue&X-p z3xhqJ@BefDXXpIS{=#%IPjHT)EH^de)CH&`s0&a>P#2(% zh~~in#QYvs00<3Q10WtiqWYO5z{U?vP3Z3E0D$bJFbhO90fNC`t)-*{mJ1g!9}N1~ z03dYs^<9mPuw`Vxwr(A|tX3?A%Rod6U~X=1XZ`u}fDkebXU@Ry_wQi?@V=oz8DG0L z4B$vjMcd1l3iT`yQ91j8KuZ0&bK$`+rm3I+vu<||RIED--2;GNn0b22^sp8!6i5!Ui@ELQ-H z_4Mg~4t_D6`}UFD5=E3Af3*M%=F(CqF)^Xr;MubX`2Dd9-;=EkM6?d14$yr0as;5b zSbYv4UlfU`0$jNg2CxtzOT?HYb+G!mfkY+016A?nVn??ps%}e1M^yKXdRHBudV}_0o=S9253Hh z9B!9O%L>49>lT7KT?pXVF}T^LDP|V{x_0k|ZFDq_7r?V;aL30> zfDgNNVQge1ffYb=Wu>D29i{?&+_3{chKG|m0chSnf3CO^6D7c>oE(e}4W+RHXnFBM znMq2L0H3#S$H?Gd1}}iBDrGu3IRvn68-@o4Hn0L{t*%z4Qc@&9cXl?0`ujJr0%)tL zQJkw*Nq{d|Ss48GEr%0;w!OAiai*q9fS#>e@x8CFfYTo%`u10^6h~T`1nAwe1p~dk zmpB0!I$pn4>{HvSq(Z%oG7o_W~FJqytzF zAW2;zvY7!U?z_cJOEiMI0Cfa)0qO|q0@M-I1*jva3s6T;7od)yEu%%{P`ro<9C*+~sCk0Op(23aR@hxQAs7ZghvOVGJnKX~0t z-N>+*KiTZCe@%hN0YQ$fzn^6s+WwlklHvW=clB2op6&L&x3VgLW!Cqm)i2-q7oV0r z$!H-tKW+E?)5X%?n>|k4ov&)K_a}q;V`H%7y>WR#pw5NK zG6%LP3nZ+3voybc`kzfrvb};y7nd71aOQilM4V&Xvw@Xq&68(L($gFouF4$P<@lzEJQ;z3+LJAUJ^p{PuUh->MrFkS!v literal 0 HcmV?d00001 diff --git a/src/components/common/CustomClock/index.jsx b/src/components/common/CustomClock/index.jsx index 22ac3be..4da175d 100644 --- a/src/components/common/CustomClock/index.jsx +++ b/src/components/common/CustomClock/index.jsx @@ -18,10 +18,6 @@ function CustomClock() { // onTick={(clock) => { // if (!clock.shouldAnimate) return; // }} - // onStop={() => { - // if (toolbar.showPanel === undefined) - // dispatch.data.updateToolbar({ showPanel: true }); - // }} /> ); } diff --git a/src/components/common/TextInfoPanel/index.jsx b/src/components/common/TextInfoPanel/index.jsx index a9f31e5..8441154 100644 --- a/src/components/common/TextInfoPanel/index.jsx +++ b/src/components/common/TextInfoPanel/index.jsx @@ -1,20 +1,20 @@ import { useCallback, useEffect, useState } from "react"; -import { useSelector } from "react-redux"; import { Scrollbars } from "react-custom-scrollbars-2"; import { useInterval } from "ahooks"; +import { useLocation } from "react-router-dom"; let index = 0; function TextInfoPanel({ content }) { + const location = useLocation(); const showNumberPerTimes = 1; - const { toolbar } = useSelector((state) => state.data); const [delay, setDelay] = useState(80); const [contentText, setContentText] = useState(""); useEffect(() => { index = 0; - }, [toolbar]); + }, [location]); const showContent = useCallback(() => { const isFinished = contentText.length >= content.length; @@ -23,7 +23,10 @@ function TextInfoPanel({ content }) { index += showNumberPerTimes; return text + content[index - 1]; }); - } else setDelay(undefined); + } else { + index = 0; + setDelay(undefined); + } }, [contentText]); useInterval(showContent, delay); diff --git a/src/components/domain/Five/HeatmapImageLayer.jsx b/src/components/domain/Five/HeatmapImageLayer.jsx index 705056a..b2c37e6 100644 --- a/src/components/domain/Five/HeatmapImageLayer.jsx +++ b/src/components/domain/Five/HeatmapImageLayer.jsx @@ -24,6 +24,7 @@ function HeatmapImageLayer() { key={`ImageryLayer-${name}`} imageryProvider={tempProvider} show={true} + alpha={0.6} /> ); } diff --git a/src/components/domain/Five/Legend.jsx b/src/components/domain/Five/Legend.jsx index 1ed4a9d..b0ab3fb 100644 --- a/src/components/domain/Five/Legend.jsx +++ b/src/components/domain/Five/Legend.jsx @@ -15,7 +15,9 @@ const colorBar = [ function Legend() { return (
-
+
+ 对东亚夏季风具有显著影响的信号（表面温度和表面向上感热通量）分布 +
{colorBar.map((color, index) => { return ( diff --git a/src/components/domain/Five/index.jsx b/src/components/domain/Five/index.jsx index f59677c..7f8ed43 100644 --- a/src/components/domain/Five/index.jsx +++ b/src/components/domain/Five/index.jsx @@ -24,10 +24,7 @@ export default function DomainFive() { />
-
- -
-
+
{show && } diff --git a/src/components/domain/Four/Labels.jsx b/src/components/domain/Four/Labels.jsx index 5f60bc3..8de4a2e 100644 --- a/src/components/domain/Four/Labels.jsx +++ b/src/components/domain/Four/Labels.jsx @@ -5,46 +5,49 @@ import { Entity, LabelGraphics } from "resium"; const points = [ { position: [13, -70, 30, -67], - name: "sic_s", + name: "南极附近海冰异常", + // name: "sic_s", }, { position: [93, 29, 99, 35], - name: "sc_tp", + name: "青藏高原上空积雪异常", + // name: "sc_tp", }, { position: [68, 48, 76, 52], - name: "sc_ea", + name: "欧亚大陆上空积雪异常", + // name: "sc_ea", }, { position: [150, 60, 160, 70], - name: "ts_ac", + name: "表面温度异常ts_ac", }, { position: [130, 20, 140, 28], - name: "ts_wp", + name: "表面温度异常ts_wp", }, { position: [150, 12, 175, 22], - name: "ts_np", + name: "表面温度异常ts_np", }, { position: [-110, 20, -95, 35], - name: "ts_arn", + name: "表面温度异常ts_arn", }, { position: [10, -12, 45, -2], - name: "ts_af", + name: "表面温度异常ts_af", }, - { position: [80, 10, 110, 20], name: "ts_io" }, - { position: [-150, -10, -40, 5], name: "ts_ep" }, - { position: [65, -62, 90, -57], name: "ts_aa" }, + { position: [80, 10, 110, 20], name: "表面温度异常ts_io" }, + { position: [-150, -10, -40, 5], name: "表面温度异常ts_ep" }, + { position: [65, -62, 90, -57], name: "表面温度异常ts_aa" }, { position: [145, -30, 155, -20], - name: "ts_ea", + name: "表面温度异常ts_ea", }, - { position: [165, -45, 180, -30], name: "ts_nz" }, - { position: [-140, -60, -110, -45], name: "ts_sp" }, - { position: [-70, -78, -50, -70], name: "ts_wd" }, + { position: [165, -45, 180, -30], name: "表面温度异常ts_nz" }, + { position: [-140, -60, -110, -45], name: "表面温度异常ts_sp" }, + { position: [-70, -78, -50, -70], name: "表面温度异常ts_wd" }, ]; function Labels() { diff --git a/src/components/domain/Four/Legend.jsx b/src/components/domain/Four/Legend.jsx deleted file mode 100644 index a7d94a2..0000000 --- a/src/components/domain/Four/Legend.jsx +++ /dev/null @@ -1,42 +0,0 @@ -const colorBar = [ - "#f6df70", - "#f4c53a", - "#f5aa38", - "#f29438", - "#ec6b38", - "#ea5418", -]; - -function Legend() { - return ( -
-
xxx
-
- {colorBar.map((color, index) => { - return ( -
- ); - })} -
-
- {[0.2, 0.3, 0.4, 0.5, 0.6, ""].map((item, index) => { - return ( -
- {item} -
- ); - })} -
-
- ); -} - -export default Legend; diff --git a/src/components/domain/Four/index.jsx b/src/components/domain/Four/index.jsx index e2d70bf..8c4b6e7 100644 --- a/src/components/domain/Four/index.jsx +++ b/src/components/domain/Four/index.jsx @@ -7,7 +7,6 @@ import FormPanel from "./FormPanel"; import ChartPanel from "./ChartPanel"; import RectangleLayer from "./RectangleLayer"; import { useState } from "react"; -import Legend from "./Legend"; import Labels from "./Labels"; export default function DomainFour() { @@ -25,13 +24,12 @@ export default function DomainFour() { XGBoos是基于梯度提升决策树方法的分类和回归模型。 LightGBM也是一种基于树的梯度提升方法，可以解决高维输入变量问题。这两个机器学习模型由许多简单的弱学习器（也称为小回归模型）组成，最终的预测是所有弱学习器的预测的加权和。 此外，作为Boosting树模型，XGBoost和LightGBM对多重共线性不敏感，这减少了特征的同时交互，提高了预测能力。`} />
-
+
{show && }
- {/* */} diff --git a/src/components/domain/One/ChartPanel.jsx b/src/components/domain/One/ChartPanel.jsx index da072d9..045995f 100644 --- a/src/components/domain/One/ChartPanel.jsx +++ b/src/components/domain/One/ChartPanel.jsx @@ -35,10 +35,6 @@ function ChartPanel() { const { shouldAnimate } = viewer.clock; - // useInterval(() => { - // console.log(currentTime, startTime, stopTime); - // }, 100); - useEffect(() => { if (shouldAnimate) { setIsHighlight(true); @@ -67,12 +63,6 @@ function ChartPanel() { bottom: "3%", containLabel: true, }, - // toolbox: { - // feature: { - // // 下载 - // saveAsImage: {}, - // }, - // }, xAxis: { type: "category", boundaryGap: false, @@ -85,6 +75,9 @@ function ChartPanel() { color: "#04fbfd", }, }, + axisLabel: { + interval: 4, + }, }, yAxis: { type: "value", diff --git a/src/components/domain/One/CustomFlyTo.jsx b/src/components/domain/One/CustomFlyTo.jsx index 56aad37..5557c5f 100644 --- a/src/components/domain/One/CustomFlyTo.jsx +++ b/src/components/domain/One/CustomFlyTo.jsx @@ -1,11 +1,9 @@ import { Cartesian3, EasingFunction, Math } from "cesium"; -import { useDispatch } from "react-redux"; import { useCesium } from "resium"; function CustomFlyTo() { const { viewer } = useCesium(); const { camera } = viewer; - const dispatch = useDispatch(); function cameraFlyToLine() { const step1 = { @@ -53,9 +51,6 @@ function CustomFlyTo() { setTimeout(function () { camera.flyTo(step1); }, 5000); - dispatch.data.updateImageLayer({ - labrador: true, - }); }, }; diff --git a/src/components/domain/One/EntityLegend.jsx b/src/components/domain/One/EntityLegend.jsx index 743a825..2ee3fbe 100644 --- a/src/components/domain/One/EntityLegend.jsx +++ b/src/components/domain/One/EntityLegend.jsx @@ -5,7 +5,7 @@ import waterwapor from "@/assets/waterwapor.png"; function EntityLegend() { return ( -
+
- - - -
Rossby wave path
diff --git a/src/components/domain/One/Labels.jsx b/src/components/domain/One/Labels.jsx index 5be5ef7..fc9f715 100644 --- a/src/components/domain/One/Labels.jsx +++ b/src/components/domain/One/Labels.jsx @@ -6,7 +6,8 @@ import { useInterval } from "ahooks"; function Labels() { const { viewer } = useCesium(); - const [show, setShow] = useState(false); + const [showOne, setShowOne] = useState(false); + const [showTwo, setShowTwo] = useState(false); const showAnimate = useCallback(() => { const { currentTime, stopTime } = viewer.clock; @@ -14,18 +15,21 @@ function Labels() { stopTime.secondsOfDay - currentTime.secondsOfDay ); + if (leftTime < 20) { + setShowOne(true); + } else if (showOne) setShowOne(false); if (leftTime < 5) { - setShow(true); - } else if (show) setShow(false); - }, [show]); + setShowTwo(true); + } else if (showTwo) setShowTwo(false); + }, [showOne, showTwo, viewer]); - useInterval(showAnimate, 100); + useInterval(showAnimate, 300); return ( - + - + - + + + + ); } diff --git a/src/components/domain/One/PlateauPolygon.jsx b/src/components/domain/One/PlateauPolygon.jsx deleted file mode 100644 index 09f6f1f..0000000 --- a/src/components/domain/One/PlateauPolygon.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import { useCallback, useState } from "react"; -import { Entity, PolygonGraphics, useCesium } from "resium"; -import { useInterval } from "ahooks"; -import { Cartesian3, Color } from "cesium"; - -function PlateauPolygon() { - 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 < 10) { - setShow(true); - } else if (show) setShow(false); - }, [show]); - - useInterval(showAnimate, 100); - - return ( - - - - ); -} - -export default PlateauPolygon; diff --git a/src/components/domain/One/index.jsx b/src/components/domain/One/index.jsx index 93b5b5e..10f54ed 100644 --- a/src/components/domain/One/index.jsx +++ b/src/components/domain/One/index.jsx @@ -4,7 +4,6 @@ import CustomClock from "@/components/common/CustomClock"; import TextInfoPanel from "@/components/common/TextInfoPanel"; import CustomFlyTo from "./CustomFlyTo"; import Point from "./Point"; -import PlateauPolygon from "./PlateauPolygon"; import Cyclone from "./Cyclone"; import Barotropic from "./Barotorpic"; import WavePoints from "./WavePoints"; @@ -26,7 +25,6 @@ export default function DomainOne() { -
diff --git a/src/components/domain/Three/ChartPanel.jsx b/src/components/domain/Three/ChartPanel.jsx index 259fe5f..47f723e 100644 --- a/src/components/domain/Three/ChartPanel.jsx +++ b/src/components/domain/Three/ChartPanel.jsx @@ -6,6 +6,7 @@ for (let year = 1900; year <= 2000; year++) { years.push(year); } +// 北极 const AntarcticaData = [ 0.101942611, 0.121527548, 0.139042908, 0.153372484, 0.163348844, 0.16781324, 0.165740405, 0.156668394, 0.140792524, 0.118786901, 0.091903343, 0.062313072, @@ -27,6 +28,8 @@ const AntarcticaData = [ -0.531629308, -0.498751783, -0.462720586, -0.423305188, -0.380187818, -0.332990445, -0.281392986, -0.225240753, ]; + +// 南极 const ArcticData = [ 0.280477536, 0.259957371, 0.238217659, 0.215366218, 0.191558571, 0.167050728, 0.142221385, 0.117514405, 0.093353739, 0.070136018, 0.048165337, 0.027449274, @@ -48,6 +51,8 @@ const ArcticData = [ 0.173000981, 0.16106866, 0.148653001, 0.136669759, 0.12600632, 0.117368896, 0.111065474, 0.107060448, ]; + +// 青藏高原 const TibetanData = [ -0.054774324, -0.072074468, -0.088166217, -0.102150868, -0.113128752, -0.12021764, -0.122708696, -0.12041877, -0.113696453, -0.103130771, @@ -109,6 +114,9 @@ function ChartPanel() { color: "#04fbfd", }, }, + axisLabel: { + interval: 4, + }, }, yAxis: { type: "value", diff --git a/src/components/domain/Three/Legend.jsx b/src/components/domain/Three/Legend.jsx index d993760..b495bdc 100644 --- a/src/components/domain/Three/Legend.jsx +++ b/src/components/domain/Three/Legend.jsx @@ -37,9 +37,16 @@ function Legend({ style }) { })}
- {[-0.8, -0.4, 0, 0.4, 0.8, ""].map((item, index) => { + {[-0.8, -0.4, 0, 0.4, 0.8].map((item, index) => { return ( -
+
{item}
); diff --git a/src/components/domain/Three/SceneOne/Legend.jsx b/src/components/domain/Three/SceneOne/Legend.jsx new file mode 100644 index 0000000..780323d --- /dev/null +++ b/src/components/domain/Three/SceneOne/Legend.jsx @@ -0,0 +1,55 @@ +import styles from "./index.module.less"; + +const colorBar = [ + "#801FEF", + "#050CFB", + "#3B6EE6", + "#159AFF", + "#36C1F8", + "#AADBF2", + "#FFF479", + "#FFC113", + "#FF7E00", + "#FF7E00", + "#CD0000", + "#FFB1B1", +]; + +function Legend() { + return ( +
+
全球温度异常空间分布
+
+ {colorBar.map((color, index) => { + return ( +
+ ); + })} +
+
+ {["", -1, -0.8, -0.6, -0.4, -0.2, 0, 0.2, 0.4, 0.6, 0.8, 1.0, ""].map( + (item, index) => { + return ( +
+ {item} +
+ ); + } + )} +
+
+ ); +} + +export default Legend; diff --git a/src/components/domain/Three/SceneOne/index.jsx b/src/components/domain/Three/SceneOne/index.jsx index e35433b..cb8500e 100644 --- a/src/components/domain/Three/SceneOne/index.jsx +++ b/src/components/domain/Three/SceneOne/index.jsx @@ -1,6 +1,6 @@ import TextInfoPanel from "@/components/common/TextInfoPanel"; import ChartPanel from "../ChartPanel"; -import Legend from "../Legend"; +import Legend from "./Legend"; import ViewerOne from "./ViewerOne"; import ViewerTwo from "./ViewerTwo"; import ViewerThree from "./ViewerThree"; @@ -14,11 +14,13 @@ function SceneOne() {
-
- -
-
- +
+
+ +
+
+ +
diff --git a/src/components/domain/Three/SceneOne/index.module.less b/src/components/domain/Three/SceneOne/index.module.less index ff55c5b..ba86647 100644 --- a/src/components/domain/Three/SceneOne/index.module.less +++ b/src/components/domain/Three/SceneOne/index.module.less @@ -1,12 +1,13 @@ .sceneOne :global { display: flex; + flex-direction: column; width: 100%; height: 100%; - background-color: gray; + background-color: darkslategray; .domain-viewers { width: 100%; - height: calc(100% - 250px); + flex: 1; display: flex; .domain-viewer { @@ -18,4 +19,151 @@ } } } + + .domain-info { + flex: 1; + margin: 12px; + display: flex; + justify-content: space-between; + gap: 12px; + + .left-panel { + width: 450px; + display: flex; + flex-direction: column; + height: 100%; + + .text-info-panel { + width: 100%; + height: 100%; + padding: 12px; + border: 1px solid #04fbfd; + color: #02f9ff !important; + background-color: #1f485690; + pointer-events: auto; + font-size: 18px; + text-indent: 2em; + line-height: 1.5; + z-index: 999; + border-radius: 8px; + } + } + + .right-panel { + flex: 1; + min-width: 450px; + display: flex; + flex-direction: column; + gap: 12px; + + .top-panel { + flex: 1; + } + + .bottom-panel { + flex: 1; + } + + .form-panel { + width: 100%; + height: 100%; + pointer-events: auto; + padding: 12px; + border: 1px solid #04fbfd; + color: #02f9ff !important; + background-color: #1f485690; + border-radius: 8px; + + .ant-form-item-label { + label { + color: white; + } + } + + .ant-form-item-control { + .ant-select-multiple { + max-height: 300px; + overflow-y: scroll; + + &::-webkit-scrollbar { + width: 6px; + height: 1px; + } + &::-webkit-scrollbar-thumb { + border-radius: 6px; + background: #00a2a2; + } + &::-webkit-scrollbar-track { + border-radius: 6px; + background: none; + } + } + } + } + + .chart-info-panel { + width: 100%; + height: 100%; + pointer-events: auto; + padding: 12px; + border: 1px solid #04fbfd; + color: #02f9ff !important; + background-color: #1f485690; + transition: all 0.3s ease-in-out; + border-radius: 8px; + } + } + } +} + +.legend :global { + position: absolute; + bottom: calc(50% + 14px); + width: 50%; + left: 25%; + z-index: 1000; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #1f485690; + border: 1px solid #04fbfd; + border-radius: 8px; + padding: 8px; + + .legend-title { + color: #04fbfd; + } + + .colorbar { + width: 100%; + height: 14px; + display: flex; + margin: 8px 0; + + .colorbar-item { + flex: 1; + height: 100%; + border: 1px black solid; + + &:not(:nth-child(1)) { + border-left: none; + } + } + } + + .legend-text { + display: flex; + justify-content: space-evenly; + width: 100%; + height: 20px; + + .legend-text-item { + flex: 1; + text-align: right; + font-weight: 600; + color: white; + -webkit-text-stroke: #04fbfd 1px; + } + } } diff --git a/src/components/domain/Three/SceneTwo/CustomFlyTo.jsx b/src/components/domain/Three/SceneTwo/CustomFlyTo.jsx new file mode 100644 index 0000000..667b363 --- /dev/null +++ b/src/components/domain/Three/SceneTwo/CustomFlyTo.jsx @@ -0,0 +1,11 @@ +import { Cartesian3 } from "cesium"; +import { CameraFlyTo } from "resium"; + +export default function CustomFlyTo() { + return ( + + ); +} diff --git a/src/components/domain/Three/SceneTwo/HGTImageLayer.jsx b/src/components/domain/Three/SceneTwo/HGTImageLayer.jsx new file mode 100644 index 0000000..2efc5cd --- /dev/null +++ b/src/components/domain/Three/SceneTwo/HGTImageLayer.jsx @@ -0,0 +1,32 @@ +import { useMemo } from "react"; +import { ImageryLayer } from "resium"; +import { WebMapServiceImageryProvider } from "cesium"; + +const url = "http://analysis.tpdc.ac.cn/gs/geoserver/phitrellis/wms"; +const name = "phitrellis:4_3_2_c_hgt_Layer1"; + +function HGTImageLayer() { + const tempProvider = useMemo( + () => + new WebMapServiceImageryProvider({ + url: url, + layers: name, + parameters: { + service: "WMS", + format: "image/png", + transparent: true, + }, + }), + [name, url] + ); + return ( + + ); +} + +export default HGTImageLayer; diff --git a/src/components/domain/Three/SceneTwo/Legend.jsx b/src/components/domain/Three/SceneTwo/Legend.jsx new file mode 100644 index 0000000..d2f2d1c --- /dev/null +++ b/src/components/domain/Three/SceneTwo/Legend.jsx @@ -0,0 +1,168 @@ +import { Fragment } from "react"; +import styles from "./index.module.less"; + +const colorBar = [ + "#7F20F0", + "#2A09FA", + "#1C33F1", + "#3B6CE3", + "#2388F8", + "#0EA5FE", + "#23C0FB", + "#85CAF1", + "#B8E1F3", + "#FEF995", + "#FEDD30", + "#FEB709", + "#FF8B00", + "#FF5D00", + "#FF1001", + "#E00000", + "#D62A2A", + "#FFB1B1", +]; + +const colorBar2 = [ + "#7F20F0", + "#0e03fd", + "#3B5CE3", + "#2684f6", + "#09b0ff", + "#56c4f4", + "#b0ddf3", + "#FEF687", + "#ffcd1e", + "#ff9700", + "#fe5100", + "#f60100", + "#cd0d0c", + "#FFB1B1", +]; + +function Legend({ style }) { + return ( + +
+
+ 南半球冬季南极半岛区域地表气温年代际分量(单位：K) +
+
+ {colorBar.map((color, index) => { + return ( +
+ ); + })} +
+
+ {[-0.8, -0.4, 0, 0.4, 0.8].map((item, index) => { + return ( +
+ {item} +
+ ); + })} +
+
+
+
+ 南半球冬季热带大西洋海表温度(单位：K) +
+
+ {colorBar.map((color, index) => { + return ( +
+ ); + })} +
+
+ {[-0.2, -0.1, 0, 0.1, 0.2].map((item, index) => { + return ( +
+ {item} +
+ ); + })} +
+
+
+
+ 南半球冬季200hPa涡动位势高度异常(单位：gpm) +
+
+ {colorBar2.map((color, index) => { + return ( +
+ ); + })} +
+
+ {[ + "", + -15, + "", + "", + -10, + "", + "", + -5, + "", + "", + 0, + "", + "", + 5, + "", + "", + 10, + "", + "", + 15, + "", + ].map((item, index) => { + return ( +
+ {item} +
+ ); + })} +
+
+ + ); +} + +export default Legend; diff --git a/src/components/domain/Three/SceneTwo/SSTImageLayer.jsx b/src/components/domain/Three/SceneTwo/SSTImageLayer.jsx new file mode 100644 index 0000000..c67ecc2 --- /dev/null +++ b/src/components/domain/Three/SceneTwo/SSTImageLayer.jsx @@ -0,0 +1,31 @@ +import { useMemo } from "react"; +import { ImageryLayer } from "resium"; +import { WebMapServiceImageryProvider } from "cesium"; + +const url = "http://analysis.tpdc.ac.cn/gs/geoserver/phitrellis/wms"; +const name = "phitrellis:4_3_2_a_sst_Layer11"; + +function SSTImageLayer() { + const tempProvider = useMemo( + () => + new WebMapServiceImageryProvider({ + url: url, + layers: name, + parameters: { + service: "WMS", + format: "image/png", + transparent: true, + }, + }), + [name, url] + ); + return ( + + ); +} + +export default SSTImageLayer; diff --git a/src/components/domain/Three/SceneTwo/SceneChartPanel.jsx b/src/components/domain/Three/SceneTwo/SceneChartPanel.jsx index f78a9c6..6839cb2 100644 --- a/src/components/domain/Three/SceneTwo/SceneChartPanel.jsx +++ b/src/components/domain/Three/SceneTwo/SceneChartPanel.jsx @@ -6,8 +6,37 @@ for (let year = 1950; year <= 2020; year++) { years.push(year); } -const SATData = []; -const SSTData = []; +const SATData = [ + 0.429685116, 0.689356685, 0.873310268, 0.967009068, 1.003803611, 1.036836505, + 1.102791905, 1.167440891, 1.17760396, 1.124955773, 1.01085484, 0.859563529, + 0.71795398, 0.621988237, 0.597750485, 0.598902822, 0.532728314, 0.342583299, + -0.024368536, -0.493425161, -0.9331339, -1.273939967, -1.476933718, + -1.554893732, -1.475591898, -1.279159307, -1.064661622, -0.922379196, + -0.918932199, -1.11133039, -1.43390727, -1.801198602, -2.015464544, + -2.0192132, -1.855630398, -1.571777582, -1.243658185, -1.025858879, + -0.930935264, -0.869536936, -0.719216347, -0.443715662, -0.130082458, + 0.151266798, 0.290564477, 0.236905336, 0.056489315, -0.14797987, -0.240299582, + -0.17908895, 0.034180526, 0.390409917, 0.806362808, 1.218396306, 1.526551723, + 1.709755898, 1.74579525, 1.635397196, 1.387297392, 1.11059618, 0.822289705, + 0.581417382, 0.404003143, 0.258351594, 0.119950205, 0.01043385, -0.079203822, + -0.124122731, -0.129883319, -0.031686373, 0.16967541, +]; + +const SSTData = [ + 1.212813735, 1.429750562, 1.521738529, 1.469550729, 1.316006422, 1.125649571, + 0.986746848, 0.915246606, 0.915339172, 0.951494932, 0.970494628, 0.926436901, + 0.79472959, 0.602078795, 0.395833611, 0.238499194, 0.111982882, -0.020530188, + -0.205848336, -0.508775234, -0.927411437, -1.398505688, -1.82903564, + -2.119443178, -2.199231863, -2.063818693, -1.770155549, -1.401496291, + -1.074879527, -0.84980756, -0.789860964, -0.888945699, -1.096244812, + -1.2922014, -1.367582083, -1.272272468, -1.035024524, -0.74733454, + -0.570655763, -0.564872324, -0.715999901, -0.92039144, -1.045125961, + -0.965325236, -0.686810315, -0.263357043, 0.127493069, 0.37617141, + 0.430310369, 0.350464702, 0.266462713, 0.269338131, 0.410024047, 0.642185688, + 0.879462898, 1.070014119, 1.173520446, 1.198034406, 1.178782582, 1.129892349, + 1.029724956, 0.902248025, 0.708711326, 0.465828151, 0.227744579, 0.055393901, + 0.002014907, 0.076390825, 0.281141222, 0.559546649, 0.895649433, +]; function SceneChartPanel() { const option = { @@ -18,7 +47,7 @@ function SceneChartPanel() { trigger: "axis", }, legend: { - data: ["SAT_SVD1", "SST_SVD1"], + data: ["南极半岛", "热带大西洋"], textStyle: { color: "#04fbfd", cursor: "point" }, }, animationDuration: 10 * 1000, @@ -67,22 +96,10 @@ function SceneChartPanel() { dataZoom: { type: "inside", start: 0, end: 100 }, series: [ { - name: "SAT_SVD1", - type: "line", - stack: "Total", - data: SATData, - smooth: true, - color: "red", - symbol: "none", - itemStyle: { - color: "red", - }, - }, - { - name: "SST_SVD1", + name: "南极半岛", type: "line", // stack: "Total", - data: SSTData, + data: SATData, smooth: true, color: "blue", symbol: "none", @@ -90,6 +107,18 @@ function SceneChartPanel() { color: "blue", }, }, + { + name: "热带大西洋", + type: "line", + // stack: "Total", + data: SSTData, + smooth: true, + color: "red", + symbol: "none", + itemStyle: { + color: "red", + }, + }, ], }; diff --git a/src/components/domain/Three/SceneTwo/TSImageLayer.jsx b/src/components/domain/Three/SceneTwo/TSImageLayer.jsx new file mode 100644 index 0000000..a99bf89 --- /dev/null +++ b/src/components/domain/Three/SceneTwo/TSImageLayer.jsx @@ -0,0 +1,31 @@ +import { useMemo } from "react"; +import { ImageryLayer } from "resium"; +import { WebMapServiceImageryProvider } from "cesium"; + +const url = "http://analysis.tpdc.ac.cn/gs/geoserver/phitrellis/wms"; +const name = "phitrellis:4_3_2_b_ts_Layer11"; + +function TSImageLayer() { + const tempProvider = useMemo( + () => + new WebMapServiceImageryProvider({ + url: url, + layers: name, + parameters: { + service: "WMS", + format: "image/png", + transparent: true, + }, + }), + [name, url] + ); + return ( + + ); +} + +export default TSImageLayer; diff --git a/src/components/domain/Three/SceneTwo/index.jsx b/src/components/domain/Three/SceneTwo/index.jsx index 8daf094..4887978 100644 --- a/src/components/domain/Three/SceneTwo/index.jsx +++ b/src/components/domain/Three/SceneTwo/index.jsx @@ -1,18 +1,33 @@ -import Legend from "../Legend"; +import MapLayout from "@/components/map/Layout"; +import Legend from "./Legend"; import ViewerOne from "../SceneOne/ViewerOne"; import SceneChartPanel from "./SceneChartPanel"; +import CustomFlyTo from "./CustomFlyTo"; +import SSTImageLayer from "./SSTImageLayer"; +import TSImageLayer from "./TSImageLayer"; +import HGTImageLayer from "./HGTImageLayer"; function SceneTwo() { return (
- + +
+ 两极协同—连接南极和北极的热带大西洋经向模的媒介作用 +
- - + + + + + + + {/* + + */}
); } diff --git a/src/components/domain/Three/SceneTwo/index.module.less b/src/components/domain/Three/SceneTwo/index.module.less new file mode 100644 index 0000000..3d4bec4 --- /dev/null +++ b/src/components/domain/Three/SceneTwo/index.module.less @@ -0,0 +1,52 @@ +.legend :global { + position: absolute; + bottom: 270px; + width: 450px; + left: 12px; + // left: 25%; + z-index: 1000; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #1f485690; + border: 1px solid #04fbfd; + border-radius: 8px; + padding: 8px; + + .legend-title { + color: #04fbfd; + } + + .colorbar { + width: 100%; + height: 14px; + display: flex; + margin: 8px 0; + + .colorbar-item { + flex: 1; + height: 100%; + border: 1px black solid; + + &:not(:nth-child(1)) { + border-left: none; + } + } + } + + .legend-text { + display: flex; + justify-content: space-evenly; + width: 100%; + height: 20px; + + .legend-text-item { + flex: 1; + text-align: right; + font-weight: 600; + color: white; + -webkit-text-stroke: #04fbfd 1px; + } + } +} diff --git a/src/components/domain/Three/index.module.less b/src/components/domain/Three/index.module.less index d966335..101b03b 100644 --- a/src/components/domain/Three/index.module.less +++ b/src/components/domain/Three/index.module.less @@ -22,6 +22,7 @@ color: #02f9ff !important; background-color: #1f485690; transition: all 0.3s ease-in-out; + border-radius: 8px; } } } @@ -32,163 +33,7 @@ top: 8px; } - .left-panel { - position: absolute; - left: 12px; - bottom: 12px; - width: 450px; - display: flex; - flex-direction: column; - height: 230px; - - .top-panel { - flex: 1; - } - - .bottom-panel { - flex: 1; - } - - .text-info-panel { - width: 100%; - height: 100%; - padding: 12px; - border: 1px solid #04fbfd; - color: #02f9ff !important; - background-color: #1f485690; - pointer-events: auto; - font-size: 18px; - text-indent: 2em; - line-height: 1.5; - z-index: 999; - } - } - - .right-panel { - position: absolute; - right: 12px; - bottom: 12px; - width: 450px; - height: 230px; - display: flex; - flex-direction: column; - gap: 12px; - - .top-panel { - flex: 1; - } - - .bottom-panel { - flex: 1; - } - - .form-panel { - width: 100%; - height: 100%; - pointer-events: auto; - padding: 12px; - border: 1px solid #04fbfd; - color: #02f9ff !important; - background-color: #1f485690; - - .ant-form-item-label { - label { - color: white; - } - } - - .ant-form-item-control { - .ant-select-multiple { - max-height: 300px; - overflow-y: scroll; - - &::-webkit-scrollbar { - width: 6px; - height: 1px; - } - &::-webkit-scrollbar-thumb { - border-radius: 6px; - background: #00a2a2; - } - &::-webkit-scrollbar-track { - border-radius: 6px; - background: none; - } - } - } - } - - .chart-info-panel { - width: 100%; - height: 100%; - pointer-events: auto; - padding: 12px; - border: 1px solid #04fbfd; - color: #02f9ff !important; - background-color: #1f485690; - transition: all 0.3s ease-in-out; - } - - .highlight { - outline: 4px solid #04fbfd; - box-shadow: 0 0 30px #04e0fd; - } - } - .one { top: 50%; } } - -.legend :global { - position: absolute; - bottom: 270px; - width: 50%; - left: 25%; - z-index: 1000; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - background-color: #1f485690; - border: 1px solid #04fbfd; - border-radius: 8px; - padding: 8px; - - .legend-title { - color: #04fbfd; - } - - .colorbar { - width: 100%; - height: 14px; - display: flex; - margin: 8px 0; - - .colorbar-item { - flex: 1; - height: 100%; - border: 1px black solid; - - &:not(:nth-child(1)) { - border-left: none; - } - } - } - - .legend-text { - display: flex; - justify-content: space-evenly; - width: 100%; - height: 20px; - margin-left: 8px; - - .legend-text-item { - flex: 1; - text-align: right; - font-weight: 600; - color: white; - -webkit-text-stroke: #04fbfd 1px; - } - } -} diff --git a/src/components/domain/Two/Circles.jsx b/src/components/domain/Two/Circles.jsx index 67b1750..360094c 100644 --- a/src/components/domain/Two/Circles.jsx +++ b/src/components/domain/Two/Circles.jsx @@ -6,8 +6,7 @@ import { PolylineGraphics, LabelGraphics, } from "resium"; -import { useInterval, useThrottleFn } from "ahooks"; -import { useDispatch } from "react-redux"; +import { useInterval } from "ahooks"; import { Cartesian3, Color, @@ -43,27 +42,6 @@ const highCircle = ( function Circles() { const { viewer } = useCesium(); - const dispatch = useDispatch(); - - const { run: showInfo } = useThrottleFn( - () => { - dispatch.data.updateImageLayer({ indianOcean: true }); - dispatch.data.update({ showSite: true }); - }, - { - wait: 1000, - } - ); - - const { run: closeInfo } = useThrottleFn( - () => { - dispatch.data.updateImageLayer({ indianOcean: false }); - dispatch.data.update({ showSite: false }); - }, - { - wait: 1000, - } - ); const Circle = ({ id, lon, lat, isLow, showTime }) => { const circle = isLow ? lowCircle : highCircle; @@ -75,11 +53,6 @@ function Circles() { currentTime.secondsOfDay - startTime.secondsOfDay ); if (!shouldAnimate) return; - if (_time === 20) { - showInfo(); - } else if (_time === 0) { - closeInfo(); - } if (_time >= showTime) { setShow(true); } else { diff --git a/src/components/domain/Two/CustomFlyTo.jsx b/src/components/domain/Two/CustomFlyTo.jsx index 3930010..fe08153 100644 --- a/src/components/domain/Two/CustomFlyTo.jsx +++ b/src/components/domain/Two/CustomFlyTo.jsx @@ -1,27 +1,10 @@ -import { Cartesian3, EasingFunction, Math } from "cesium"; -import { useDispatch } from "react-redux"; +import { Cartesian3, EasingFunction } from "cesium"; import { useCesium } from "resium"; function CustomFlyTo() { - const dispatch = useDispatch(); const { viewer, camera } = useCesium(); function cameraFlyToLine() { - // // 南极 - // const antarcticalOptions = { - // destination: Cartesian3.fromDegrees(88, -89, 1600000), - // orientation: { - // heading: Math.toRadians(15.0), - // pitch: Math.toRadians(-60), - // roll: 0.0, - // }, - // duration: 5, - // complete: function () { - // camera.flyTo(area1Options); - // }, - // easingFunction: EasingFunction.LINEAR_NONE, - // }; - const area1Options = { destination: Cartesian3.fromDegrees(-110, -86, 10000000), duration: 5, @@ -32,7 +15,6 @@ function CustomFlyTo() { }, complete: function () { viewer.clock.shouldAnimate = true; - dispatch.data.updateToolbar({ showPanel: true }); setTimeout(() => { camera.flyTo(area2Options); }, 5000); @@ -72,65 +54,14 @@ function CustomFlyTo() { roll: -6, }, complete: function () { - setTimeout(() => { - camera.flyTo({ - duration: 5, - destination: Cartesian3.fromDegrees(90, -12, 14000000), - }); - }, 5 * 1000); + camera.flyTo({ + duration: 7, + destination: Cartesian3.fromDegrees(90, 5, 14000000), + }); }, easingFunction: EasingFunction.LINEAR_NONE, }; - const area5Options = { - destination: Cartesian3.fromDegrees(95, -30, 10000000), - duration: 5, - complete: function () { - // camera.flyTo(sideViewOptions); - setTimeout(() => { - camera.flyTo({ - duration: 5, - destination: Cartesian3.fromDegrees(90, -12, 14000000), - }); - }, 5 * 1000); - }, - easingFunction: EasingFunction.LINEAR_NONE, - }; - - // 侧边 - // const sideViewOptions = { - // destination: Cartesian3.fromDegrees(80, -60, 16000000), - // // destination: Cesium.Cartesian3.fromDegrees(130, -10.5, 20000000), - // duration: 5, - // orientation: { - // heading: Math.toRadians(-10.0), - // pitch: Math.toRadians(-92), - // roll: 6.0, - // }, - // complete: () => { - // viewer.clock.shouldAnimate = true; - // dispatch.data.updateToolbar({ showPanel: true }); - // setTimeout(() => { - // camera.flyTo({ - // duration: 5, - // destination: Cartesian3.fromDegrees(90, -12, 14000000), - // }); - // }, 40 * 1000); - // }, - // }; - - const xx = { - destination: Cartesian3.fromDegrees(65, -55, 10000000), - duration: 5, - orientation: { - heading: 6, - pitch: -1.3, - roll: -6, - }, - - easingFunction: EasingFunction.LINEAR_NONE, - }; - camera.flyTo(area1Options); } cameraFlyToLine(); diff --git a/src/components/domain/Two/EntityLegend.jsx b/src/components/domain/Two/EntityLegend.jsx index 9690d90..8eac747 100644 --- a/src/components/domain/Two/EntityLegend.jsx +++ b/src/components/domain/Two/EntityLegend.jsx @@ -6,7 +6,7 @@ import moisture from "@/assets/moisture.png"; function EntityLegend() { return ( -
+
low diff --git a/src/components/domain/Two/IndiaOceanSST.jsx b/src/components/domain/Two/IndiaOceanSST.jsx index 6cfa24c..63d7938 100644 --- a/src/components/domain/Two/IndiaOceanSST.jsx +++ b/src/components/domain/Two/IndiaOceanSST.jsx @@ -1,12 +1,26 @@ -import { useMemo } from "react"; -import { ImageryLayer } from "resium"; +import { useCallback, useMemo, useState } from "react"; +import { ImageryLayer, useCesium } from "resium"; import { WebMapServiceImageryProvider } from "cesium"; -import { useSelector } from "react-redux"; +import { useInterval } from "ahooks"; const url = "http://analysis.tpdc.ac.cn/gs/geoserver/phitrellis/wms"; function IndianOceanSST() { - const { imageLayer } = useSelector((state) => state.data); + 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 < 5) { + setShow(true); + } else if (show) setShow(false); + }, [show]); + + useInterval(showAnimate, 100); const tempProvider = useMemo( () => @@ -24,6 +38,7 @@ function IndianOceanSST() { return ( diff --git a/src/components/domain/Two/Labels.jsx b/src/components/domain/Two/Labels.jsx index caebeda..7e2a1b0 100644 --- a/src/components/domain/Two/Labels.jsx +++ b/src/components/domain/Two/Labels.jsx @@ -1,11 +1,44 @@ +import { useInterval } from "ahooks"; import { Cartesian2, Cartesian3, Color, LabelStyle } from "cesium"; -import { Fragment } from "react"; -import { Entity, LabelGraphics } from "resium"; +import { Fragment, useCallback, useState } from "react"; +import { Entity, LabelGraphics, useCesium } from "resium"; function Labels() { + const { viewer } = useCesium(); + const [showIO, setShowIO] = useState(false); + const [showTB, setShowTB] = useState(false); + + const showAnimate = useCallback(() => { + const { currentTime, stopTime } = viewer.clock; + const leftTime = Math.floor( + stopTime.secondsOfDay - currentTime.secondsOfDay + ); + + if (leftTime < 5) { + setShowIO(true); + setShowTB(true); + } else if (showIO) { + setShowIO(false); + setShowTB(false); + } + }, [showIO]); + + useInterval(showAnimate, 100); + return ( - + + + + - + -
-
站点感热通量异常
-
-
- {[-0.5, -0.4, -0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5].map( - (item, index) => { - return ( -
- {item} -
- ); - } - )} -
-
- {colorBar2.map((color, index) => { - return ( -
- ); - })} -
-
+
+
印度洋海温异常值
+
+ {colorBar.map((color, index) => { + return ( +
+ ); + })}
-
-
站点降水异常
-
-
- {[-0.5, -0.4, -0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5].map( - (item, index) => { - return ( -
- {item} -
- ); - } - )} -
-
- {colorBar.map((color, index) => { - return ( -
- ); - })} -
-
+
+ {[-2.4, -1.6, -0.8, 0, 0.8, 1.6, 2.4, ""].map((item, index) => { + return ( +
+ {item} +
+ ); + })}
- +
); } diff --git a/src/components/domain/Two/MoistureTransport.jsx b/src/components/domain/Two/MoistureTransport.jsx index cee5a09..d5929d6 100644 --- a/src/components/domain/Two/MoistureTransport.jsx +++ b/src/components/domain/Two/MoistureTransport.jsx @@ -13,7 +13,7 @@ function MoistureTransport() { stopTime.secondsOfDay - currentTime.secondsOfDay ); - if (leftTime < 10) { + if (leftTime < 5) { setShow(true); } else if (show) setShow(false); }, [show]); diff --git a/src/components/domain/Two/PlateauPolygon.jsx b/src/components/domain/Two/PlateauPolygon.jsx deleted file mode 100644 index 760d71f..0000000 --- a/src/components/domain/Two/PlateauPolygon.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import { useCallback, useState } from "react"; -import { Entity, PolygonGraphics, useCesium } from "resium"; -import { useInterval } from "ahooks"; -import { Cartesian3, Color } from "cesium"; - -function PlateauPolygon() { - 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 < 5) { - setShow(true); - } else if (show) setShow(false); - }, [show]); - - useInterval(showAnimate, 100); - - return ( - - - - ); -} - -export default PlateauPolygon; diff --git a/src/components/domain/Two/Site/HeatFlux copy.jsx b/src/components/domain/Two/Site/HeatFlux copy.jsx new file mode 100644 index 0000000..7d8445f --- /dev/null +++ b/src/components/domain/Two/Site/HeatFlux copy.jsx @@ -0,0 +1,99 @@ +import { Entity, EllipseGraphics } from "resium"; +import { Cartesian3, Color } from "cesium"; + +const fluxData = [ + 0.03256254, -0.23182425, -0.040055223, -0.03476936, -0.40450656, -0.18742515, + 0.045675285, -0.1613145, 0.06295018, -0.14455463, -0.30952197, 0.08164308, + 0.019849295, 0.08785298, -0.22862722, -0.29176497, -0.1504006, 0.06978327, + 0.10036364, -0.1807746, -0.21565104, -0.28437, -0.16798478, -0.214204, + -0.049326606, -0.094635, -0.09530785, -0.3044696, -0.28540367, -0.032144096, + -0.20508154, -0.1721087, -0.12554182, -0.11001358, 0.002132158, 0.055833075, + -0.1926637, -0.313678, 0.45139277, -0.22535999, -0.24989001, -0.024313157, + -0.2859986, 0.019246876, -0.02536043, -0.46465757, -0.32723987, -0.1926801, + -0.28803313, 0.005735828, 0.055759758, 0.10569655, -0.14558661, -0.1924466, + -0.035115488, -0.48584095, -0.15169029, -0.0734382, -0.21065243, -0.1338741, + -0.5154115, -0.19396217, -0.10661117, -0.24887498, -0.36621347, -0.39322242, + -0.14620663, -0.1848758, -0.36631036, -0.07608904, -0.161032, 0.08955761, + -0.46289977, -0.19713691, -0.237024, -0.10819046, -0.10532822, -0.20728564, + -0.04151492, -0.1793385, +]; + +const colorBar = [ + "#73d13d", + "#95de64", + "#b7eb8f", + "#d9f7be", + "#f6ffed", + "#fff1f0", + "#ffccc7", + "#ffa39e", + "#ff7875", + "#ff4d4f", +]; + +const ranges = [ + [-999, -0.4], + [-0.4, -0.3], + [-0.3, -0.2], + [-0.2, -0.1], + [-0.1, 0], + [0, 0.1], + [0.1, 0.2], + [0.2, 0.3], + [0.3, 0.4], + [0.4, 999], +]; + +let dataIndex = 0; +const height = 201000; + +// 热通量异常 +function HeatFlux({ position, index }) { + const [lon, lat] = position; + + for (let i = 0; i < ranges.length; i++) { + const start = ranges[i][0]; + const end = ranges[i][1]; + if (fluxData[index] >= start && fluxData[index] <= end) { + dataIndex = i; + break; + } + } + + return ( + + + + + 感热通量数据 + + + ${fluxData[index]} + + + + + 站点坐标 + + ${lon}，${lat} + + + + `} + > + + + ); +} + +export default HeatFlux; diff --git a/src/components/domain/Two/Site/HeatFlux.jsx b/src/components/domain/Two/Site/HeatFlux.jsx index 65e6972..8209d3c 100644 --- a/src/components/domain/Two/Site/HeatFlux.jsx +++ b/src/components/domain/Two/Site/HeatFlux.jsx @@ -1,5 +1,5 @@ -import { Entity, EllipseGraphics } from "resium"; -import { Cartesian3, Color } from "cesium"; +import { Entity, PolylineGraphics } from "resium"; +import { Cartesian3, Color, PolylineArrowMaterialProperty } from "cesium"; const fluxData = [ 0.03256254, -0.23182425, -0.040055223, -0.03476936, -0.40450656, -0.18742515, @@ -18,19 +18,6 @@ const fluxData = [ -0.04151492, -0.1793385, ]; -const colorBar = [ - "#73d13d", - "#95de64", - "#b7eb8f", - "#d9f7be", - "#f6ffed", - "#fff1f0", - "#ffccc7", - "#ffa39e", - "#ff7875", - "#ff4d4f", -]; - const ranges = [ [-999, -0.4], [-0.4, -0.3], @@ -44,8 +31,8 @@ const ranges = [ [0.4, 999], ]; -let dataIndex = 0; -const height = 201000; +const height = 1210000; +let length = height + 510000; // 热通量异常 function HeatFlux({ position, index }) { @@ -55,7 +42,11 @@ function HeatFlux({ position, index }) { const start = ranges[i][0]; const end = ranges[i][1]; if (fluxData[index] >= start && fluxData[index] <= end) { - dataIndex = i; + if (i < 5) { + length = height + (i - 5) * 100000; + } else { + length = height + (i - 4) * 100000; + } break; } } @@ -64,33 +55,19 @@ function HeatFlux({ position, index }) { - - - - 感热通量数据 - - - ${fluxData[index]} - - - - - 站点坐标 - - ${lon}，${lat} - - - - `} > - ); diff --git a/src/components/domain/Two/Site/Rain copy.jsx b/src/components/domain/Two/Site/Rain copy.jsx new file mode 100644 index 0000000..1aa350a --- /dev/null +++ b/src/components/domain/Two/Site/Rain copy.jsx @@ -0,0 +1,97 @@ +import { Entity, EllipseGraphics } from "resium"; +import { Cartesian3, Color } from "cesium"; + +const rainData = [ + 0.25309432, 0.296679, 0.39937696, -0.15093477, 0.17799897, 0.1186297, + 0.07794944, 0.086336374, -0.016019614, -0.10862, 0.026069753, -0.005777068, + -0.04960121, -0.13736366, 0.268846, 0.32549506, 0.16180113, 0.34738356, + 0.21825098, 0.56309533, 0.15624292, 0.1915884, -0.08074772, -0.021623861, + -0.03270335, 0.011358996, -0.09346678, -0.07257225, 0.19685836, -0.004689489, + 0.018297506, 0.089315325, 0.07057168, 0.13153072, 0.036938984, -0.17923261, + 0.3985438, 0.171897, -0.113426015, 0.4553916, 0.1476996, 0.158635, + -0.041355144, 0.14970288, 0.19565174, 0.213287, 0.0603011, 0.35724494, + -0.13986075, 0.16652703, -0.016419323, -0.09197042, -0.04890049, 0.22730026, + 0.4451923, 0.102407545, 0.28357506, 0.259764, 0.2361199, 0.32204336, + 0.39939404, 0.4786999, 0.12142443, -0.1493137, 0.3154582, 0.39657483, + -0.08021964, 0.20489447, 0.26629895, -0.34400544, 0.29385626, 0.15458098, + 0.016143948, 0.04906382, -0.043581244, 0.1752981, -0.18351379, 0.071934514, + 0.10854135, -0.10280543, +]; + +const colorBar = [ + "#ffc53d", + "#ffd666", + "#ffe58f", + "#fff1b8", + "#fffbe6", + "#e6f7ff", + "#bae7ff", + "#91d5ff", + "#69c0ff", + "#40a9ff", +]; + +const ranges = [ + [-999, -0.4], + [-0.4, -0.3], + [-0.3, -0.2], + [-0.2, -0.1], + [-0.1, 0], + [0, 0.1], + [0.1, 0.2], + [0.2, 0.3], + [0.3, 0.4], + [0.4, 999], +]; + +let dataIndex = 0; + +// 降水异常 +function Rain({ position, index }) { + const [lon, lat] = position; + + for (let i = 0; i < ranges.length; i++) { + const start = ranges[i][0]; + const end = ranges[i][1]; + if (rainData[index] >= start && rainData[index] <= end) { + dataIndex = i; + break; + } + } + + return ( + + + + + 青藏高原降水 + + + ${rainData[index]} + + + + + 站点坐标 + + ${lon}，${lat} + + + + `} + > + + + ); +} + +export default Rain; diff --git a/src/components/domain/Two/Site/Rain.jsx b/src/components/domain/Two/Site/Rain.jsx index 1aa350a..eec9460 100644 --- a/src/components/domain/Two/Site/Rain.jsx +++ b/src/components/domain/Two/Site/Rain.jsx @@ -1,5 +1,5 @@ -import { Entity, EllipseGraphics } from "resium"; -import { Cartesian3, Color } from "cesium"; +import { Entity, PolylineGraphics } from "resium"; +import { Cartesian3, Color, PolylineArrowMaterialProperty } from "cesium"; const rainData = [ 0.25309432, 0.296679, 0.39937696, -0.15093477, 0.17799897, 0.1186297, @@ -18,19 +18,6 @@ const rainData = [ 0.10854135, -0.10280543, ]; -const colorBar = [ - "#ffc53d", - "#ffd666", - "#ffe58f", - "#fff1b8", - "#fffbe6", - "#e6f7ff", - "#bae7ff", - "#91d5ff", - "#69c0ff", - "#40a9ff", -]; - const ranges = [ [-999, -0.4], [-0.4, -0.3], @@ -44,7 +31,8 @@ const ranges = [ [0.4, 999], ]; -let dataIndex = 0; +const height = 400000; +let length = height + 510000; // 降水异常 function Rain({ position, index }) { @@ -54,7 +42,11 @@ function Rain({ position, index }) { const start = ranges[i][0]; const end = ranges[i][1]; if (rainData[index] >= start && rainData[index] <= end) { - dataIndex = i; + if (i < 5) { + length = height + (i - 5) * 100000; + } else { + length = height + (i - 4) * 100000; + } break; } } @@ -63,32 +55,19 @@ function Rain({ position, index }) { - - - - 青藏高原降水 - - - ${rainData[index]} - - - - - 站点坐标 - - ${lon}，${lat} - - - - `} > - ); diff --git a/src/components/domain/Two/Site/index.jsx b/src/components/domain/Two/Site/index.jsx index 8f4df52..def881d 100644 --- a/src/components/domain/Two/Site/index.jsx +++ b/src/components/domain/Two/Site/index.jsx @@ -15,10 +15,6 @@ const positions = [ ]; function Sites() { - // const { showSite } = useSelector((state) => state.data); - - // if (!showSite) return <>; - return chunk(positions, 2).map((position, index) => { return ; }); diff --git a/src/components/domain/Two/SiteLegend.jsx b/src/components/domain/Two/SiteLegend.jsx new file mode 100644 index 0000000..e0548ba --- /dev/null +++ b/src/components/domain/Two/SiteLegend.jsx @@ -0,0 +1,46 @@ +import rain from "@/assets/rain.png"; +import heatflux from "@/assets/heatflux.png"; +import styles from "./index.module.less"; + +function SiteLegend() { + return ( +
+
+
+ rain-increase +
+
降水异常增加
+
+
+
+ rain-decrease +
+
降水异常降低
+
+
+
+ heatflux-increase +
+
感热通量异常增加
+
+
+
+ heatflux-decrease +
+
感热通量异常降低
+
+
+ ); +} + +export default SiteLegend; diff --git a/src/components/domain/Two/WavePoints.jsx b/src/components/domain/Two/WavePoints.jsx index 4678205..ca4024a 100644 --- a/src/components/domain/Two/WavePoints.jsx +++ b/src/components/domain/Two/WavePoints.jsx @@ -4,8 +4,8 @@ import WavePoint from "@/components/common/WavePoint"; export default function WavePoints() { return ( - - + + ); } diff --git a/src/components/domain/Two/index.jsx b/src/components/domain/Two/index.jsx index dcf8dda..3c850a2 100644 --- a/src/components/domain/Two/index.jsx +++ b/src/components/domain/Two/index.jsx @@ -4,7 +4,6 @@ import CustomClock from "@/components/common/CustomClock"; import TextInfoPanel from "@/components/common/TextInfoPanel"; import CustomFlyTo from "./CustomFlyTo"; import Point from "./Point"; -import PlateauPolygon from "./PlateauPolygon"; import WavePoints from "./WavePoints"; import Legend from "./Legend"; import IndianOceanSST from "./IndiaOceanSST"; @@ -13,9 +12,11 @@ import Circles from "./Circles"; import SurfaceAnomaly from "./SurfaceAnomaly"; import MoistureTransport from "./MoistureTransport"; import Sites from "./Site"; +import SiteLegend from "./SiteLegend"; import Labels from "./Labels"; export default function DomainTwo() { + console.log("111 :>> ", 111); return (
两极协同—南极涛动有效调节青藏高原降水和加热
@@ -29,8 +30,8 @@ export default function DomainTwo() { - +
diff --git a/src/components/domain/Two/index.module.less b/src/components/domain/Two/index.module.less new file mode 100644 index 0000000..fa98b44 --- /dev/null +++ b/src/components/domain/Two/index.module.less @@ -0,0 +1,24 @@ +.siteLegend :global { + position: absolute; + width: 200px; + height: 300px; + right: 12px; + bottom: 14px; + display: grid; + background-color: #1f485690; + border: 1px solid #04fbfd; + border-radius: 8px; + padding: 8px; + color: white; + user-select: none; + + .site-legend-item { + display: flex; + align-items: center; + gap: 8px; + + .site-legend-item-name { + font-weight: 700; + } + } +} diff --git a/src/components/home/Layout/NavBar.jsx b/src/components/home/Layout/NavBar.jsx index d064e3c..23c76ea 100644 --- a/src/components/home/Layout/NavBar.jsx +++ b/src/components/home/Layout/NavBar.jsx @@ -1,12 +1,10 @@ import { useCallback } from "react"; import { useNavigate } from "react-router-dom"; -import { useDispatch } from "react-redux"; import { createFromIconfontCN } from "@ant-design/icons"; import NavBarButton from "./NavBarButton"; function NavBar() { const navigate = useNavigate(); - const dispatch = useDispatch(); const MyIcon = createFromIconfontCN({ scriptUrl: "//at.alicdn.com/t/c/font_4281629_4lq551rfhki.js", @@ -15,13 +13,8 @@ function NavBar() { const navigateHandler = useCallback( (type) => { navigate(`/map/${type}`, { replace: true }); - if (type !== 1 && type !== 2) { - dispatch.data.update({ - toolbar: { showPanel: true }, - }); - } }, - [navigate, dispatch] + [navigate] ); return ( diff --git a/src/components/map/Layout/index.jsx b/src/components/map/Layout/index.jsx index a7cc3ea..5efb9c2 100644 --- a/src/components/map/Layout/index.jsx +++ b/src/components/map/Layout/index.jsx @@ -1,8 +1,9 @@ import { Entity, PointGraphics, Viewer } from "resium"; -import styles from "./index.module.less"; import { Cartesian3, Color } from "cesium"; import Picker from "./Picker"; import HeadingPitchRoll from "./HeadingPitchRoll"; +import CustomToolbar from "@/components/common/CustomToolbar"; +import styles from "./index.module.less"; function MapLayout({ children, className, ...rest }) { return ( @@ -24,6 +25,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 0598a99..590f2e4 100644 --- a/src/components/map/Layout/index.module.less +++ b/src/components/map/Layout/index.module.less @@ -28,16 +28,6 @@ font-weight: 700; } - .toolbar { - position: absolute; - top: 0; - right: 12px; - display: flex; - gap: 8px; - width: 370px; - height: 100%; - } - .left-panel { position: absolute; top: 84px; @@ -67,12 +57,13 @@ text-indent: 2em; line-height: 1.5; z-index: 999; + border-radius: 8px; } } .right-panel { position: absolute; - top: 84px; + // top: 84px; right: 12px; bottom: 12px; width: 450px; @@ -96,6 +87,7 @@ border: 1px solid #04fbfd; color: #02f9ff !important; background-color: #1f485690; + border-radius: 8px; .ant-form-item-label { label { @@ -133,6 +125,7 @@ color: #02f9ff !important; background-color: #1f485690; transition: all 0.3s ease-in-out; + border-radius: 8px; } .highlight { @@ -173,7 +166,7 @@ .legend { position: absolute; - bottom: 40px; + bottom: 12px; width: 50%; left: 25%; // height: 40px; diff --git a/src/models/data.js b/src/models/data.js index 1771689..194dbf9 100644 --- a/src/models/data.js +++ b/src/models/data.js @@ -1,36 +1,9 @@ export const data = { - state: { - showSite: false, - toolbar: {}, - imageLayer: { - labrador: undefined, - indianOcean: undefined, - }, - }, + state: {}, reducers: { update(state, payload) { return { ...state, ...payload }; }, - updateToolbar(state, payload) { - const { toolbar } = state; - return { ...state, toolbar: { ...toolbar, ...payload } }; - }, - updateImageLayer(state, payload) { - const { imageLayer } = state; - return { ...state, imageLayer: { ...imageLayer, ...payload } }; - }, - resetState(state, payload) { - return { - showSite: false, - toolbar: { - showPanel: undefined, - }, - imageLayer: { - labrador: undefined, - indianOcean: undefined, - }, - }; - }, }, effects: (dispatch) => ({}), };