Merge branch 'main' of http://git.phitrellis.com/Aifeilong/cesium-arrow

src/components/domain/One/Legend.jsx

@@ -44,16 +44,16 @@ function Legend() {
               key={`colorbar-item-${index}`}
               className="colorbar-item"
               style={{ backgroundColor: color }}
-              title={`${(-3.2 + index * 0.2).toFixed(1)}~${(
+              title={`${(-1.6 + index * 0.1).toFixed(1)}~${(
-                -3.2 +
+                -1.6 +
-                (index + 1) * 0.2
+                (index + 1) * 0.1
               ).toFixed(1)}`}
             />
           );
         })}
       </div>
       <div className="legend-text">
-        {[-2.4, -1.6, -0.8, 0, 0.8, 1.6, 2.4, ""].map((item, index) => {
+        {[-1.2, -0.8, -0.4, 0, 0.4, 0.8, 1.2, ""].map((item, index) => {
           return (
             <div key={`legend-text-item-${index}`} className="legend-text-item">
               {item}

src/components/domain/Two/CustomFlyTo.jsx

@@ -24,7 +24,6 @@ function CustomFlyTo() {
 
     const area2Options = {
       destination: Cartesian3.fromDegrees(-30, -85, 10000000),
-      // destination: Cartesian3.fromDegrees(-30, -65, 10000000),
       duration: 5,
       complete: function () {
         camera.flyTo(area3Options);
@@ -88,24 +87,16 @@ function CustomFlyTo() {
     };
 
     const QTPlateauOption = {
-      destination: Cartesian3.fromDegrees(88, 18, 5000000),
+      destination: Cartesian3.fromDegrees(92, 8, 5000000),
       duration: 2,
       orientation: {
         heading: 6,
-        pitch: -1.3,
+        pitch: -1.2,
         roll: -6,
       },
       easingFunction: EasingFunction.LINEAR_NONE,
     };
 
-    const xx = {
-      destination: Cartesian3.fromDegrees(95, -35, 10000000),
-      duration: 4,
-
-      easingFunction: EasingFunction.LINEAR_NONE,
-    };
-
-    // camera.flyTo(xx);
     camera.flyTo(area1Options);
   }
   cameraFlyToLine();

src/components/domain/Two/HadleyCell.jsx

@@ -1,33 +1,40 @@
-import { Cartesian3, Color, PolylineArrowMaterialProperty } from "cesium";
+import { useInterval } from "ahooks";
-import { Fragment } from "react";
+import {
-import { Entity, PolylineGraphics } from "resium";
+  CallbackProperty,
+  Cartesian3,
+  Color,
+  PolylineArrowMaterialProperty,
+} from "cesium";
+import { Fragment, useCallback, useState } from "react";
+import { Entity, PolylineGraphics, useCesium } from "resium";
 
 export default function HadleyCell() {
+  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 < 3) {
+      setShow(true);
+    } else if (show) setShow(false);
+  }, [show]);
+
+  useInterval(showAnimate, 100);
+
+  if (!show) return;
+
   return (
     <Fragment>
       {/* 右下部分 */}
-      {/* <Entity>
+      <Entity show={show}>
         <PolylineGraphics
           positions={Cartesian3.fromDegreesArrayHeights([
-            68, 24, 200000, 68, 24, 1000000,
+            82, 14, 1000000, 82, 14, 300000, 82.3, 14.7, 200000, 87.7, 27.3,
-          ])}
+            200000,
-          width={10}
-          material={Color.WHITE}
-        />
-      </Entity>
-      <Entity>
-        <PolylineGraphics
-          positions={Cartesian3.fromDegreesArrayHeights([
-            68, 24, 200000, 80, 30, 200000,
-          ])}
-          width={30}
-          material={new PolylineArrowMaterialProperty(Color.BLUE)}
-        />
-      </Entity> */}
-      <Entity>
-        <PolylineGraphics
-          positions={Cartesian3.fromDegreesArrayHeights([
-            68, 24, 1000000, 68, 24, 300000, 70, 25, 200000, 79, 29.5, 200000,
           ])}
           width={50}
           material={
@@ -38,10 +45,11 @@ export default function HadleyCell() {
         />
       </Entity>
       {/* 左上部分 */}
-      <Entity>
+      <Entity show={show}>
         <PolylineGraphics
           positions={Cartesian3.fromDegreesArrayHeights([
-            80, 30, 200000, 80, 30, 900000, 78, 29, 1000000, 69, 24.5, 1000000,
+            88, 28, 200000, 88, 28, 900000, 87.7, 27.3, 1000000, 82.3, 14.7,
+            1000000,
           ])}
           width={50}
           material={

src/components/domain/Two/Labels.jsx

@@ -19,7 +19,7 @@ function Labels() {
     } else if (showIO) {
       setShowIO(false);
     }
-    if (leftTime < 4) {
+    if (leftTime < 3) {
       setShowTB(true);
     } else if (showIO) {
       setShowTB(false);
@@ -52,7 +52,7 @@ function Labels() {
           eyeOffset={new Cartesian2(0, 200000)}
         />
       </Entity>
-      <Entity show={showTB} position={Cartesian3.fromDegrees(94, 24, 0)}>
+      <Entity show={showTB} position={Cartesian3.fromDegrees(95, 28, 0)}>
         <LabelGraphics
           text={"高原上空降水增加、感热通量降低"}
           font="24px Helvetica"

src/components/domain/Two/Legend.jsx

@@ -44,16 +44,16 @@ function Legend() {
               key={`colorbar-item-${index}`}
               className="colorbar-item"
               style={{ backgroundColor: color }}
-              title={`${(-3.2 + index * 0.2).toFixed(1)}~${(
+              title={`${(-1.6 + index * 0.1).toFixed(1)}~${(
-                -3.2 +
+                -1.6 +
-                (index + 1) * 0.2
+                (index + 1) * 0.1
               ).toFixed(1)}`}
             />
           );
         })}
       </div>
       <div className="legend-text">
-        {[-2.4, -1.6, -0.8, 0, 0.8, 1.6, 2.4, ""].map((item, index) => {
+        {[-1.2, -0.8, -0.4, 0, 0.4, 0.8, 1.2, ""].map((item, index) => {
           return (
             <div key={`legend-text-item-${index}`} className="legend-text-item">
               {item}

src/components/domain/Two/MoistureTransport.jsx

@@ -13,12 +13,12 @@ function MoistureTransport() {
       stopTime.secondsOfDay - currentTime.secondsOfDay
     );
 
-    if (leftTime < 5) {
+    if (leftTime < 3) {
       setShow(true);
     } else if (show) setShow(false);
   }, [show]);
 
-  useInterval(showAnimate, 100);
+  useInterval(showAnimate, 300);
 
   return (
     <Fragment>

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

@@ -1,6 +1,8 @@
-import Site from "./Site";
+import { useCallback, useState } from "react";
+import { useCesium } from "resium";
+import { useInterval } from "ahooks";
 import { chunk } from "lodash-es";
-import { useSelector } from "react-redux";
+import Site from "./Site";
 
 const positions = [
   98, 38, 95, 37, 97, 37, 101, 37, 94, 36, 96, 36, 98, 36, 100, 36, 101, 36,
@@ -15,6 +17,24 @@ const positions = [
 ];
 
 function Sites() {
+  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 < 3) {
+      setShow(true);
+    } else if (show) setShow(false);
+  }, [show]);
+
+  useInterval(showAnimate, 100);
+
+  if (!show) return;
+
   return chunk(positions, 2).map((position, index) => {
     return <Site key={`site-${index}`} index={index} position={position} />;
   });