fix(web): zoom to 3dtiles layer (#25)

reearth · Oct 25, 2024 · 8386c61 · 8386c61
1 parent 5063b21
commit 8386c61
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git a/web/src/classic/components/molecules/Visualizer/Engine/Cesium/common.ts b/web/src/classic/components/molecules/Visualizer/Engine/Cesium/common.ts
@@ -30,6 +30,7 @@ import {
   IntersectionTests,
   Matrix4,
   SceneMode,
+  Cesium3DTileset,
 } from "cesium";
 import { useCallback, MutableRefObject } from "react";
 
@@ -718,3 +719,18 @@ export async function sampleTerrainHeightFromCartesian(scene: Scene, translation
   }
   return await sampleTerrainHeight(scene, lng, lat);
 }
+
+export function find3dtilesPrimitiveByLayerId(
+  viewer: Viewer,
+  layerId: string,
+): Cesium3DTileset | undefined {
+  if (!layerId) return;
+  const primitives = viewer.scene.primitives;
+  for (let i = 0; i < primitives.length; i++) {
+    const primitive = primitives.get(i);
+    if (primitive instanceof Cesium3DTileset && (primitive as any)[layerIdField] === layerId) {
+      return primitive;
+    }
+  }
+  return;
+}
diff --git a/web/src/classic/components/molecules/Visualizer/Engine/Cesium/useEngineRef.ts b/web/src/classic/components/molecules/Visualizer/Engine/Cesium/useEngineRef.ts
@@ -27,6 +27,7 @@ import {
   getCenterCamera,
   zoom,
   lookAtWithoutAnimation,
+  find3dtilesPrimitiveByLayerId,
 } from "./common";
 
 export default function useEngineRef(
@@ -94,19 +95,25 @@ export default function useEngineRef(
       lookAtLayer: layerId => {
         const viewer = cesium.current?.cesiumElement;
         if (!viewer || viewer.isDestroyed()) return;
+        // we can't find 3dtiles by entity id
+        const primitive = find3dtilesPrimitiveByLayerId(viewer, layerId);
+        const camera = getCamera(viewer);
+        const offset = new Cesium.HeadingPitchRange(
+          camera?.heading ?? 0,
+          camera?.pitch ?? -90,
+          5000,
+        );
+        if (primitive) {
+          viewer.zoomTo(primitive, offset);
+          return;
+        }
         const e = viewer.entities.getById(layerId);
         if (!e) return;
         const entityPos = e.position?.getValue(viewer.clock.currentTime);
         if (!entityPos) return;
         const cameraPos = viewer.camera.positionWC;
         const distance = Cesium.Cartesian3.distance(entityPos, cameraPos);
         if (Math.round(distance * 1000) / 1000 === 5000) return;
-        const camera = getCamera(viewer);
-        const offset = new Cesium.HeadingPitchRange(
-          camera?.heading ?? 0,
-          camera?.pitch ?? -90,
-          5000,
-        );
         viewer.zoomTo(e, offset);
       },
       getViewport: () => {