'Cesium is not defined' in ol-cesium npm module

[ediebold]

I'm trying to use the new 2.0 ol-cesium package in npm. I have the OpenLayers 5.0.0-beta13 installed, and the Cesium npm package. I've followed the Cesium webpack tutorial to get Cesium working. Both ol and Cesium work individually. However, when I add the following under the working ol code:

import OLCesium from 'ol-cesium';
const ol3d = new OLCesium({map: map});

I get the following runtime error:

ReferenceError: Cesium is not defined at new exports (olcesium.js?aa03:2464)

The line in question is:

this.scene_ = new Cesium.Scene(sceneOptions);

Is there something I need to do to allow ol-cesium to see Cesium? In an attempt to debug, I even added the line import Cesium from 'cesium/Cesium', which is what I use to import Cesium by itself. That didn't work at all though.

[gberaudo]

Have you tried to expose the Cesium library on window?

[ediebold]

Thanks for the tip! I'm still relatively new to Javascript, so I wasn't aware that the window's scope was that powerful.

I do still have a problem though - the Cesium globe is all white. I manually checked the Cesium Scene's imagerylayer collection, and the array has the layer in it, but for some reason it isn't showing up. If I switch to 2d, the layer displays fine. There aren't any errors or anything showing up in the console.

EDIT: It might be worth seeing the code I'm using -

  import Cesium from 'cesium/Cesium';
  window.Cesium = Cesium;
  require('cesium/Widgets/widgets.css');
  import OLCesium from 'ol-cesium';

  import Map from 'ol/map';
  import View from 'ol/view';
  import * as olProj from 'ol/proj.js';
  import TileLayer from 'ol/layer/tile';
  import XYZ from 'ol/source/xyz';

  let tileWorldImagery = new TileLayer({
      source: new XYZ({
        url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
        crossOrigin: 'Anonymous',
      })
    });

  let map = new Map({
    target: "map",
    projection: 'EPSG:3857',
    layers: [
      tileWorldImagery
    ],
    view: new View({
      center: olProj.fromLonLat([134.364805, -26.710497]),
      zoom: 4,
      minZoom: 2,
    }),
  });
  
  const ol3d = new OLCesium({map: map}); // map is the ol.Map instance
  ol3d.setEnabled(true);
  window.ol3d = ol3d; // temporary hack for easy console debugging

[gberaudo]

@ediebold, I created https://github.com/gberaudo/ol-cesium-webpack-example based on your code.

• clone it;
• run npm i;
• run npm run start;
• open http://localhost:8080.

[ediebold]

Thanks @gberaudo, that example works great. There must be something wrong with my config somewhere. Hopefully this little demo repo will be useful to others as well though!

[ediebold]

Okay, I've fixed my issue! For anyone else who runs into something like this:

I should have looked more closely at the example code- it wasn't my config, but it was actually the changes to the ol import statements. For example, I originally had

import Map from 'ol/map';

but the imports need to look like this:

import Map from 'ol/Map.js';

I'd be lying if I said I understand why this distinction matters to ol-cesium and not ol by itself, but at least it's all fixed now.