OLcesium how to load a 3d terrain from mapTile Cloud

Question

I use OpenLayers 6 and ol-cesium 2.15. The basemap in use on a 2d view is the ESRI ocean basemap. The problem is that, when using cesium, the map shows a white circle in correspondence of each pole (due to the nature of the ESRI map). To avoid this I imagined I could use a 3d terrain.

However I am having difficulties in getting it. I tried with free MapTile Cloud. The idea is: when I change to a 3d view I take the ocean basemap out and add a 3d terrain. But when I run the code, the 3d globe appears with my custom vector layers and no terrain (just sort of gradient white colors).

Any suggestion?

Here's my code

const view =  new ol.View({
    projection: mercatorProjection,
    //center: ol.proj.transform([-97.6114, 38.8403], 'EPSG:3857', 'EPSG:4326'),
    center: ol.proj.transform([0,0], 'EPSG:3857', 'EPSG:4326'),
    zoom: 0
    }); 

 const ocean_map =
    new ol.layer.Tile({
       source: new ol.source.XYZ({
         attributions:'Tiles © <a href="https://services.arcgisonline.com/arcgis/' +
         'rest/services/Ocean/World_Ocean_Base/MapServer">ArcGIS</a>',
         url: 'https://services.arcgisonline.com/arcgis/rest/services/' +
         'Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}', /*ocean base map*/
         crossOrigin: "Anonymous",
         maxZoom: 15
       }),
       visible: true,
});
const source_eez=
 new ol.source.Vector({
   format: new ol.format.TopoJSON(),
   url: url_child + '/wp-content/themes/mmpatf/map/resources/EEZ_imma_topo.json',
   attributions: ['EEZ - ISRA'],
   crossOrigin: 'anonymous',
   loader: testXHR   
 });
 const layer_eez =
 new ol.layer.Vector({
   source: source_eez,
   style: eezStyle,
   name: 'EEZ - ISRA',
   visible: false,
 });
const map = new ol.Map({
    target: 'map',
    layers: [],
    view: view
});
map.addLayer(ocean_map);
map.addLayer(layer_eez);

/*CESIUM*/
//the following code enables the change of view in 3D Cesium (ol-cesium)
const ol3d = new olcs.OLCesium({
    map: map,
  });
  
  // Set up a variable to track whether the 3D view is enabled
let is3DViewEnabled = false;
  
  // Function to enable/disable the 3D view
document.getElementById('enable').onclick = function() {
    is3DViewEnabled = !is3DViewEnabled;
    ol3d.setEnabled(is3DViewEnabled);
  
    // Check if 3D view is enabled
    if (is3DViewEnabled) {

        map.getLayers().forEach(function(layer) {
            //change layer and get a 3D map
            if (layer instanceof ol.layer.Tile) {
            map.removeLayer(layer);
            const raster = new ol.layer.Tile({
                source: new ol.source.Tile({
                url: 'https://api.maptiler.com/tiles/terrain-quantized-mesh/{z}/{x}/{y}.quantized-mesh-1.0?key=MYKEY',
                }),
            });
            map.addLayer(raster);
            }
        });
 
        // Enable shadow map to allow Cesium to cast scene's shadows
        const scene = ol3d.getCesiumScene();
        scene.shadowMap.enabled = true;
        // Enable lighting the globe with the sun as a light source to have dynamic lighting conditions according to the position of the sun
        scene.globe.enableLighting = true;
        
            // Refresh the view
            map.updateSize(); // Refresh the OpenLayers map

    }
  
};

Answer 1

The quantized mesh will let you see terrain as in https://docs.maptiler.com/cesium/ it will not fill the holes at the poles, and the format is not supported by OpenLayers. To display the mountains in ol-cesium you would need to set the terrainProvider in the Cesium scene:

const scene = ol3d.getCesiumScene();

const terrainProvider = new Cesium.CesiumTerrainProvider({
  url: 'https://api.maptiler.com/tiles/terrain-quantized-mesh-v2/?key=MYKEY',
  requestVertexNormals: true
});

scene.terrainProvider = terrainProvider;

The holes at the poles is different problem. In the MapTiler example Cesium fills the holes by extending the color at the edge of the imagery to the pole

That works with a Cesium Viewer, but ol-cesium uses a Cesium Scene which does not support that, so your only option to get coverage at the poles would be to use an OpenLayers view and source in EPSG:4326 which reaches the poles as in https://openlayers.org/en/latest/examples/epsg-4326.html or https://openlayers.org/en/latest/examples/ogc-map-tiles-geographic.html

Working example https://jsbin.com/hudezugonu/edit?html,output