如何在不抛出 CORB 错误的情况下将 TileServer-GL 地图图块提供给 Openlayers

Question

我需要运行一个 OpenLayers 实例离线。我正在尝试加载从 here. I am running TilerServer-GL docker image as specified in the documentation. I have a simple index.html file to display an OpenLayers map as specified in the OpenLayers QuickStart documentation 下载的地图图像图块。我对他们提供的 .html 所做的唯一更改是更改 Tile Layer 源，如下所示：

source: new ol.source.XYZ({
  url: 'http://localhost:8080/data/openmaptiles_satellite_lowres/#{z}/{x}/{y}',
  attributions: ['MapTiler: https://www.maptiler.com/copyright/', 'OpenStreetMap: https://www.openstreetmap.org/copyright'],
  maxZoom: 5,
}),

当使用 QuickStart 文档中指定的 OSM() 源时，此地图会按预期加载。它还加载我找到的其他在线资源。但是，当我按照我在上面的代码中指出的那样为它提供对本地 TileServer-GL 实例的引用时，我收到以下 CORB 错误：

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://localhost:8080/data/openmaptiles_satellite_lowres/
with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details

如何安全地访问 TileServer-GL 提供的切片数据？我不想禁用浏览器安全功能作为解决方法。

注意：我知道 TileServer 正在从浏览器获取请求，因为 TileServer 控制台会实时记录请求。例如： GET /data/openmaptiles_satellite_lowres/ 200 899 - 0.704 ms

OS: ubuntu 20.04 LTS

节点版本：v16.5.0

OpenLayers 版本：6.6.1

编辑：

重现步骤：

将 OpenLayers QuickStart 中的简单启动程序 html 复制到名为 index.html.
用我在上面发布的代码替换 TileLayer 源代码
下载一些 mbtiles，例如 these
将 .mbtiles 文件移动到与 index.html
安装docker（如果需要）
运行 docker pull maptiler/tileserver-gl
在与 index.html 运行 docker run --rm -it -v $(pwd):/data -p 8080:80 maptiler/tileserver-gl 相同的目录中（注意：如果您使用 Windows，则需要使用 ${pwd}，而不是 $(pwd)。如果您的文件夹名称之一具有 [=72=，Docker 可能会发出警告]里面的字符。）
在浏览器中加载 index.html（IE 不算）。

多田！您（几乎）有一个可用的离线地图应用程序！

Answer 1

事实证明，抛出 CORB 错误的原因是服务器正在响应 'text/html' MIME 类型，而浏览器需要图像。由于不匹配，因此引发了 CORB 错误。

服务器响应类型错误，因为 URL 错误。我有：

http://localhost:8080/data/openmaptiles_satellite_lowres/#{z}/{x}/{y}

虽然需要

http://localhost:8080/data/openmaptiles_satellite_lowres/{z}/{x}/{y}.jpg

如果我将第一个 URL 直接放入浏览器，它工作正常，但只有第二个 URL 在 JavaScript 提取请求中工作。

如何在不抛出 CORB 错误的情况下将 TileServer-GL 地图图块提供给 Openlayers

How to serve TileServer-GL map tiles to Openlayers without throwing CORB error

javascript

electron

openlayers

openlayers-6

tileserver-gl