无法在 Openlayers 中使用 TileJSON 作为矢量源

Question

我正在开发一台服务器，其中包括托管基于图块的地图数据。为此，我使用了 mbtiles 格式。我能够成功托管它，如果我将它用作常规 VectorTileSource，它可以正常工作，但我无法将其作为 TileJSON 源托管。

我正在使用 Vue 的最小客户端作为开发目的的测试基础。我已将原始端点添加为一层，将我的 TileJson 端点添加为另一层。我尝试过同时使用两层，一次使用一层。

当我使用原始端点时，我得到了一张地图，而当我使用 TileJSON 时，我什么也得不到。在这两种情况下，客户端都使用相同的参数调用原始端点（通过网络检查验证），只是不呈现数据。

这是我的最小客户端代码：

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
  ]
}

Answer 1

ol/source/TileJSON 是 ol/source/TileImage 的子类，仅用于图像块。您的 TileJSON 旨在用于 Mapbox 矢量样式定义 - 使用 ol/layer/MapboxVector 您可以使用下面的代码加载图块，因为它没有样式“图层”，所以不会设置任何样式。但您可以删除空样式以使用 OpenLayers 默认样式，或设置您自己的样式。

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();
});

无法在 Openlayers 中使用 TileJSON 作为矢量源

Unable to use a TileJSON as a vector source in Openlayers

openlayers