fix

src/components/PolygonLayout/CustomClock.jsx

@@ -6,7 +6,7 @@ function CustomClock({ start, stop }) {
   return (
     <Clock
       multiplier={1}
-      shouldAnimate={true}
+      shouldAnimate={false}
       startTime={start.clone()}
       stopTime={stop.clone()}
       currentTime={start.clone()}

src/components/PolygonLayout/CustomFlyTo.jsx

@@ -1,25 +1,57 @@
-import { CameraFlyTo, useCesium } from "resium";
-import { useEffect, useState } from "react";
+import { Camera, useCesium } from "resium";
 
 function CustomFlyTo() {
   const { viewer } = useCesium();
+  const { camera } = viewer;
 
-  const [destination, setDestination] = useState(
-    Cesium.Cartesian3.fromDegrees(88, -89, 20000000)
-  );
-
-  useEffect(() => {
+  function cameraFlyToLine(adjustPitch) {
+    const antarcticalOptions = {
+      destination: Cesium.Cartesian3.fromDegrees(88, -89, 1600000),
+      orientation: {
+        heading: Cesium.Math.toRadians(15.0),
+        pitch: Cesium.Math.toRadians(-60),
+        roll: 0.0,
+      },
+      duration: 10,
+      complete: function () {
         setTimeout(() => {
-      setDestination(Cesium.Cartesian3.fromDegrees(88, -89, 20000000));
+          camera.flyTo(plateauOptions);
         }, 1000);
-    setTimeout(() => {
-      setDestination(Cesium.Cartesian3.fromDegrees(88, 33, 20000000));
-    }, 4000);
-    setTimeout(() => {
-      setDestination(Cesium.Cartesian3.fromDegrees(130, -10.5, 20000000));
-    }, 7000);
-  }, []);
-  return <CameraFlyTo destination={destination} />;
+      },
+    };
+
+    const plateauOptions = {
+      destination: Cesium.Cartesian3.fromDegrees(90, 20, 1600000),
+      duration: 10,
+      orientation: {
+        heading: Cesium.Math.toRadians(-15.0),
+        pitch: -Cesium.Math.PI_OVER_FOUR,
+        roll: 0.0,
+      },
+      complete: function () {
+        setTimeout(function () {
+          camera.flyTo(sideViewOptions);
+        }, 1000);
+      },
+    };
+
+    const sideViewOptions = {
+      destination: Cesium.Cartesian3.fromDegrees(130, -10.5, 20000000),
+      duration: 5,
+      complete: () => {
+        viewer.clock.shouldAnimate = true;
+      },
+    };
+
+    if (adjustPitch) {
+      antarcticalOptions.pitchAdjustHeight = 1000;
+      plateauOptions.pitchAdjustHeight = 1000;
+      sideViewOptions.pitchAdjustHeight = 1000;
+    }
+    camera.flyTo(antarcticalOptions);
+  }
+  cameraFlyToLine();
+  return <Camera />;
 }
 
 export default CustomFlyTo;

src/components/PolygonLayout/Point.jsx

@@ -9,7 +9,7 @@ const height = 20000;
 for (let index = 0; index < 120; index++) {
   data.push({
     longitude: 88,
-    latitude: 35 - 120 + index, // 由南极到青藏高原
+    latitude: 35 - 120 + index * 0.9874, // 由南极到青藏高原
     // latitude: 33 -index, // 由青藏高原到南极
     height:
       index > 59
@@ -81,7 +81,8 @@ function Point({ start, stop }) {
       });
     } else if (value === "sideview") {
       // 侧视
-      viewer.trackedEntity = entityRef.current.cesiumElement;
+      // viewer.trackedEntity = entityRef.current.cesiumElement;
+      viewer.trackedEntity = undefined;
       viewer.camera.flyTo({
         destination: Cesium.Cartesian3.fromDegrees(130, -10.5, 20000000),
       });
@@ -92,12 +93,16 @@ function Point({ start, stop }) {
         viewer.clock.currentTime
       );
       if (!destination) return;
-      const newDestination = new Cesium.Cartesian3();
-      newDestination.x = destination.x;
-      newDestination.y = destination.y + 3000000;
-      newDestination.z = destination.z;
+      const newDestination = Cesium.Cartesian3.clone(destination);
+      newDestination.y = destination.y + 1000000;
       viewer.camera.flyTo({
         destination: newDestination,
+        orientation: {
+          heading: Cesium.Math.toRadians(0.0),
+          pitch: -Cesium.Math.PI_OVER_FOUR,
+          roll: 0.0,
+        },
+        duration: 0,
       });
     }
   };
@@ -109,7 +114,8 @@ function Point({ start, stop }) {
           返回首页
         </div>
         <Select
-          onSelect={handleChange}
+          // onSelect={handleChange}
+          onChange={handleChange}
           value={value}
           getPopupContainer={(node) => node}
           options={[
@@ -130,7 +136,8 @@ function Point({ start, stop }) {
       </div>
       <Entity
         onDoubleClick={(e) => {
-          if ((viewer.trackedEntity = undefined)) setValue("follow");
+          // if ((viewer.trackedEntity = undefined))
+          setValue("follow");
         }}
         ref={entityRef}
         availability={

src/components/PolygonLayout/index.jsx

@@ -1,4 +1,4 @@
-import { Viewer, Camera } from "resium";
+import { Viewer } from "resium";
 import PlateauPolygon from "./PlateauPolygon";
 import AntarcticaPolygon from "./AntarcticaPolygon";
 import Point from "./Point";
@@ -27,12 +27,11 @@ function PolygonLayout() {
       // animation={false}
       shouldAnimate={true}
     >
-      <Camera defaultZoomAmount={0} />
+      <CustomClock start={start} stop={stop} />
       <CustomFlyTo />
       <Point start={start} stop={stop} />
       <PlateauPolygon />
       <AntarcticaPolygon />
-      <CustomClock start={start} stop={stop} />
     </Viewer>
   );
 }