Unable to use a TileJSON as a vector source in Openlayers

I've working on a server that among other things will be hosting tile based map data. For this I'm using the mbtiles format. I'm able to host this successfully and it works if I use it as a regular VectorTileSource, but I'm unable to host it as a TileJSON source.

I'm using Vue's minimal client as a test base for development purposes. I've added the raw endpoint as one layer and my TileJson endpoint for the other layer. I've tried with both layers at the same time and with one at a time.

When I'm using the raw endpoint I get a map, and when I use the TileJSON I don't get anything. In both cases the raw endpoint is being called with the same parameters by the client (verified by network inspection), the data just isn't rendered.

Here's my very minimal client code:

import './style.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import TileJSON from 'ol/source/TileJSON';
import OSM from 'ol/source/OSM';
import MVT from 'ol/format/MVT';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';

const map = new Map({
  target: 'map',
  layers: [
    new VectorTileLayer({ // This layer works as intended.
      source: new VectorTileSource({
        format: new MVT(),
        url: 'http://bgo-dt-jua:8081/api/MapTile/basemap/{z}/{x}/{y}.pbf',
        maxZoom: 14,
      }),
    }),
    new VectorTileLayer({ // However this layer does not.
      source: new TileJSON({
        format: new MVT(),
        url: 'http://bgo-dt-jua:8081/api/MapTile/basemap.json',
        maxZoom: 14,
      }),
    }),
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/x-icon" href="https://openlayers.org/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Using OpenLayers with Vite</title>
  </head>
  <body>
    <div id="map"></div>
    <script type="module" src="./main.js"></script>
  </body>
</html>

TileJSON

{
  "specVersion": "3.0.0",
  "name": "OpenMapTiles",
  "description": "A tileset showcasing all layers in OpenMapTiles. http://openmaptiles.org",
  "dataVersion": "1.0.0",
  "attribution": "OpenMapTiles",
  "scheme": "xyz",
  "tiles": [
    "http://bgo-dt-jua:8081/api/MapTile/basemap/{z}/{x}/{y}.pbf"
  ],
  "vectorLayers": [
    {
      "id": "water",
      "description": "",
      "minimumZoom": 0,
      "maximumZoom": 14,
      "fields": {
        "class": "String"
      }
    }
  ],
  "minimumZoom": 0,
  "maximumZoom": 14,
  "bounds": [
    -180,
    -85.0511,
    180,
    85.0511
  ]
}

Solution

ol/source/TileJSON is a subclass of ol/source/TileImage and is only used for image tiles. Your TileJSON is intended for use in a Mapbox vector style definition - using ol/layer/MapboxVector you might be able to load tiles using the code below which will not style anything as it has no style "layers". But you can remove the empty style to use the OpenLayers default, or set your own style.

const layer = new MapboxVector({
  styleUrl:
    'data:,' +
    encodeURIComponent(
      JSON.stringify({
        version: 8,
        sources: {
          openmaptiles: {
            url: 'http://bgo-dt-jua:8081/api/MapTile/basemap.json',
            type: 'vector',
          },
        },
        layers: [],
      })
    ),
});

layer.once('change', function () {
  layer.setStyle();
});