Search code examples
vue.jsopenlayerscesiumjsopenlayers-5

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


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"

enter image description here

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


Solution

  • 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 :)