refactor

src/components/domain/Three/SceneOne/CustomChartPanel.jsx

@@ -178,21 +178,6 @@ function CustomChartPanel() {
           width: 4,
         },
       },
-      {
-        name: "青藏高原",
-        type: "line",
-        // stack: "Total",
-        data: TibetanData,
-        smooth: true,
-        color: "green",
-        symbol: "none",
-        itemStyle: {
-          color: "green",
-        },
-        lineStyle: {
-          width: 4,
-        },
-      },
     ],
   };
 

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

@@ -12,21 +12,15 @@ export default function Labels() {
         eyeOffset={new Cartesian2(0, 1000000)}
       />
       <LabelEntity
-        showTime={20}
+        showTime={14}
-        text={"AMM激发的Rossby波列"}
+        text={"AMM激发Rossby波列"}
-        position={Cartesian3.fromDegrees(9, -33, 0)}
+        position={Cartesian3.fromDegrees(13, -38, 0)}
-        eyeOffset={new Cartesian2(0, 1000000)}
-      />
-      <LabelEntity
-        showTime={28}
-        text={"反气旋环流"}
-        position={Cartesian3.fromDegrees(-160, -50, 0)}
         eyeOffset={new Cartesian2(0, 1000000)}
       />
       <LabelEntity
         showTime={33}
-        text={"南极变冷"}
+        text={"形成反气旋环流，使得南极变冷"}
-        position={Cartesian3.fromDegrees(-106, -80, 0)}
+        position={Cartesian3.fromDegrees(-130, -60, 0)}
         eyeOffset={new Cartesian2(0, 1000000)}
       />
     </Fragment>

src/components/domain/Three/SceneTwo/TemperatureLegend.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 (
+    <div className={styles.tempLegend}>
+      <div className="legend-title">全球温度异常空间分布</div>
+      <div className="colorbar">
+        {colorBar.map((color, index) => {
+          return (
+            <div
+              key={`colorbar-item-${index}`}
+              className="colorbar-item"
+              style={{ backgroundColor: color }}
+            />
+          );
+        })}
+      </div>
+      <div className="legend-text">
+        {["", -1, -0.8, -0.6, -0.4, -0.2, 0, 0.2, 0.4, 0.6, 0.8, 1.0, ""].map(
+          (item, index) => {
+            return (
+              <div
+                key={`legend-text-item-${index}`}
+                className="legend-text-item"
+                style={{
+                  textAlign:
+                    index === 6 ? "center" : index < 6 ? "left" : "right",
+                }}
+              >
+                {item}
+              </div>
+            );
+          }
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Legend;

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

@@ -1,5 +1,7 @@
 import MapLayout from "@/components/map/Layout";
+import TextInfoPanel from "@/components/common/TextInfoPanel";
 import Legend from "./Legend";
+import TemperatureLegned from "./TemperatureLegend";
 import CustomFlyTo from "./CustomFlyTo";
 import Point from "./Point";
 import Circles from "./Circles";
@@ -15,11 +17,15 @@ function SceneTwo() {
         <div className="title">
           两极协同—连接南极和北极的热带大西洋经向模的媒介作用
         </div>
+        <div className="left-panel one">
+          <TextInfoPanel content="热带大西洋经向模AMM正位相被认为是年代际尺度上联系暖北极和冷南极的纽带。AMM激发的Rossby波列传播到阿蒙森海地区形成反气旋环流，使得南极变冷。该成果揭示了年代际尺度上联系最遥远两极的主要模态及其物理机制。" />
+        </div>
         <Circles />
         <Places />
         <CustomFlyTo />
         <Labels />
         <Legend />
+        <TemperatureLegned />
         <TimelineLayer
           name="4_3_2_c_hgt_Layer1"
           opacity={0.5}

src/components/domain/Three/SceneTwo/index.module.less

@@ -4,7 +4,7 @@
   position: absolute;
   bottom: 270px;
   width: 640px;
-  left: 12px;
+  right: 12px;
   //   left: 25%;
   z-index: 1000;
   display: flex;
@@ -59,3 +59,57 @@
   top: 8px;
   left: 140px;
 }
+
+.tempLegend :global {
+  position: absolute;
+  bottom: 130px;
+  width: 640px;
+  right: 12px;
+  //   left: 25%;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #000000e7;
+  border: 1px solid #04fbfd;
+  border-radius: 8px;
+  padding: 8px;
+
+  .legend-title {
+    color: #04fbfd;
+    font-size: @font-32;
+  }
+
+  .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;
+    }
+  }
+}

src/components/domain/Two/CustomClock.jsx

@@ -0,0 +1,22 @@
+import { ClockRange, JulianDate } from "cesium";
+import { Clock } from "resium";
+
+// 起始时间
+const start = JulianDate.fromDate(new Date());
+// 结束时间
+const stop = JulianDate.addSeconds(start, 32, new JulianDate());
+
+function CustomClock() {
+  return (
+    <Clock
+      multiplier={1}
+      shouldAnimate={false}
+      startTime={start.clone()}
+      stopTime={stop.clone()}
+      currentTime={start.clone()}
+      clockRange={ClockRange.CLAMPED}
+    />
+  );
+}
+
+export default CustomClock;

src/components/domain/Two/CustomFlyTo.jsx

@@ -91,7 +91,7 @@ function CustomFlyTo() {
 
     const HadleyCellOptions = {
       destination: Cartesian3.fromDegrees(94, 1, 5000000),
-      duration: 2,
+      duration: 3,
       orientation: {
         heading: 6,
         pitch: -1.2,
@@ -107,7 +107,7 @@ function CustomFlyTo() {
 
     const QTPlateauOption = {
       destination: Cartesian3.fromDegrees(92, 8, 5000000),
-      duration: 2,
+      duration: 3,
       orientation: {
         heading: 6,
         pitch: -1.2,

src/components/domain/Two/HadleyCell.jsx

@@ -18,7 +18,7 @@ export default function HadleyCell() {
       stopTime.secondsOfDay - currentTime.secondsOfDay
     );
 
-    if (leftTime < 5) {
+    if (leftTime < 4) {
       setShow(true);
     } else if (show) setShow(false);
   }, [show]);

src/components/domain/Two/Labels/index.jsx

@@ -21,7 +21,7 @@ export default function Labels() {
         position={Cartesian3.fromDegrees(73, -7, 0)}
       />
       <LabelEntity
-        showTime={26}
+        showTime={28}
         text={"局地环流异常"}
         position={Cartesian3.fromDegrees(84, 15, 0)}
       />

src/components/domain/Two/index.jsx

@@ -1,6 +1,6 @@
 import MapLayout from "@/components/map/Layout";
 import CustomToolbar from "@/components/common/CustomToolbar";
-import CustomClock from "@/components/common/CustomClock";
+import CustomClock from "./CustomClock";
 import TextInfoPanel from "@/components/common/TextInfoPanel";
 import CustomFlyTo from "./CustomFlyTo";
 import Point from "./Point";