fix: Cesium Ion acces token is not set expectedly (#160)

reearth · Jan 21, 2022 · e8e1831 · e8e1831
1 parent 1031c51
commit e8e1831
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 20 deletions.
diff --git a/src/components/molecules/Visualizer/Engine/Cesium/hooks.ts b/src/components/molecules/Visualizer/Engine/Cesium/hooks.ts
@@ -2,7 +2,7 @@ import { Color, Entity, Ion, Cesium3DTileFeature, Cartesian3 } from "cesium";
 import type { Viewer as CesiumViewer, ImageryProvider, TerrainProvider } from "cesium";
 import CesiumDnD, { Context } from "cesium-dnd";
 import { isEqual } from "lodash-es";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useDeepCompareEffect } from "react-use";
 import type { CesiumComponentRef, CesiumMovementEvent, RootEventTarget } from "resium";
 import { useCustomCompareCallback } from "use-custom-compare";
@@ -18,6 +18,8 @@ import terrain from "./terrain";
 import useEngineRef from "./useEngineRef";
 import { convertCartesian3ToPosition } from "./utils";
 
+const cesiumIonDefaultAccessToken = Ion.defaultAccessToken;
+
 export default ({
   ref,
   property,
@@ -40,14 +42,9 @@ export default ({
   onLayerDrop?: (layerId: string, propertyKey: string, position: LatLng | undefined) => void;
 }) => {
   const cesium = useRef<CesiumComponentRef<CesiumViewer>>(null);
-
+  const cesiumIonAccessToken = property?.default?.ion;
   // Ensure to set Cesium Ion access token before the first rendering
-  useLayoutEffect(() => {
-    const { ion } = property?.default ?? {};
-    if (ion) {
-      Ion.defaultAccessToken = ion;
-    }
-  }, [property?.default]);
+  Ion.defaultAccessToken = cesiumIonAccessToken || cesiumIonDefaultAccessToken;
 
   // expose ref
   const engineAPI = useEngineRef(ref, cesium);
@@ -74,7 +71,7 @@ export default ({
         (t): t is [string, ImageryProvider, number | undefined, number | undefined] => !!t[1],
       );
     setImageryLayers(newTiles);
-  }, [property?.tiles ?? []]);
+  }, [property?.tiles ?? [], cesiumIonAccessToken]);
 
   // terrain
   const terrainProperty = useMemo(
@@ -104,12 +101,14 @@ export default ({
   );
 
   const terrainProvider = useMemo((): TerrainProvider | undefined => {
-    return terrainProperty.terrain
+    const provider = terrainProperty.terrain
       ? terrainProperty.terrainType
         ? terrain[terrainProperty.terrainType] || terrain.default
         : terrain.cesium
       : terrain.default;
-  }, [terrainProperty.terrain, terrainProperty.terrainType]);
+    return typeof provider === "function" ? provider() : provider;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cesiumIonAccessToken, terrainProperty.terrain, terrainProperty.terrainType]);
 
   const backgroundColor = useMemo(
     () =>

diff --git a/src/components/molecules/Visualizer/Engine/Cesium/imagery.ts b/src/components/molecules/Visualizer/Engine/Cesium/imagery.ts
@@ -4,19 +4,25 @@ import {
   IonImageryProvider,
   OpenStreetMapImageryProvider,
   IonWorldImageryStyle,
-  createWorldImagery,
   UrlTemplateImageryProvider,
+  Ion,
 } from "cesium";
 
 export default {
-  default: () => createWorldImagery(),
+  default: () =>
+    new IonImageryProvider({
+      assetId: IonWorldImageryStyle.AERIAL,
+      accessToken: Ion.defaultAccessToken,
+    }),
   default_label: () =>
-    createWorldImagery({
-      style: IonWorldImageryStyle.AERIAL_WITH_LABELS,
+    new IonImageryProvider({
+      assetId: IonWorldImageryStyle.AERIAL_WITH_LABELS,
+      accessToken: Ion.defaultAccessToken,
     }),
   default_road: () =>
-    createWorldImagery({
-      style: IonWorldImageryStyle.ROAD,
+    new IonImageryProvider({
+      assetId: IonWorldImageryStyle.ROAD,
+      accessToken: Ion.defaultAccessToken,
     }),
   stamen_watercolor: () =>
     new OpenStreetMapImageryProvider({
@@ -41,7 +47,8 @@ export default {
         "Copyright: Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Communit",
       enablePickFeatures: false,
     }),
-  black_marble: () => new IonImageryProvider({ assetId: 3812 }),
+  black_marble: () =>
+    new IonImageryProvider({ assetId: 3812, accessToken: Ion.defaultAccessToken }),
   japan_gsi_standard: () =>
     new OpenStreetMapImageryProvider({
       url: "https://cyberjapandata.gsi.go.jp/xyz/std/",

diff --git a/src/components/molecules/Visualizer/Engine/Cesium/terrain.ts b/src/components/molecules/Visualizer/Engine/Cesium/terrain.ts
@@ -1,12 +1,20 @@
 import {
   ArcGISTiledElevationTerrainProvider,
   EllipsoidTerrainProvider,
-  createWorldTerrain,
+  IonResource,
+  CesiumTerrainProvider,
+  Ion,
 } from "cesium";
 
 export default {
   default: new EllipsoidTerrainProvider(),
-  cesium: createWorldTerrain(),
+  cesium: () =>
+    // https://github.com/CesiumGS/cesium/blob/main/Source/Core/createWorldTerrain.js
+    new CesiumTerrainProvider({
+      url: IonResource.fromAssetId(1, { accessToken: Ion.defaultAccessToken }),
+      requestVertexNormals: false,
+      requestWaterMask: false,
+    }),
   arcgis: new ArcGISTiledElevationTerrainProvider({
     url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
   }),