Add Resium support for Google Maps Photorealistic 3D tiles

[jakedarby24]

Cesium recently added support for Google Maps' Photorealistic tiles in version 1.105.1. It would be great to have a React component for this directly within Resium instead of having to use the useCesium hook.

https://cesium.com/learn/cesiumjs-learn/cesiumjs-photorealistic-3d-tiles/

I can get this working with the useCesium hook as below:

const getGoogleMaps = async () => {
  try {
    const googleMaps3DTileset = await createGooglePhotorealistic3DTileset();
    return googleMaps3DTileset;
  } catch {
    console.log("failed to load tiles");
  }
};
const googleMaps3DTileset = await getGoogleMaps().then((response) => response);

const GoogleMapsOverlay = () => {
  const { viewer } = useCesium();
  viewer.scene.primitives.add(googleMaps3DTileset);
};

This feature is dependent on PR #594

[wkgalla]

@jakedarby24 - Can you please share the full code, which component you used for this?

[jakedarby24]

@wkgalla Yeah of course. I have a component called CesiumMap and another component called GoogleMapsOverlay.

CesiumMap.jsx:

import { Viewer } from "resium";
import GoogleMapsOverlay from "./GoogleMapsOverlay";

const CesiumMap = () => {
  return (
    <Viewer>
      <GoogleMapsOverlay />
    </Viewer>
  )
}

export default CesiumMap;

GoogleMapsOverlay.jsx:

import { useCesium } from "resium";
import { createGooglePhotorealistic3DTileset } from "cesium";

const getGoogleMaps = async () => {
  try {
    const googleMaps3DTileset = await createGooglePhotorealistic3DTileset();
    return googleMaps3DTileset;
  } catch {
    console.error("failed to load tiles");
  }
};
const googleMaps3DTileset = await getGoogleMaps().then((response) => response);

const GoogleMapsOverlay = () => {
  const { viewer } = useCesium();
  viewer.scene.primitives.add(googleMaps3DTileset);
};

export default GoogleMapsOverlay;

I then import CesiumMap as normal within my App. Not sure if this is the best or most appropriate way to achieve this, but it works!

[rot1024]

Thank you for report. PR is welcome!

[martimpassos]

is this achievable with

<Cesium3DTileset url={`https://tile.googleapis.com/v1/3dtiles/root.json?key=${process.env.REACT_APP_TILES_KEY}`} />

? I believe I had this working two weeks ago but now only @jakedarby24 workaround works for me. I'm trying to set fog, tileCacheSize and other optimizations but they don't seem to be applied neither with:

const GoogleMapsOverlay = () => {
  const { viewer } = useCesium();
  viewer.scene.primitives.add(googleMaps3DTileset);
  viewer.scene.fog.enabled = true;
  viewer.scene.fog.density = 1;
  viewer.scene.fog.minimumBrightness = 0;
};

nor with

<Viewer
      full
      // creditContainer={creditContainer}
      timeline={false}
      animation={false}
      fullscreenButton={false}
      geocoder={false}
      homeButton={false}
      infoBox={false}
      navigationHelpButton={false}
      baseLayerPicker={false}
      scene3DOnly={true}
      requestRenderMode={true}>
      <Globe tileCacheSize={2000} />
      <Fog enabled={true} density={1} minimumBrightness={0} /> 
      <GoogleMapsOverlay />
</Viewer>

[leeprobert]

Any progress on this? @martimpassos

[leeprobert]

I have not been able to set the Sky Atmosphere or Fog with the 3D Map Tiles overlay. Has anyone had any luck with this?

[anil1712]

any workaround of this?

[anil1712]

can someone share any working example?