Ol-Cesium@2.10.0 + OpenLayers@6.1.1 + Angular@8.2.0 (Problem)

I’m trying to integrate olcesium with my application, and I can’t figure it out, how to do it. I’m relative new with angular and I dont know how to use that UMD file mentioned at intall tutorial.

Can someone help me configure my app to run a simple 3d Map with openlayer OSM at Angular 8?

My steps were: Install the package: npm i --save ol-cesium

adding OLCesium.js to scripts Path at “Angular.json”:

...
],
            "scripts": [
              "node_modules/bootstrap/js/src/util.js",
              "node_modules/ol-cesium/src/olcs/OLCesium.js"
            ]
          },
...

imported the package as the tutorial said with some changes:

...
import OLCesium from 'ol-cesium/src/olcs/OLCesium.js'; << using this way

import OLCesium from 'olcs/OLCesium.js'; <<< this way was giving error olcs not found
...

build a map with OpenLayers, then input that map inside the cesium object:

startMap(){
    this.view = new View({
          center: this.brasil,
          zoom: 8
        });
    this.map = new Map({
          target: 'map',
          layers: [this.OSMLayer],
          loadTilesWhileAnimating: true,
          loadTilesWhileInteracting: false,
          view: this.view
    });
    var ol3d = new OLCesium({map: this.map}); // ol2dMap is the ol.Map instance
    ol3d.setEnabled(true);
}

And when I run the code, I get this error.

ERROR ReferenceError: Cesium is not defined
    at new OLCesium (OLCesium.js:173)
    at MapaComponent.setMap (mapa.component.ts:86)
    at MapaComponent.ngOnInit (mapa.component.ts:48)
    at checkAndUpdateDirectiveInline (core.js:31910)
    at checkAndUpdateNodeInline (core.js:44367)
    at checkAndUpdateNode (core.js:44306)
    at debugCheckAndUpdateNode (core.js:45328)
    at debugCheckDirectivesFn (core.js:45271)
    at Object.eval [as updateDirectives] (HomeComponent.html:9)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)

Can some one help me do it, at least, show the map?

[JarnDev]

These were the steps that I took to make it work using Ol-Cesium@2.10.0 + OpenLayers@6.1.1 + Angular@8.2.0:

1. Install cesium, openlayer and ol-cesium(for angular) npm i cesium ol ol-cesium

2. Edited my angular.json for Cesium and OL

"assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/cesium/Build/Cesium",
                "output": "/assets/cesium"
              }
            ],
            "styles": [
              "node_modules/cesium/Build/Cesium/Widgets/widgets.css",
              "node_modules/ol/ol.css",
              "src/styles.css"
            ]

1. Edited my main.ts for Cesium:

import * as Cesium from 'cesium'
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

Cesium.Ion.defaultAccessToken = environment.accessToken; 
/* If you need to use Ion Features, you will need to add your personal token, add it at environment and import it at your main.ts for usage. Like above or do it as you wish*/

window['CESIUM_BASE_URL'] = '/assets/cesium/';
window['Cesium'] = Cesium


platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

**If you need to use Ion Features, you will need to add your personal token, add it at environment and import it at your main.ts for usage.

1. Imported everything I needed into component: MAP-COMPONENT.TS

import { Component, OnInit } from '@angular/core';

//ol imports
import { BingMaps } from 'ol/source.js';
import { fromLonLat } from 'ol/proj.js';
import { Tile as TileLayer } from 'ol/layer.js';
import Map from 'ol/Map.js';
import View from 'ol/View.js';

import OLCesium from 'ol-cesium'
import * as Cesium from 'cesium'


@Component({
  selector: 'app-map-view',
  templateUrl: './map-view.component.html',
  styleUrls: ['./map-view.component.scss']
})
export class MapViewComponent implements OnInit {

  private brasil = fromLonLat([-43.1917, -22.9034]);
  private view: View;
  private map: Map;

  private styles = [
    'Road',
    'RoadOnDemand',
    'Aerial',
    'AerialWithLabels',
    'collinsBart',
    'ordnanceSurvey'
  ];

  bingLayer = new TileLayer({
    visible: true,
    preload: Infinity,
    source: new BingMaps({
      key: <BINGMAP KEY>,
      imagerySet: this.styles[3],
      maxZoom: 19
      //minZoom:9
      //extent: retangulo de limitação
    })
  });


  constructor() { }

  ngOnInit() {
    this.startMap()
  }

  startMap() {
    this.view = new View({
      center: this.brasil,
      zoom: 9
    });
    this.map = new Map({
      target: 'map',
      layers: [this.bingLayer],
      // Improve user experience by loading tiles while animating. Will make
      // animations stutter on mobile or slow devices.
      loadTilesWhileAnimating: true,
      loadTilesWhileInteracting: false,
      view: this.view
    });

    const ol3d = new OLCesium({
      map: this.map
    })

    const scene = ol3d.getCesiumScene();
    scene.terrainProvider = Cesium.createWorldTerrain({ requestVertexNormals: true });

    ol3d.setEnabled(true);

  }

}

1. Created a view: MAP-COMPONENT.html <div style="width:100vw; height:100vh" id="map"></div>

And that was all! hope it help someone out there! 🤣 If you do these steps I think you’ll get your 3d map aswell, good luck and have fun.

[gberaudo]

Happy you found out a solution @Jarn40. Thanks for sharing your experience.