diff --git a/src/assets/High.png b/src/assets/High.png deleted file mode 100644 index cda3936..0000000 Binary files a/src/assets/High.png and /dev/null differ diff --git a/src/assets/Low.png b/src/assets/Low.png deleted file mode 100644 index cc61974..0000000 Binary files a/src/assets/Low.png and /dev/null differ diff --git a/src/assets/arrow_round_reverse.glb b/src/assets/arrow_round_reverse.glb new file mode 100644 index 0000000..937235e Binary files /dev/null and b/src/assets/arrow_round_reverse.glb differ diff --git a/src/assets/cyclone.jpg b/src/assets/cyclone.jpg new file mode 100644 index 0000000..59d0539 Binary files /dev/null and b/src/assets/cyclone.jpg differ diff --git a/src/assets/cyclone.png b/src/assets/cyclone.png deleted file mode 100644 index 3bf61e0..0000000 Binary files a/src/assets/cyclone.png and /dev/null differ diff --git a/src/assets/updraft.png b/src/assets/updraft.png deleted file mode 100644 index 2c10cb0..0000000 Binary files a/src/assets/updraft.png and /dev/null differ diff --git a/src/components/common/ChartPanel/index.jsx b/src/components/common/ChartPanel/index.jsx index 1f3ff7c..67ce840 100644 --- a/src/components/common/ChartPanel/index.jsx +++ b/src/components/common/ChartPanel/index.jsx @@ -7,7 +7,7 @@ export default function ChartPanel({ option, className }) {
{ - // if (!clock.shouldAnimate) return; - // }} + clockRange={ClockRange.CLAMPED} /> ); } diff --git a/src/components/common/WavePoint/index.jsx b/src/components/common/WavePoint/index.jsx index a4a97a0..a038211 100644 --- a/src/components/common/WavePoint/index.jsx +++ b/src/components/common/WavePoint/index.jsx @@ -134,7 +134,7 @@ function WavePoint({ outlineWidth={2} style={LabelStyle.FILL_AND_OUTLINE} eyeOffset={new Cartesian2(0, 200000)} - />{" "} + /> )} diff --git a/src/components/domain/One/Barotorpic.jsx b/src/components/domain/One/Barotorpic.jsx index a18b571..d5c9c4d 100644 --- a/src/components/domain/One/Barotorpic.jsx +++ b/src/components/domain/One/Barotorpic.jsx @@ -25,7 +25,8 @@ function Barotropic() { { viewer.clock.shouldAnimate = true; setTimeout(function () { diff --git a/src/components/domain/One/Cyclone.jsx b/src/components/domain/One/Cyclone.jsx index 5b373c2..a34c705 100644 --- a/src/components/domain/One/Cyclone.jsx +++ b/src/components/domain/One/Cyclone.jsx @@ -1,6 +1,7 @@ import { useCallback } from "react"; import { Entity, ModelGraphics, useCesium } from "resium"; import arrowRound from "@/assets/arrow_round.glb"; +import arrowRoundReverse from "@/assets/arrow_round_reverse.glb"; import { CallbackProperty, Cartesian3, Color, ColorBlendMode } from "cesium"; let totalSeconds = 60; @@ -50,28 +51,28 @@ function Cyclone() { }, [viewer]); const anticycloneColor = Color.fromCssColorString("#f70000"); - const cycloneColor = Color.fromCssColorString("#00AC4D"); + const cycloneColor = Color.fromCssColorString("#0000ff"); const cycloneList = [ { type: "anticyclone", showTime: 5, - position: Cartesian3.fromDegrees(-62, 69, height), + position: Cartesian3.fromDegrees(-59, 60, height), }, { type: "cyclone", showTime: 7.5, - position: Cartesian3.fromDegrees(-45, 59, height), + position: Cartesian3.fromDegrees(-38, 55, height), }, { type: "anticyclone", showTime: 10, - position: Cartesian3.fromDegrees(-20, 55, height), + position: Cartesian3.fromDegrees(-20, 50, height), }, { type: "cyclone", showTime: 12.5, - position: Cartesian3.fromDegrees(5, 53, height), + position: Cartesian3.fromDegrees(5.5, 49, height), }, { type: "anticyclone", @@ -81,7 +82,7 @@ function Cyclone() { { type: "cyclone", showTime: 17.5, - position: Cartesian3.fromDegrees(46, 46, height), + position: Cartesian3.fromDegrees(46, 47, height), }, { type: "anticyclone", @@ -91,22 +92,26 @@ function Cyclone() { { type: "cyclone", showTime: 22.5, - position: Cartesian3.fromDegrees(81, 46.5, height), + position: Cartesian3.fromDegrees(77.5, 42.5, height), }, { type: "anticyclone", showTime: 25, - position: Cartesian3.fromDegrees(98, 48, height), + position: Cartesian3.fromDegrees(95, 36, height), }, { type: "anticyclone", showTime: 25, - position: Cartesian3.fromDegrees(98, 48, 0), + position: Cartesian3.fromDegrees(95, 36, 0), }, ]; return cycloneList.map((cyclone, index) => { const { type, showTime, position } = cyclone; + const arrow = type === "anticyclone" ? arrowRound : arrowRoundReverse; + const color = type === "anticyclone" ? anticycloneColor : cycloneColor; + const minimumPixelSize = type === "anticyclone" ? 128 : 98; + return ( diff --git a/src/components/domain/One/EntityLegend.jsx b/src/components/domain/One/EntityLegend.jsx index 2ee3fbe..9a3ba96 100644 --- a/src/components/domain/One/EntityLegend.jsx +++ b/src/components/domain/One/EntityLegend.jsx @@ -1,6 +1,6 @@ -import cyclone from "@/assets/cyclone.png"; +import cyclone from "@/assets/cyclone.jpg"; import anticyclone from "@/assets/anticyclone.png"; -import updraft from "@/assets/updraft.png"; +import updraft from "@/assets/Heatflux.png"; import waterwapor from "@/assets/waterwapor.png"; function EntityLegend() { @@ -11,13 +11,13 @@ function EntityLegend() {
Rossby wave path
-
+
anticyclone
-
+
updraft
@@ -29,7 +29,7 @@ function EntityLegend() {
barotroptic structure
-
+
cyclone
diff --git a/src/components/domain/One/Labels.jsx b/src/components/domain/One/Labels.jsx index 6401346..02f7c63 100644 --- a/src/components/domain/One/Labels.jsx +++ b/src/components/domain/One/Labels.jsx @@ -1,5 +1,21 @@ -import { Entity, LabelGraphics, useCesium } from "resium"; -import { Cartesian2, Cartesian3, Color, LabelStyle } from "cesium"; +import { + CorridorGraphics, + Entity, + LabelGraphics, + PolylineGraphics, + useCesium, +} from "resium"; +import { + CallbackProperty, + Cartesian2, + Cartesian3, + Color, + ColorBlendMode, + CornerType, + LabelStyle, + Material, + PolylineArrowMaterialProperty, +} from "cesium"; import { Fragment, useCallback, useState } from "react"; import { useInterval } from "ahooks"; @@ -33,17 +49,6 @@ function Labels() { return ( - - - - + + - + ); diff --git a/src/components/domain/Two/Circles.jsx b/src/components/domain/Two/Circles.jsx index e83d93c..e388db5 100644 --- a/src/components/domain/Two/Circles.jsx +++ b/src/components/domain/Two/Circles.jsx @@ -1,10 +1,10 @@ import { Fragment, useState } from "react"; import { Entity, - EllipsoidGraphics, useCesium, PolylineGraphics, LabelGraphics, + ModelGraphics, } from "resium"; import { useInterval } from "ahooks"; import { @@ -14,43 +14,36 @@ import { LabelStyle, PolylineDashMaterialProperty, Cartesian2, + ColorBlendMode, } from "cesium"; +import arrowRound from "@/assets/arrow_round.glb"; +import arrowRoundReverse from "@/assets/arrow_round_reverse.glb"; -const lowCircle = ( - -); - -const highCircle = ( - -); - -// const labelText={ -// '5月南极涛动','Rossby波列' , '印度洋海温异常（信号存储）', '6月青藏高原降水（80个站点）和加热' -// } +const anticycloneColor = Color.fromCssColorString("#f70000"); +const cycloneColor = Color.fromCssColorString("#0000ff"); function Circles() { const { viewer } = useCesium(); const Circle = ({ id, lon, lat, isLow, showTime }) => { - const circle = isLow ? lowCircle : highCircle; const [show, setShow] = useState(false); + const arrow = !isLow ? arrowRound : arrowRoundReverse; + const color = !isLow ? anticycloneColor : cycloneColor; + const minimumPixelSize = !isLow ? 128 : 98; + + const circle = ( + + ); useInterval(() => { const { startTime, currentTime, shouldAnimate } = viewer.clock; - const _time = Math.floor( - currentTime.secondsOfDay - startTime.secondsOfDay + const _time = (currentTime.secondsOfDay - startTime.secondsOfDay).toFixed( + 1 ); if (!shouldAnimate) return; if (_time >= showTime) { @@ -123,27 +116,55 @@ function Circles() { + + + +
-
+
low
Low
@@ -26,7 +26,7 @@ function EntityLegend() {
anti-Hadley cell
-
+
high
High
diff --git a/src/components/domain/Two/HadleyCell.jsx b/src/components/domain/Two/HadleyCell.jsx new file mode 100644 index 0000000..34b3965 --- /dev/null +++ b/src/components/domain/Two/HadleyCell.jsx @@ -0,0 +1,56 @@ +import { Cartesian3, Color, PolylineArrowMaterialProperty } from "cesium"; +import { Fragment } from "react"; +import { Entity, PolylineGraphics } from "resium"; + +export default function HadleyCell() { + return ( + + {/* 右下部分 */} + {/* + + + + + */} + + + + {/* 左上部分 */} + + + + + ); +} diff --git a/src/components/domain/Two/Point.jsx b/src/components/domain/Two/Point.jsx index 395a32f..b82a7e4 100644 --- a/src/components/domain/Two/Point.jsx +++ b/src/components/domain/Two/Point.jsx @@ -16,9 +16,13 @@ import { const dataAntarcticaToQTP = [ { longitude: -110, latitude: -60, height: 0, time: 0 }, { longitude: -110, latitude: -60, height: 1000000, time: 2 }, + { longitude: -70, latitude: -64, height: 1000000, time: 4.5 }, { longitude: -30, latitude: -55, height: 1000000, time: 7 }, + { longitude: 0, latitude: -52.5, height: 1000000, time: 9.5 }, { longitude: 30, latitude: -40, height: 1000000, time: 12 }, + { longitude: 45.5, latitude: -39, height: 1000000, time: 14 }, { longitude: 65, latitude: -35, height: 1000000, time: 16 }, + { longitude: 80, latitude: -33.5, height: 1000000, time: 18 }, { longitude: 95, latitude: -30, height: 1000000, time: 20 }, { longitude: 95, latitude: -30, height: 0, time: 25 }, ]; diff --git a/src/components/domain/Two/SiteLegend.jsx b/src/components/domain/Two/SiteLegend.jsx index dce5fb2..8beddb2 100644 --- a/src/components/domain/Two/SiteLegend.jsx +++ b/src/components/domain/Two/SiteLegend.jsx @@ -31,13 +31,20 @@ function SiteLegend() { style={{ transform: "rotate(180deg)" }} />
-
感热通量异常增加
+
+ 感热通量 +
+ 异常增加 +
heatflux-decrease
-
感热通量异常降低
+
+ 感热通量
+ 异常降低 +
); diff --git a/src/components/domain/Two/index.jsx b/src/components/domain/Two/index.jsx index 595e615..5e99427 100644 --- a/src/components/domain/Two/index.jsx +++ b/src/components/domain/Two/index.jsx @@ -15,6 +15,7 @@ import Sites from "./Site"; import SiteLegend from "./SiteLegend"; import Labels from "./Labels"; import TimeLinePanel from "./TimeLinePanel"; +import HadleyCell from "./HadleyCell"; export default function DomainTwo() { return ( @@ -37,6 +38,7 @@ export default function DomainTwo() {
+ {/* */} ); diff --git a/src/components/domain/Two/index.module.less b/src/components/domain/Two/index.module.less index 6b77dd2..cfc3058 100644 --- a/src/components/domain/Two/index.module.less +++ b/src/components/domain/Two/index.module.less @@ -18,6 +18,7 @@ gap: 8px; .site-legend-item-name { + font-size: 20px; font-weight: 700; } }