Problem with Cesium integration in OpenLayers 5 - Cesium is not defined

Question

One quick question regarding ol-Cesium. I'm trying to integrate ol-Cesium into my Vue - Openlayers app. But I'm getting this type of error:

"ReferenceError: Cesium is not defined"

Basically what I'm trying is to activate 3d functionality on click but I'm stuck with error above.

I literally used code provided in examples

import OLCesium from 'olcs/OLCesium.js';

const ol3d = new OLCesium({map:  this.$store.getters.olMap}); 
ol3d.setEnabled(true);

I'm using OpenLayers v 5.3.0

score 1 · Accepted Answer · answered Jun 17 '19 at 09:27

Ok, I've figured it out. I only needed to add script tag inside an index.html file that points to Cesium build

Example below:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="Vue-OpenLayers" content="Author: Agrivi d.o.o.; Wraping OpenLayers inside Vue.js">
  <link rel="icon" href="<%= BASE_URL %>agrivi.ico">
  <title>Agrivi Maps</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
  <script src="https://cesiumjs.org/releases/1.53/Build/Cesium/Cesium.js" charset="UTF-8"></script>
</head>

<body>
  <noscript>
    <strong>We're sorry but web-app doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong>
  </noscript>

  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

Hope it will help someone :)

score 0 · Answer 2 · answered Jun 11 '19 at 19:50

The error is indicating it's a webpack error.

I'm referencing documentation found here: https://github.com/gberaudo/ol-cesium-webpack-example/blob/master/webpack.config.js

Make sure you've installed Cesium through NPM:

npm i --save-dev cesium olcs copy-webpack-plugin

Then, in your webpack.config.js file, add these lines:

const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
const CopywebpackPlugin = require('copy-webpack-plugin');

And in the configuration object of this file, add these lines:

output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),

    // Needed to compile multiline strings in Cesium
    sourcePrefix: ''
},
amd: {
    // Enable webpack-friendly use of require in Cesium
    toUrlUndefined: true
},
node: {
    // Resolve node module use of fs
    fs: 'empty'
},

Then, add Cesium alias to this file:

resolve: {
    alias: {
        // CesiumJS module name
        cesium: path.resolve(__dirname, cesiumSource)
    }
},

Then, add this to plugins in this file:

 plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        // Copy Cesium Assets, Widgets, and Workers to a static directory
        new CopywebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
        new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
        new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),
        new webpack.DefinePlugin({
            // Define relative base path in cesium for loading assets
            CESIUM_BASE_URL: JSON.stringify('')
        })
    ],

Thank you for your answer. I forgot to mention that I've created project with Vue-CLI -3 and the webpack configuration is composed dynamically by the vue cli. — Svinjica, Jun 11 '19 at 20:33

Problem with Cesium integration in OpenLayers 5 - Cesium is not defined

2 Answers2