Merge branch 'main' into feature/fix-image-position

reearth · May 30, 2022 · 1df5e56 · 1df5e56
2 parents be11a2e + 4fd0eb3
commit 1df5e56
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 6 deletions.
diff --git a/src/components/molecules/Visualizer/Engine/Cesium/common.ts b/src/components/molecules/Visualizer/Engine/Cesium/common.ts
@@ -11,6 +11,7 @@ import {
   Cartesian3,
   CesiumWidget,
   PerspectiveFrustum,
+  OrthographicOffCenterFrustum,
   Viewer,
   HeightReference,
   ShadowMode,
@@ -303,15 +304,18 @@ export const animateFOV = ({
 export const getCamera = (viewer: Viewer | CesiumWidget | undefined): Camera | undefined => {
   if (!viewer || viewer.isDestroyed() || !viewer.camera || !viewer.scene) return undefined;
   const { camera } = viewer;
-  if (!(camera.frustum instanceof PerspectiveFrustum)) return;
-
-  const ellipsoid = viewer.scene.globe.ellipsoid;
-  const { latitude, longitude, height } = ellipsoid.cartesianToCartographic(camera.position);
+  if (
+    !(
+      camera.frustum instanceof PerspectiveFrustum ||
+      camera.frustum instanceof OrthographicOffCenterFrustum
+    )
+  )
+    return;
+  const { latitude, longitude, height } = camera.positionCartographic;
   const lat = CesiumMath.toDegrees(latitude);
   const lng = CesiumMath.toDegrees(longitude);
   const { heading, pitch, roll } = camera;
-  const { fov } = camera.frustum;
-
+  const fov = camera.frustum instanceof PerspectiveFrustum ? camera.frustum.fov : 1;
   return { lng, lat, height, heading, pitch, roll, fov };
 };
 

diff --git a/src/components/molecules/Visualizer/Engine/Cesium/hooks.ts b/src/components/molecules/Visualizer/Engine/Cesium/hooks.ts
@@ -130,6 +130,10 @@ export default ({
     [property?.default?.bgcolor],
   );
 
+  useEffect(() => {
+    engineAPI.changeSceneMode(property?.default?.sceneMode, 0);
+  }, [property?.default?.sceneMode, engineAPI]);
+
   // move to initial position at startup
   const initialCameraFlight = useRef(false);
 

diff --git a/src/components/molecules/Visualizer/Engine/Cesium/useEngineRef.ts b/src/components/molecules/Visualizer/Engine/Cesium/useEngineRef.ts
@@ -84,6 +84,22 @@ export default function useEngineRef(
         if (!viewer || viewer.isDestroyed()) return;
         viewer?.scene?.camera.zoomOut(amount);
       },
+      changeSceneMode: (sceneMode, duration = 2) => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed() || !viewer.scene) return;
+        switch (sceneMode) {
+          case "2d":
+            viewer?.scene?.morphTo2D(duration);
+            break;
+          case "columbus":
+            viewer?.scene?.morphToColumbusView(duration);
+            break;
+          case "3d":
+          default:
+            viewer?.scene?.morphTo3D(duration);
+            break;
+        }
+      },
       builtinPrimitives,
       clusterComponent: Cluster,
     };

diff --git a/src/components/molecules/Visualizer/Engine/ref.ts b/src/components/molecules/Visualizer/Engine/ref.ts
@@ -14,12 +14,15 @@ export type EngineRef = {
   lookAt: (destination: LookAtDestination, options?: CameraOptions) => void;
   zoomIn: (amount: number) => void;
   zoomOut: (amount: number) => void;
+  changeSceneMode: (sceneMode: SceneMode | undefined, duration?: number) => void;
   isMarshalable?: boolean | "json" | ((target: any) => boolean | "json");
   builtinPrimitives?: Record<string, Component>;
   pluginApi?: any;
   clusterComponent?: ComponentType<ClusterProps>;
 };
 
+export type SceneMode = "3d" | "2d" | "columbus";
+
 export type FlyToDestination = {
   /** Degrees */
   lat?: number;
@@ -76,6 +79,7 @@ export type SceneProperty = {
     skybox?: boolean;
     bgcolor?: string;
     ion?: string;
+    sceneMode?: SceneMode; // default: scene3d
   };
   cameraLimiter?: {
     cameraLimitterEnabled?: boolean;