This example uses OpenLayers v10.9.0. The latest is v.
Edit

#### Limited Layer Extent

extent 5 tilejson 5

#####

Restricting layer rendering to a limited extent.

This example uses the `layer.setExtent()` method to modify the extent of the overlay layer. Use the controls above to limit rendering based on an extent (approximate country bounds).

##### main.js

    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import TileLayer from 'ol/layer/Tile.js';
    import {transformExtent} from 'ol/proj.js';
    import TileJSON from 'ol/source/TileJSON.js';

    function transform(extent) {
      return transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
    }

    const extents = {
      India: transform([68.17665, 7.96553, 97.40256, 35.49401]),
      Argentina: transform([-73.41544, -55.25, -53.62835, -21.83231]),
      Nigeria: transform([2.6917, 4.24059, 14.57718, 13.86592]),
      Sweden: transform([11.02737, 55.36174, 23.90338, 69.10625]),
    };

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

    const base = new TileLayer({
      source: new TileJSON({
        url:
          'https://api.tiles.mapbox.com/v4/mapbox.world-light.json?secure&access_token=' +
          key,
        crossOrigin: 'anonymous',
      }),
    });

    const overlay = new TileLayer({
      extent: extents.India,
      source: new TileJSON({
        url:
          'https://api.tiles.mapbox.com/v4/mapbox.world-black.json?secure&access_token=' +
          key,
        crossOrigin: 'anonymous',
      }),
    });

    const map = new Map({
      layers: [base, overlay],
      target: 'map',
      view: new View({
        center: [0, 0],
        zoom: 1,
      }),
    });

    for (const key in extents) {
      document.getElementById(key).onclick = function (event) {
        overlay.setExtent(extents[event.target.id]);
      };
    }

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Limited Layer Extent</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="node_modules/ol/ol.css">
        <style>
          .map {
            width: 100%;
            height: 400px;
          }
        </style>
      </head>
      <body>
        <div id="map" class="map"></div>
        <button type="button" class="btn btn-light" id="India">India</button>
        <button type="button" class="btn btn-light" id="Argentina">Argentina</button>
        <button type="button" class="btn btn-light" id="Nigeria">Nigeria</button>
        <button type="button" class="btn btn-light" id="Sweden">Sweden</button>

        <script type="module" src="main.js"></script>
      </body>
    </html>

##### package.json

    {
      "name": "layer-extent",
      "dependencies": {
        "ol": "10.9.0"
      },
      "devDependencies": {
        "vite": "^3.2.3"
      },
      "scripts": {
        "start": "vite",
        "build": "vite build"
      }
    }