How can I get the Cesium instance from cesium npm package?

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

I’m just trying the simple Getting Started guide but instead of getting the Cesium instance through the global scope of the injected js file in the public/index.html I want to get the same object trough the cesium npm package

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

So, I’,m trying this:

import { Cesium } from ‘cesium’;
// or even this without destructuring
import Cesium from ‘cesium’;

``

and I’m getting the same error on both cases:

Attempted import error: ‘Cesium’ is not exported from ‘cesium’

``

Otherwise, how can I get the same result that this does with the actual objects that cesium npm packages provides me

Cesium.Ion.defaultAccessToken = config.settings.map.cesiumIonKey;
this.CesiumViewer = new Cesium.Viewer(‘cesiumContainer’, Object.assign({}, CESIUM_OPTIONS, {
…this.props.options
}));

``

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I need this because I’m trying to embed the Cesium map on a ReactJS component like this:

class CtrlCesiumMap extends PureComponent {

componentDidMount() {

Cesium.Ion.defaultAccessToken = config.settings.map.cesiumIonKey;

this.CesiumViewer = new Cesium.Viewer(‘cesiumContainer’, Object.assign({}, CESIUM_OPTIONS, {

…this.props.options

}));

}

render() {

const { classes, id } = this.props;

return (

);

}

}

``

Furthermore, the code above totally works only if I add this to the public/index.html

``

4. The Cesium version you’re using, your operating system and browser.

Cesium npm package version: 1.63.1

OS: Windows 10
Browser: Google Chrome 78.0.3904.108

2

There is no separate Cesium object, the cesium module has all those classes, so you can import what you need directly from that:

import { Cesium3DTileset, createWorldTerrain, IonResource, Viewer } from ‘cesium’;

``

This is from the Cesium webpack example: https://github.com/AnalyticalGraphicsInc/cesium-webpack-example/blob/master/src/index.js

3

Note that there is a very useful library called “Resium”, which provides React components that wrap most of the Cesium API. It allows you to easily render a <Viewer> component in your React app, and put things like <Billboard> components inside that. Currently starting to use it on a rewrite of an existing app, and it’s looking great so far.

4

hi mark. were you able to produce Cesium3DTileset with resium?
i having trouble with it

thanks alot

5

Try this

import { Cesium3DTileset } from "cesium";
import { Cesium3DTileset as Cesium3DTilesetResium, useCesium } from "resium";
...
function ThreeDTilesLoader() {
    const { viewer } = useCesium();
    return <Cesium3DTilesetResium 
        show={show} 
        url={url} 
        onReady={(tileset: Cesium3DTileset) => {
            if (viewer && tileset) viewer.zoomTo(tileset);
        }}
    />
}