Cesium React Error

CesiumJS
1

I’ve found some online information relative to how to run Cesium in my React App. It seems simple, yet I get an error message that says

image
image580×305 18.6 KB

The console suggests that the failure is in the download of the JSON performed as part of the image layer access.

The basic cesium app is running as seen by the controls:

image
image642×219 22.1 KB

I construct the viewer as follows.

const viewer = new Cesium.Viewer("cesiumContainer", {
                terrain: Cesium.Terrain.fromWorldTerrain(),
                geocoder: false,
                baseLayerPicker: false
            });

I’ve also tried the following (to disable the need for bingmaps:

const osm = new Cesium.OpenStreetMapImageryProvider({
                url: 'https://a.tile.openstreetmap.org/'
            });

            const csm = new Cesium.IonImageryProvider({ assetId: 3 })

            const viewer = new Cesium.Viewer("cesiumContainer", {
                imageryProvider: osm,
                geocoder: false,
                baseLayerPicker: false
            });

Though I’ve used cesium in the past its been a few years. I have also tried resium, and I end up seeing the same exact error message. At this point I feel like I’m close.

This code runs inside a react useeffect. The uncaught exception points to engine/source/core/Resource.js

image
image3456×237 98 KB

The JSON parse fails because the resource data is not valid json

image
image1115×521 71.9 KB

Please provide help if you can.

2

I’ve got the last little bit working. I had to specify a base layer.

                baseLayer: new Cesium.ImageryLayer(new Cesium.OpenStreetMapImageryProvider({
                    url: "https://tile.openstreetmap.org/"
                })),

I think I am good for now.

3

Playing around “stamen” works for me.

image
image1920×483 63.4 KB

4

I’m still seeing the following errors, and I cant seem to see the circle of the earth consistently. When I type in the search box, the search box auto-completes the name properly, but the map doesnt zoom to that location (visibly).

image
image1920×678 99.1 KB

5

I’ve made some progress.. I used VITE to setup my react application so the following helped me to make updates to the framework of the application.
cesium-vite-example/src/main.js at main · CesiumGS/cesium-vite-example · GitHub

Specifically I dropped the following into my vite.config.js

import { viteStaticCopy } from "vite-plugin-static-copy";

const cesiumSource = "node_modules/cesium/Build/Cesium";
const cesiumBaseUrl = "cesiumStatic";

// https://github.com/CesiumGS/cesium-vite-example/blob/main/vite.config.js
// https://vite.dev/config/
export default defineConfig({
  define: {
    // Define relative base path in cesium for loading assets
    // https://vitejs.dev/config/shared-options.html#define
    CESIUM_BASE_URL: JSON.stringify(`/${cesiumBaseUrl}`),
  },
  plugins: [react(), basicSsl(), // Copy Cesium Assets, Widgets, and Workers to a static directory.
  // If you need to add your own static files to your project, use the `public` directory
  // and other options listed here: https://vitejs.dev/guide/assets.html#the-public-directory
  viteStaticCopy({
    targets: [
      { src: `${cesiumSource}/ThirdParty`, dest: cesiumBaseUrl },
      { src: `${cesiumSource}/Workers`, dest: cesiumBaseUrl },
      { src: `${cesiumSource}/Assets`, dest: cesiumBaseUrl },
      { src: `${cesiumSource}/Widgets`, dest: cesiumBaseUrl },
    ],
  }),],
  server: {
    ...
  },
})

The end result is that I no longer get that error, and I can see the shape of the globe.

image
image1920×452 55.5 KB

My code currently looks like

unction Map3D() {
    const cesiumRef = useRef(null);

    const accessToken = "aa..";
    Cesium.Ion.defaultAccessToken = accessToken;

    useEffect(() => {
        console.log("My Ref: ", cesiumRef.current)
        if (cesiumRef.current) {
           
            const viewer = new Cesium.Viewer("cesiumContainer", {
                terrain: Cesium.Terrain.fromWorldTerrain(),
                geocoder: false,

            });
            console.log("Here I am Flying")
            viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
                orientation: {
                    heading: Cesium.Math.toRadians(0.0),
                    pitch: Cesium.Math.toRadians(-15.0),
                }
            });
            return () => {
                console.log("Destroy viewer")
                viewer.destroy();
            };
        }
    }, []);

    return <div id="cesiumContainer" ref={cesiumRef} style={{ width: '100%', height: '800px' }} />;
}

The layers are not yet being displayed properly. The default access token that I am using is the default that was created for me when I set up an account with CESIUM ION. Is this adequate?

Also do I need a token with bing maps and do I need to configure bingmaps terrain provider in a specific way?

6

Hi @David_Sargrad ,

Thanks for your post and being part of the Cesium community.

Yes your default ion token that was created when you created your Cesium ion account is adequate to load data into your CesiumJS application during development.

Regarding Bing Maps and terrain, as far as I know Cesium does not currently support any terrain data from Bing Maps.

  • You can see the data provided directly through ion here. which include Aerial Imagery from Bing Maps. Note that no additional key is required besides your ion key for these datasats.
  • You can also see the various ...TerrainProvider classes available in CesiumJS in the docs here which can be used to load terrain datasets into your scene.

Please let us know if you have further questions and we would be happy to help.

Best,
Luke