From cc72360bab289202a1d990adf8d8a3e27cd0e423 Mon Sep 17 00:00:00 2001
From: baol <j2eer@163.com>
Date: Mon, 6 Nov 2023 13:41:49 +0800
Subject: [PATCH] refactor

---
 src/components/common/LabelEntity.jsx         |   4 +-
 .../domain/Three/SceneTwo/Circles.jsx         | 163 +++++++++---------
 .../domain/Three/SceneTwo/CustomFlyTo.jsx     |  20 ++-
 .../domain/Three/SceneTwo/Labels.jsx          |  36 ++--
 .../domain/Three/SceneTwo/Places.jsx          |  36 ++++
 .../domain/Three/SceneTwo/Point.jsx           |  14 +-
 .../domain/Three/SceneTwo/TimelineLayer.jsx   |  29 ++++
 .../domain/Three/SceneTwo/index.jsx           |  39 +++--
 .../domain/Three/SceneTwo/index.module.less   |   5 +-
 9 files changed, 218 insertions(+), 128 deletions(-)
 create mode 100644 src/components/domain/Three/SceneTwo/Places.jsx
 create mode 100644 src/components/domain/Three/SceneTwo/TimelineLayer.jsx

diff --git a/src/components/common/LabelEntity.jsx b/src/components/common/LabelEntity.jsx
index 58c55e3..c3c50d1 100644
--- a/src/components/common/LabelEntity.jsx
+++ b/src/components/common/LabelEntity.jsx
@@ -16,8 +16,8 @@ export default function LabelEntity({ showTime, text, position, eyeOffset }) {
   }, [replayVersion]);
 
   const [font, { toggle: fontToggle }] = useToggle(
-    "24px Helvetica",
-    "bold 32px Helvetica"
+    "bold 32px Helvetica",
+    "24px Helvetica"
   );
   const [fillColor, { toggle: colorToggle }] = useToggle(
     Color.fromCssColorString("#04fbfd").withAlpha(0.9),
diff --git a/src/components/domain/Three/SceneTwo/Circles.jsx b/src/components/domain/Three/SceneTwo/Circles.jsx
index 8455da9..d44a22c 100644
--- a/src/components/domain/Three/SceneTwo/Circles.jsx
+++ b/src/components/domain/Three/SceneTwo/Circles.jsx
@@ -22,131 +22,134 @@ import arrowRoundReverse from "@/assets/arrow_round_reverse.glb";
 const anticycloneColor = Color.fromCssColorString("#f70000");
 const cycloneColor = Color.fromCssColorString("#0000ff");
 
-function Circles() {
+const Circle = ({ id, lon, lat, isLow, showTime, labelText }) => {
   const { viewer } = useCesium();
 
-  const Circle = ({ id, lon, lat, isLow, showTime, labelText }) => {
-    const [show, setShow] = useState(false);
-    const arrow = !isLow ? arrowRound : arrowRoundReverse;
-    const color = !isLow ? anticycloneColor : cycloneColor;
-    const minimumPixelSize = !isLow ? 128 : 98;
+  const [show, setShow] = useState(false);
+  const arrow = !isLow ? arrowRound : arrowRoundReverse;
+  const color = !isLow ? anticycloneColor : cycloneColor;
+  const minimumPixelSize = !isLow ? 128 : 98;
 
-    const circle = (
-      <ModelGraphics
-        uri={arrow}
-        minimumPixelSize={minimumPixelSize}
-        color={color}
-        colorBlendMode={ColorBlendMode.REPLACE}
-      />
+  const circle = (
+    <ModelGraphics
+      uri={arrow}
+      minimumPixelSize={minimumPixelSize}
+      color={color}
+      colorBlendMode={ColorBlendMode.REPLACE}
+    />
+  );
+
+  useInterval(() => {
+    const { startTime, currentTime, shouldAnimate } = viewer.clock;
+    const _time = (currentTime.secondsOfDay - startTime.secondsOfDay).toFixed(
+      1
     );
+    if (!shouldAnimate) return;
+    if (_time >= showTime) {
+      setShow(true);
+    } else {
+      if (!show) return;
+      setShow(false);
+    }
+  }, 300);
 
-    useInterval(() => {
-      const { startTime, currentTime, shouldAnimate } = viewer.clock;
-      const _time = (currentTime.secondsOfDay - startTime.secondsOfDay).toFixed(
-        1
-      );
-      if (!shouldAnimate) return;
-      if (_time >= showTime) {
-        setShow(true);
-      } else {
-        if (!show) return;
-        setShow(false);
-      }
-    }, 300);
+  if (!show) return <></>;
 
-    if (!show) return <></>;
-
-    return (
-      <Fragment>
-        <Entity
-          id={`${id}-up`}
-          position={Cartesian3.fromDegrees(lon, lat, 1000000)}
-        >
-          {circle}
-          <Entity id={`${id}-connection-line`}>
-            <PolylineGraphics
-              positions={Cartesian3.fromDegreesArrayHeights([
-                lon,
-                lat,
-                1000000,
-                lon,
-                lat,
-                0,
-              ])}
-              width={2}
-              material={
-                new PolylineDashMaterialProperty({
-                  color: Color.WHITE,
-                  dashLength: 4,
-                })
-              }
-            />
-          </Entity>
-        </Entity>
-        <Entity
-          id={`${id}-down`}
-          position={Cartesian3.fromDegrees(lon, lat, 0)}
-        >
-          {circle}
-        </Entity>
-        {/* <Entity position={Cartesian3.fromDegrees(lon, lat, 0)}>
-          <LabelGraphics
-            text={labelText || "Rossby波列"}
-            font="24px Helvetica"
-            fillColor={Color.fromCssColorString("#04fbfd")}
-            outlineColor={Color.BLACK}
-            outlineWidth={2}
-            style={LabelStyle.FILL_AND_OUTLINE}
-            eyeOffset={new Cartesian2(0, 500000)}
+  return (
+    <Fragment>
+      <Entity
+        id={`${id}-up`}
+        position={Cartesian3.fromDegrees(lon, lat, 1000000)}
+      >
+        {circle}
+        <Entity id={`${id}-connection-line`}>
+          <PolylineGraphics
+            positions={Cartesian3.fromDegreesArrayHeights([
+              lon,
+              lat,
+              1000000,
+              lon,
+              lat,
+              0,
+            ])}
+            width={2}
+            material={
+              new PolylineDashMaterialProperty({
+                color: Color.WHITE,
+                dashLength: 4,
+              })
+            }
           />
-        </Entity> */}
-      </Fragment>
-    );
-  };
+        </Entity>
+      </Entity>
+      <Entity id={`${id}-down`} position={Cartesian3.fromDegrees(lon, lat, 0)}>
+        {circle}
+      </Entity>
+      <Entity position={Cartesian3.fromDegrees(lon, lat, 0)}>
+        <LabelGraphics
+          text={labelText || "Rossby波列"}
+          font="24px Helvetica"
+          fillColor={Color.fromCssColorString("#04fbfd")}
+          outlineColor={Color.BLACK}
+          outlineWidth={2}
+          style={LabelStyle.FILL_AND_OUTLINE}
+          eyeOffset={new Cartesian2(0, 500000)}
+        />
+      </Entity>
+    </Fragment>
+  );
+};
 
+function Circles() {
   return (
     <Fragment>
       <Circle
         isLow={true}
         id={`low-circle-0`}
-        showTime={2}
+        showTime={12}
         lon={-29}
         lat={-33}
+        labelText="南热带大西洋"
       />
       <Circle
         isLow={false}
         id={`high-circle-2`}
-        showTime={6}
+        showTime={16}
         lon={18}
         lat={-50}
+        labelText="拉扎列夫海以北"
       />
       <Circle
         isLow={true}
         id={`low-circle-1`}
-        showTime={10}
+        showTime={20}
         lon={80}
         lat={-50}
+        labelText="南印度洋"
       />
       <Circle
         isLow={false}
         id={`high-circle-3`}
-        showTime={14}
+        showTime={24}
         lon={157}
         lat={-35}
+        labelText="塔斯曼海"
       />
       <Circle
         isLow={true}
         id={`low-circle-2`}
-        showTime={18}
+        showTime={28}
         lon={178}
         lat={-50}
+        labelText="罗斯海以北"
       />
       <Circle
         isLow={false}
         id={`high-circle-4`}
-        showTime={22}
+        showTime={32}
         lon={-130}
         lat={-65}
+        labelText="阿蒙森海"
       />
     </Fragment>
   );
diff --git a/src/components/domain/Three/SceneTwo/CustomFlyTo.jsx b/src/components/domain/Three/SceneTwo/CustomFlyTo.jsx
index a33e11c..bf55291 100644
--- a/src/components/domain/Three/SceneTwo/CustomFlyTo.jsx
+++ b/src/components/domain/Three/SceneTwo/CustomFlyTo.jsx
@@ -9,6 +9,23 @@ export default function CustomFlyTo() {
   const { replayVersion } = useSelector((state) => state.data);
 
   function cameraFlyToLine() {
+    const step00 = {
+      destination: Cartesian3.fromDegrees(-29, 90, 10000000),
+      duration: 5,
+      complete: () => {
+        viewer.clock.shouldAnimate = true;
+        camera.flyTo(step0);
+      },
+      easingFunction: EasingFunction.LINEAR_NONE,
+    };
+    const step0 = {
+      destination: Cartesian3.fromDegrees(-29, -32, 10000000),
+      duration: 10,
+      complete: () => {
+        camera.flyTo(step1);
+      },
+      easingFunction: EasingFunction.LINEAR_NONE,
+    };
     const step1 = {
       destination: Cartesian3.fromDegrees(-29, -54, 10000000),
       duration: 3,
@@ -18,7 +35,6 @@ export default function CustomFlyTo() {
         roll: 0,
       },
       complete: () => {
-        viewer.clock.shouldAnimate = true;
         setTimeout(() => {
           camera.flyTo(step2);
         }, 2000);
@@ -95,7 +111,7 @@ export default function CustomFlyTo() {
       easingFunction: EasingFunction.LINEAR_NONE,
     };
 
-    camera.flyTo(step1);
+    camera.flyTo(step00);
   }
   cameraFlyToLine();
 
diff --git a/src/components/domain/Three/SceneTwo/Labels.jsx b/src/components/domain/Three/SceneTwo/Labels.jsx
index 25853d6..78b835d 100644
--- a/src/components/domain/Three/SceneTwo/Labels.jsx
+++ b/src/components/domain/Three/SceneTwo/Labels.jsx
@@ -6,39 +6,27 @@ export default function Labels() {
   return (
     <Fragment>
       <LabelEntity
-        showTime={2}
-        text={"南热带大西洋"}
-        position={Cartesian3.fromDegrees(-29, -33, 0)}
+        showTime={8}
+        text={"大西洋经向模AMM正位相"}
+        position={Cartesian3.fromDegrees(-29, -25, 0)}
         eyeOffset={new Cartesian2(0, 1000000)}
       />
       <LabelEntity
-        showTime={6}
-        text={"拉扎列夫海以北"}
-        position={Cartesian3.fromDegrees(18, -50, 0)}
+        showTime={20}
+        text={"AMM激发的Rossby波列"}
+        position={Cartesian3.fromDegrees(9, -33, 0)}
         eyeOffset={new Cartesian2(0, 1000000)}
       />
       <LabelEntity
-        showTime={10}
-        text={"南印度洋"}
-        position={Cartesian3.fromDegrees(80, -50, 0)}
+        showTime={28}
+        text={"反气旋环流"}
+        position={Cartesian3.fromDegrees(-160, -50, 0)}
         eyeOffset={new Cartesian2(0, 1000000)}
       />
       <LabelEntity
-        showTime={14}
-        text={"塔斯曼海"}
-        position={Cartesian3.fromDegrees(157, -35, 0)}
-        eyeOffset={new Cartesian2(0, 1000000)}
-      />
-      <LabelEntity
-        showTime={18}
-        text={"罗斯海以北"}
-        position={Cartesian3.fromDegrees(178, -50, 0)}
-        eyeOffset={new Cartesian2(0, 1000000)}
-      />
-      <LabelEntity
-        showTime={22}
-        text={"阿蒙森海"}
-        position={Cartesian3.fromDegrees(-130, -65, 0)}
+        showTime={33}
+        text={"南极变冷"}
+        position={Cartesian3.fromDegrees(-106, -80, 0)}
         eyeOffset={new Cartesian2(0, 1000000)}
       />
     </Fragment>
diff --git a/src/components/domain/Three/SceneTwo/Places.jsx b/src/components/domain/Three/SceneTwo/Places.jsx
new file mode 100644
index 0000000..295a671
--- /dev/null
+++ b/src/components/domain/Three/SceneTwo/Places.jsx
@@ -0,0 +1,36 @@
+import { useState, Fragment } from "react";
+import { Entity, useCesium, LabelGraphics } from "resium";
+import { useInterval } from "ahooks";
+import {
+  Cartesian3,
+  Color,
+  Math as CesiumMath,
+  LabelStyle,
+  Cartesian2,
+} from "cesium";
+
+function Place({ lon, lat, labelText }) {
+  return (
+    <Entity position={Cartesian3.fromDegrees(lon, lat, 0)}>
+      <LabelGraphics
+        text={labelText || "Rossby波列"}
+        font="24px Helvetica"
+        fillColor={Color.fromCssColorString("#04fbfd")}
+        outlineColor={Color.BLACK}
+        outlineWidth={2}
+        style={LabelStyle.FILL_AND_OUTLINE}
+        eyeOffset={new Cartesian2(0, 500000)}
+      />
+    </Entity>
+  );
+}
+
+export default function Places({}) {
+  return (
+    <Fragment>
+      <Place id="place-1" lon={-29} lat={90} labelText="北极" />
+      <Place id="place-2" lon={-29} lat={45} labelText="北大西洋" />
+      <Place id="place-3" lon={-29} lat={-45} labelText="南大西洋" />
+    </Fragment>
+  );
+}
diff --git a/src/components/domain/Three/SceneTwo/Point.jsx b/src/components/domain/Three/SceneTwo/Point.jsx
index 9ef9297..5eaf786 100644
--- a/src/components/domain/Three/SceneTwo/Point.jsx
+++ b/src/components/domain/Three/SceneTwo/Point.jsx
@@ -14,13 +14,13 @@ import {
 } from "cesium";
 
 const data = [
-  { longitude: -29, latitude: -33, height: 0, time: 0 },
-  { longitude: -29, latitude: -33, height: 1000000, time: 2 },
-  { longitude: 18, latitude: -50, height: 1000000, time: 6 },
-  { longitude: 80, latitude: -50, height: 1000000, time: 10 },
-  { longitude: 157, latitude: -35, height: 1000000, time: 14 },
-  { longitude: 178, latitude: -50, height: 1000000, time: 18 },
-  { longitude: -130, latitude: -65, height: 1000000, time: 22 },
+  { longitude: -29, latitude: -33, height: 0, time: 10 },
+  { longitude: -29, latitude: -33, height: 1000000, time: 12 },
+  { longitude: 18, latitude: -50, height: 1000000, time: 16 },
+  { longitude: 80, latitude: -50, height: 1000000, time: 20 },
+  { longitude: 157, latitude: -35, height: 1000000, time: 24 },
+  { longitude: 178, latitude: -50, height: 1000000, time: 28 },
+  { longitude: -130, latitude: -65, height: 1000000, time: 32 },
 ];
 
 function Point() {
diff --git a/src/components/domain/Three/SceneTwo/TimelineLayer.jsx b/src/components/domain/Three/SceneTwo/TimelineLayer.jsx
new file mode 100644
index 0000000..26b79bd
--- /dev/null
+++ b/src/components/domain/Three/SceneTwo/TimelineLayer.jsx
@@ -0,0 +1,29 @@
+import { useState } from "react";
+import { useCesium } from "resium";
+import { useInterval } from "ahooks";
+
+import ViewerImageLayer from "../SceneOne/ViewerImageLayer";
+
+export default function TimelineLayer({ name, opacity, sTime, eTime }) {
+  const [show, setShow] = useState(false);
+  const { viewer } = useCesium();
+
+  useInterval(() => {
+    const { startTime, currentTime, shouldAnimate } = viewer.clock;
+    const _time = (currentTime.secondsOfDay - startTime.secondsOfDay).toFixed(
+      1
+    );
+    console.log(sTime, eTime, _time);
+    if (!shouldAnimate) return;
+    if (_time >= sTime && _time <= eTime) {
+      setShow(true);
+    } else {
+      if (!show) return;
+      setShow(false);
+    }
+  }, 300);
+
+  if (!show) return <></>;
+
+  return <ViewerImageLayer name={name} opacity={opacity} />;
+}
diff --git a/src/components/domain/Three/SceneTwo/index.jsx b/src/components/domain/Three/SceneTwo/index.jsx
index ad05d5a..bcbc8a8 100644
--- a/src/components/domain/Three/SceneTwo/index.jsx
+++ b/src/components/domain/Three/SceneTwo/index.jsx
@@ -1,13 +1,12 @@
 import MapLayout from "@/components/map/Layout";
 import Legend from "./Legend";
 import CustomFlyTo from "./CustomFlyTo";
-import HGTImageLayer from "./HGTImageLayer";
 import Point from "./Point";
 import Circles from "./Circles";
-import CustomChartPanel from "./CustomChartPanel";
 import Labels from "./Labels";
 import ReplayButton from "./ReplayButton";
-import ViewerImageLayer from "../SceneOne/ViewerImageLayer";
+import Places from "./Places";
+import TimelineLayer from "./TimelineLayer";
 
 function SceneTwo() {
   return (
@@ -16,19 +15,35 @@ function SceneTwo() {
         <div className="title">
           两极协同—连接南极和北极的热带大西洋经向模的媒介作用
         </div>
-        <div className="right-panel one" style={{ height: "unset" }}>
-          <div className="bottom-panel">
-            <CustomChartPanel />
-          </div>
-        </div>
         <Circles />
+        <Places />
         <CustomFlyTo />
         <Labels />
         <Legend />
-        <HGTImageLayer />
-        <ViewerImageLayer name="4_3_1_Antarctic1" opacity={0.5} />
-        <ViewerImageLayer name="4_3_1_Arctic3" opacity={0.5} />
-        <ViewerImageLayer name="4_3_1_Atlantic2" opacity={0.5} />
+        <TimelineLayer
+          name="4_3_2_c_hgt_Layer1"
+          opacity={0.5}
+          sTime={10}
+          eTime={32}
+        />
+        <TimelineLayer
+          name="4_3_1_Antarctic1"
+          opacity={0.5}
+          sTime={32}
+          eTime={100}
+        />
+        <TimelineLayer
+          name="4_3_1_Arctic3"
+          opacity={0.5}
+          sTime={0}
+          eTime={10}
+        />
+        <TimelineLayer
+          name="4_3_1_Atlantic2"
+          opacity={0.5}
+          sTime={0}
+          eTime={10}
+        />
         <Point />
         <ReplayButton />
       </MapLayout>
diff --git a/src/components/domain/Three/SceneTwo/index.module.less b/src/components/domain/Three/SceneTwo/index.module.less
index 06e8236..fbf3970 100644
--- a/src/components/domain/Three/SceneTwo/index.module.less
+++ b/src/components/domain/Three/SceneTwo/index.module.less
@@ -1,7 +1,9 @@
+@import "@/var.less";
+
 .legend :global {
   position: absolute;
   bottom: 270px;
-  width: 450px;
+  width: 640px;
   left: 12px;
   //   left: 25%;
   z-index: 1000;
@@ -16,6 +18,7 @@
 
   .legend-title {
     color: #04fbfd;
+    font-size: @font-32;
   }
 
   .colorbar {