Edit

Layer Min/Max Resolution

Show/hide layers depending on current view resolution.

Zoom in twice: the MapBox layer should hide and the OSM layer should be shown.

If you continue to zoom in, you'll see the OSM layer also disappear.

The rendering of the layers are here controlled using minResolution and maxResolution options.

Copy 
index.html<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Layer Min/Max Resolution</title>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <style>
      .map {
        width: 100%;
        height:400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="index.js"></script>
  </body>
</html>
Copy 
index.jsimport 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import TileJSON from 'ol/source/TileJSON';

var key = 'Your Mapbox access token from https://mapbox.com/ here';

/**
 * Create the map.
 */
var map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
      minResolution: 200,
      maxResolution: 2000
    }),
    new TileLayer({
      source: new TileJSON({
        url: 'https://api.tiles.mapbox.com/v4/mapbox.natural-earth-hypso-bathy.json?secure&access_token=' + key,
        crossOrigin: 'anonymous'
      }),
      minResolution: 2000,
      maxResolution: 20000
    })
  ],
  target: 'map',
  view: new View({
    center: [653600, 5723680],
    zoom: 5
  })
});
Copy 
package.json{
  "name": "min-max-resolution",
  "dependencies": {
    "ol": "6.1.1"
  },
  "devDependencies": {
    "parcel": "1.11.0"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --experimental-scope-hoisting --public-url . index.html"
  }
}