refactor

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),

src/components/domain/Three/SceneTwo/Circles.jsx

@@ -22,10 +22,9 @@ 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;
@@ -83,13 +82,10 @@ function Circles() {
           />
         </Entity>
       </Entity>
-        <Entity
+      <Entity id={`${id}-down`} position={Cartesian3.fromDegrees(lon, lat, 0)}>
-          id={`${id}-down`}
-          position={Cartesian3.fromDegrees(lon, lat, 0)}
-        >
         {circle}
       </Entity>
-        {/* <Entity position={Cartesian3.fromDegrees(lon, lat, 0)}>
+      <Entity position={Cartesian3.fromDegrees(lon, lat, 0)}>
         <LabelGraphics
           text={labelText || "Rossby波列"}
           font="24px Helvetica"
@@ -99,54 +95,61 @@ function Circles() {
           style={LabelStyle.FILL_AND_OUTLINE}
           eyeOffset={new Cartesian2(0, 500000)}
         />
-        </Entity> */}
+      </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>
   );

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();
 

src/components/domain/Three/SceneTwo/Labels.jsx

@@ -6,39 +6,27 @@ export default function Labels() {
   return (
     <Fragment>
       <LabelEntity
-        showTime={2}
+        showTime={8}
-        text={"南热带大西洋"}
+        text={"大西洋经向模AMM正位相"}
-        position={Cartesian3.fromDegrees(-29, -33, 0)}
+        position={Cartesian3.fromDegrees(-29, -25, 0)}
         eyeOffset={new Cartesian2(0, 1000000)}
       />
       <LabelEntity
-        showTime={6}
+        showTime={20}
-        text={"拉扎列夫海以北"}
+        text={"AMM激发的Rossby波列"}
-        position={Cartesian3.fromDegrees(18, -50, 0)}
+        position={Cartesian3.fromDegrees(9, -33, 0)}
         eyeOffset={new Cartesian2(0, 1000000)}
       />
       <LabelEntity
-        showTime={10}
+        showTime={28}
-        text={"南印度洋"}
+        text={"反气旋环流"}
-        position={Cartesian3.fromDegrees(80, -50, 0)}
+        position={Cartesian3.fromDegrees(-160, -50, 0)}
         eyeOffset={new Cartesian2(0, 1000000)}
       />
       <LabelEntity
-        showTime={14}
+        showTime={33}
-        text={"塔斯曼海"}
+        text={"南极变冷"}
-        position={Cartesian3.fromDegrees(157, -35, 0)}
+        position={Cartesian3.fromDegrees(-106, -80, 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)}
         eyeOffset={new Cartesian2(0, 1000000)}
       />
     </Fragment>

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>
+  );
+}

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: 0, time: 10 },
-  { longitude: -29, latitude: -33, height: 1000000, time: 2 },
+  { longitude: -29, latitude: -33, height: 1000000, time: 12 },
-  { longitude: 18, latitude: -50, height: 1000000, time: 6 },
+  { longitude: 18, latitude: -50, height: 1000000, time: 16 },
-  { longitude: 80, latitude: -50, height: 1000000, time: 10 },
+  { longitude: 80, latitude: -50, height: 1000000, time: 20 },
-  { longitude: 157, latitude: -35, height: 1000000, time: 14 },
+  { longitude: 157, latitude: -35, height: 1000000, time: 24 },
-  { longitude: 178, latitude: -50, height: 1000000, time: 18 },
+  { longitude: 178, latitude: -50, height: 1000000, time: 28 },
-  { longitude: -130, latitude: -65, height: 1000000, time: 22 },
+  { longitude: -130, latitude: -65, height: 1000000, time: 32 },
 ];
 
 function Point() {

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} />;
+}

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 />
+        <TimelineLayer
-        <ViewerImageLayer name="4_3_1_Antarctic1" opacity={0.5} />
+          name="4_3_2_c_hgt_Layer1"
-        <ViewerImageLayer name="4_3_1_Arctic3" opacity={0.5} />
+          opacity={0.5}
-        <ViewerImageLayer name="4_3_1_Atlantic2" 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>

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 {