OpenLayers and Cesium – How to Fix OL-Cesium Example Not Working

cesiumol-cesiumopenlayers

I would like to test the Ol-Cesium on my computer with this example:
https://openlayers.org/ol-cesium/examples/oldfashioned.html

I saved the olcs.css, olcesium.js and Cesium.js file into my webserver's folder.
So, here is my code (I replaced only the lines where JS and CSS are located).

The 2D view with only OpenLayers is works well, but the 3D Cesium view doesn't. The map is black, and I got no error messages in console.

Do you have any tips what cause this error? 

<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css"
        type="text/css">
    <link rel="stylesheet" href="olcs.css" type="text/css">
    <style>
        #map {
            height: 300px;
            width: 500px
        }
    </style>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <script src="olcesium.js"></script>
    <script src="Cesium.js"></script>
</head>

<body>
    <p>Old-fashioned example</p>
    <input id="enable" type="button" value="Enable/disable" />
    <div id="map"></div>
</body>

<script>
    var ol2d = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'map',
        view: new ol.View({
            center: ol.proj.transform([25, 20], 'EPSG:4326', 'EPSG:3857'),
            zoom: 3
        })
    });

    var ol3d = new olcs.OLCesium({
        map: ol2d,
    });
    ol3d.setEnabled(true);
    var setEnabled = function () {
        ol3d.setEnabled(!ol3d.getEnabled())
    };
    document.getElementById('enable').addEventListener('click', setEnabled);
</script>

</html>

Best Answer

OL-Cesium works well with the main layer types (vector, raster, overlay).

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<script src="https://openlayers.org/ol-cesium/olcesium.js"></script>
<script src="https://cesiumjs.org/releases/1.62/Build/CesiumUnminified/Cesium.js"></script>

Example: OL6 + OL-Cesium + Cesium

Related Question