feat(web): support google photorealistic (#521)

reearth · Jul 24, 2023 · ca71b33 · ca71b33
1 parent ca753cd
commit ca71b33
Show file tree

Hide file tree

Showing 15 changed files with 102 additions and 20 deletions.
diff --git a/web/src/beta/lib/core/Crust/Plugins/plugin_types.ts b/web/src/beta/lib/core/Crust/Plugins/plugin_types.ts
@@ -31,9 +31,6 @@ import { ClientStorage } from "./useClientStorage";
 
 declare global {
   interface Window {
-    // This will be resolved when classic is removed
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Because of duplicated `window.reearth` definition
-    // @ts-ignore
     reearth?: CommonReearth;
   }
 }

diff --git a/web/src/beta/lib/core/engines/Cesium/Feature/Tileset/hooks.ts b/web/src/beta/lib/core/engines/Cesium/Feature/Tileset/hooks.ts
@@ -15,6 +15,9 @@ import {
   Cesium3DTileFeature,
   Model,
   Cesium3DTilePointFeature,
+  GoogleMaps as CesiumGoogleMaps,
+  Resource,
+  defaultValue,
   ImageBasedLighting,
 } from "cesium";
 import { isEqual, pick } from "lodash-es";
@@ -42,6 +45,7 @@ import {
   toColor,
 } from "../utils";
 
+import { GoogleMaps } from "./types";
 import { useClippingBox } from "./useClippingBox";
 
 import { Property } from ".";
@@ -197,6 +201,7 @@ const useFeature = ({
 
   useEffect(() => {
     tileset.current?.tileLoad.addEventListener((t: Cesium3DTile) => {
+      if (t.tileset.isDestroyed()) return;
       lookupFeatures(t.content, async (tileFeature, content) => {
         const coordinates = content.tile.boundingSphere.center;
         const featureId = getBuiltinFeatureId(tileFeature);
@@ -316,7 +321,7 @@ export const useHooks = ({
   evalFeature: EvalFeature;
 }) => {
   const { viewer } = useCesium();
-  const { tileset, styleUrl, edgeColor, edgeWidth, experimental_clipping } = property ?? {};
+  const { tileset, styleUrl, edgeColor, edgeWidth, experimental_clipping, apiKey } = property ?? {};
   const {
     width,
     height,
@@ -509,15 +514,31 @@ export const useHooks = ({
     })();
   }, [styleUrl]);
 
+  const googleMapResource = useMemo(() => {
+    if (type !== "google-photorealistic" || !isVisible) return;
+    // Ref: https://github.com/CesiumGS/cesium/blob/b208135a095073386e5f04a59956ee11a03aa847/packages/engine/Source/Scene/createGooglePhotorealistic3DTileset.js#L30
+    const googleMaps = CesiumGoogleMaps as GoogleMaps;
+    // Default key: https://github.com/CesiumGS/cesium/blob/b208135a095073386e5f04a59956ee11a03aa847/packages/engine/Source/Core/GoogleMaps.js#L6C36-L6C36
+    const key = defaultValue(apiKey, googleMaps.defaultApiKey);
+    const credit = googleMaps.getDefaultApiKeyCredit(key);
+    return new Resource({
+      url: `${googleMaps.mapTilesApiEndpoint}3dtiles/root.json`,
+      queryParameters: { key },
+      credits: credit ? [credit] : undefined,
+    } as Resource.ConstructorOptions);
+  }, [apiKey, type, isVisible]);
+
   const tilesetUrl = useMemo(() => {
     return type === "osm-buildings" && isVisible
       ? IonResource.fromAssetId(96188, {
           accessToken: meta?.cesiumIonAccessToken as string | undefined,
         }) // https://github.com/CesiumGS/cesium/blob/main/packages/engine/Source/Scene/createOsmBuildings.js#L53
+      : googleMapResource
+      ? googleMapResource
       : type === "3dtiles" && isVisible
       ? url ?? tileset
       : null;
-  }, [isVisible, tileset, url, type, meta]);
+  }, [isVisible, tileset, url, type, meta, googleMapResource]);
 
   const imageBasedLighting = useMemo(() => {
     if (

diff --git a/web/src/beta/lib/core/engines/Cesium/Feature/Tileset/types.ts b/web/src/beta/lib/core/engines/Cesium/Feature/Tileset/types.ts
@@ -0,0 +1,5 @@
+import { GoogleMaps as CesiumGoogleMaps } from "cesium";
+
+export type GoogleMaps = typeof CesiumGoogleMaps & {
+  getDefaultApiKeyCredit: (providedKey: string) => string;
+};
diff --git a/web/src/beta/lib/core/engines/Cesium/Feature/index.tsx b/web/src/beta/lib/core/engines/Cesium/Feature/index.tsx
@@ -50,6 +50,7 @@ const displayConfig: Record<DataType, (keyof typeof components)[] | "auto"> = {
   tms: ["raster"],
   "3dtiles": ["3dtiles"],
   "osm-buildings": ["3dtiles"],
+  "google-photorealistic": ["3dtiles"],
   gpx: "auto",
   shapefile: "auto",
   gtfs: "auto",

diff --git a/web/src/beta/lib/core/mantle/types/appearance.ts b/web/src/beta/lib/core/mantle/types/appearance.ts
@@ -146,6 +146,7 @@ export type Cesium3DTilesAppearance = {
   edgeWidth?: number;
   edgeColor?: string;
   tileset?: string;
+  apiKey?: string;
   experimental_clipping?: EXPERIMENTAL_clipping;
   pointSize?: number;
   meta?: unknown;

diff --git a/web/src/beta/lib/core/mantle/types/index.ts b/web/src/beta/lib/core/mantle/types/index.ts
@@ -96,6 +96,7 @@ export type DataType =
   | "geojson"
   | "3dtiles"
   | "osm-buildings"
+  | "google-photorealistic"
   | "czml"
   | "csv"
   | "wms"

diff --git a/web/src/classic/components/molecules/Visualizer/Engine/Cesium/Tileset/index.tsx b/web/src/classic/components/molecules/Visualizer/Engine/Cesium/Tileset/index.tsx
@@ -1,5 +1,6 @@
 import {
   Cartesian3,
+  GoogleMaps as CesiumGoogleMaps,
   Cesium3DTileset as Cesium3DTilesetType,
   Cesium3DTileStyle,
   ClippingPlane,
@@ -10,6 +11,8 @@ import {
   Matrix4,
   Transforms,
   TranslationRotationScale,
+  defaultValue,
+  Resource,
 } from "cesium";
 import { FC, useCallback, useEffect, useMemo, useRef, useState, memo } from "react";
 import { Cesium3DTileset, CesiumComponentRef, useCesium } from "resium";
@@ -21,16 +24,19 @@ import type { Props as PrimitiveProps } from "../../../Primitive";
 import { shadowMode, layerIdField, sampleTerrainHeightFromCartesian } from "../common";
 import { translationWithClamping } from "../utils";
 
+import { GoogleMaps } from "./types";
+
 export type Props = PrimitiveProps<Property>;
 
 export type Property = {
   default?: {
-    sourceType?: "url" | "osm";
+    sourceType?: "url" | "osm" | "google-photorealistic";
     tileset?: string;
     styleUrl?: string;
     shadows?: "disabled" | "enabled" | "cast_only" | "receive_only";
     edgeWidth?: number;
     edgeColor?: string;
+    apiKey?: string;
     experimental_clipping?: EXPERIMENTAL_clipping;
   };
 };
@@ -42,8 +48,16 @@ const Tileset: FC<PrimitiveProps<Property, any, SceneProperty>> = memo(function
 }) {
   const { viewer } = useCesium();
   const { isVisible, property } = layer ?? {};
-  const { sourceType, tileset, styleUrl, shadows, edgeColor, edgeWidth, experimental_clipping } =
-    (property as Property | undefined)?.default ?? {};
+  const {
+    sourceType,
+    tileset,
+    styleUrl,
+    shadows,
+    edgeColor,
+    edgeWidth,
+    experimental_clipping,
+    apiKey,
+  } = (property as Property | undefined)?.default ?? {};
   const {
     width,
     height,
@@ -192,15 +206,31 @@ const Tileset: FC<PrimitiveProps<Property, any, SceneProperty>> = memo(function
     })();
   }, [styleUrl]);
 
+  const googleMapResource = useMemo(() => {
+    if (sourceType !== "google-photorealistic" || !isVisible) return;
+    // Ref: https://github.com/CesiumGS/cesium/blob/b208135a095073386e5f04a59956ee11a03aa847/packages/engine/Source/Scene/createGooglePhotorealistic3DTileset.js#L30
+    const googleMaps = CesiumGoogleMaps as GoogleMaps;
+    // Default key: https://github.com/CesiumGS/cesium/blob/b208135a095073386e5f04a59956ee11a03aa847/packages/engine/Source/Core/GoogleMaps.js#L6C36-L6C36
+    const key = defaultValue(apiKey, googleMaps.defaultApiKey);
+    const credit = googleMaps.getDefaultApiKeyCredit(key);
+    return new Resource({
+      url: `${googleMaps.mapTilesApiEndpoint}3dtiles/root.json`,
+      queryParameters: { key },
+      credits: credit ? [credit] : undefined,
+    } as Resource.ConstructorOptions);
+  }, [sourceType, isVisible, apiKey]);
+
   const tilesetUrl = useMemo(() => {
     return sourceType === "osm" && isVisible
       ? IonResource.fromAssetId(96188, {
           accessToken: meta?.cesiumIonAccessToken as string | undefined,
         }) //https://github.com/CesiumGS/cesium/blob/1.69/Source/Scene/createOsmBuildings.js#L50
+      : googleMapResource
+      ? googleMapResource
       : isVisible && tileset
       ? tileset
       : null;
-  }, [isVisible, sourceType, tileset, meta]);
+  }, [isVisible, sourceType, tileset, meta, googleMapResource]);
 
   return !isVisible || (!tileset && !sourceType) || !tilesetUrl ? null : (
     <Cesium3DTileset

diff --git a/web/src/classic/components/molecules/Visualizer/Engine/Cesium/Tileset/types.ts b/web/src/classic/components/molecules/Visualizer/Engine/Cesium/Tileset/types.ts
@@ -0,0 +1,5 @@
+import { GoogleMaps as CesiumGoogleMaps } from "cesium";
+
+export type GoogleMaps = typeof CesiumGoogleMaps & {
+  getDefaultApiKeyCredit: (providedKey: string) => string;
+};
diff --git a/web/src/classic/core/Crust/Plugins/hooks.ts b/web/src/classic/core/Crust/Plugins/hooks.ts
@@ -13,7 +13,7 @@ import {
   TickEventCallback,
 } from "@reearth/classic/core/Map";
 
-import { commonReearth } from "./api";
+import { CommonReearth, commonReearth } from "./api";
 import { ReearthEventType, Viewport, ViewportSize } from "./plugin_types";
 import { Context, Props } from "./types";
 import useClientStorage from "./useClientStorage";
@@ -444,7 +444,7 @@ export default function ({
 
   // expose plugin API for developers
   useEffect(() => {
-    window.reearth = value.reearth;
+    ((window as any).reearth as CommonReearth) = value.reearth;
     return () => {
       delete window.reearth;
     };

diff --git a/web/src/classic/core/Crust/Plugins/plugin_types.ts b/web/src/classic/core/Crust/Plugins/plugin_types.ts
@@ -25,15 +25,8 @@ import type {
 import { Block } from "../Infobox";
 import { Widget } from "../Widgets";
 
-import { CommonReearth } from "./api";
 import { ClientStorage } from "./useClientStorage";
 
-declare global {
-  interface Window {
-    reearth?: CommonReearth;
-  }
-}
-
 export type GlobalThis = {
   Cesium?: Cesium;
   reearth: Reearth;

diff --git a/web/src/classic/core/engines/Cesium/Feature/Tileset/hooks.ts b/web/src/classic/core/engines/Cesium/Feature/Tileset/hooks.ts
@@ -15,6 +15,9 @@ import {
   Cesium3DTileFeature,
   Model,
   Cesium3DTilePointFeature,
+  GoogleMaps as CesiumGoogleMaps,
+  defaultValue,
+  Resource,
 } from "cesium";
 import { isEqual, pick } from "lodash-es";
 import { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -40,6 +43,7 @@ import {
   toColor,
 } from "../utils";
 
+import { GoogleMaps } from "./types";
 import { useClippingBox } from "./useClippingBox";
 
 import { Property } from ".";
@@ -313,7 +317,7 @@ export const useHooks = ({
   evalFeature: EvalFeature;
 }) => {
   const { viewer } = useCesium();
-  const { tileset, styleUrl, edgeColor, edgeWidth, experimental_clipping } = property ?? {};
+  const { tileset, styleUrl, edgeColor, edgeWidth, experimental_clipping, apiKey } = property ?? {};
   const {
     width,
     height,
@@ -506,15 +510,31 @@ export const useHooks = ({
     })();
   }, [styleUrl]);
 
+  const googleMapResource = useMemo(() => {
+    if (type !== "google-photorealistic" || !isVisible) return;
+    // Ref: https://github.com/CesiumGS/cesium/blob/b208135a095073386e5f04a59956ee11a03aa847/packages/engine/Source/Scene/createGooglePhotorealistic3DTileset.js#L30
+    const googleMaps = CesiumGoogleMaps as GoogleMaps;
+    // Default key: https://github.com/CesiumGS/cesium/blob/b208135a095073386e5f04a59956ee11a03aa847/packages/engine/Source/Core/GoogleMaps.js#L6C36-L6C36
+    const key = defaultValue(apiKey, googleMaps.defaultApiKey);
+    const credit = googleMaps.getDefaultApiKeyCredit(key);
+    return new Resource({
+      url: `${googleMaps.mapTilesApiEndpoint}3dtiles/root.json`,
+      queryParameters: { key },
+      credits: credit ? [credit] : undefined,
+    } as Resource.ConstructorOptions);
+  }, [apiKey, type, isVisible]);
+
   const tilesetUrl = useMemo(() => {
     return type === "osm-buildings" && isVisible
       ? IonResource.fromAssetId(96188, {
           accessToken: meta?.cesiumIonAccessToken as string | undefined,
         }) // https://github.com/CesiumGS/cesium/blob/main/packages/engine/Source/Scene/createOsmBuildings.js#L53
+      : googleMapResource
+      ? googleMapResource
       : type === "3dtiles" && isVisible
       ? url ?? tileset
       : null;
-  }, [isVisible, tileset, url, type, meta]);
+  }, [isVisible, tileset, url, type, meta, googleMapResource]);
 
   return {
     tilesetUrl,

diff --git a/web/src/classic/core/engines/Cesium/Feature/Tileset/types.ts b/web/src/classic/core/engines/Cesium/Feature/Tileset/types.ts
@@ -0,0 +1,5 @@
+import { GoogleMaps as CesiumGoogleMaps } from "cesium";
+
+export type GoogleMaps = typeof CesiumGoogleMaps & {
+  getDefaultApiKeyCredit: (providedKey: string) => string;
+};
diff --git a/web/src/classic/core/engines/Cesium/Feature/index.tsx b/web/src/classic/core/engines/Cesium/Feature/index.tsx
@@ -50,6 +50,7 @@ const displayConfig: Record<DataType, (keyof typeof components)[] | "auto"> = {
   tms: ["raster"],
   "3dtiles": ["3dtiles"],
   "osm-buildings": ["3dtiles"],
+  "google-photorealistic": ["3dtiles"],
   gpx: "auto",
   shapefile: "auto",
   gtfs: "auto",

diff --git a/web/src/classic/core/mantle/types/appearance.ts b/web/src/classic/core/mantle/types/appearance.ts
@@ -145,6 +145,7 @@ export type Cesium3DTilesAppearance = {
   experimental_clipping?: EXPERIMENTAL_clipping;
   pointSize?: number;
   meta?: unknown;
+  apiKey?: string;
 };
 
 export type LegacyPhotooverlayAppearance = {

diff --git a/web/src/classic/core/mantle/types/index.ts b/web/src/classic/core/mantle/types/index.ts
@@ -96,6 +96,7 @@ export type DataType =
   | "geojson"
   | "3dtiles"
   | "osm-buildings"
+  | "google-photorealistic"
   | "czml"
   | "csv"
   | "wms"