0

我需要离线运行 OpenLayers 实例。我正在尝试加载从此处下载的地图图像图块。我正在运行文档中指定的 TilerServer-GL docker 映像。我有一个简单的文件来显示OpenLayers QuickStart 文档index.html中指定的 OpenLayers 地图。我对他们提供的唯一更改是更改 Tile Layer 源，如下所示：.html

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,
}),

OSM()使用QuickStart 文档中指定的源时，此地图会按预期加载。它还加载了我找到的其他在线资源。但是，当我按照我在上面的代码中指出的那样给它提供对本地 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

操作系统：ubuntu 20.04 LTS

节点版本：v16.5.0

OpenLayers 版本：6.6.1

编辑：

重现步骤：

  1. 将OpenLayers QuickStart中的简单入门 html 复制到名为index.html.
  2. 将 TileLayer 源代码替换为我在上面发布的代码
  3. 下载一些mbtiles，例如，这些
  4. 将 .mbtiles 文件移动到与index.html
  5. 安装 docker（如果需要）
  6. 跑docker pull maptiler/tileserver-gl
  7. index.html在与run相同的目录中docker run --rm -it -v $(pwd):/data -p 8080:80 maptiler/tileserver-gl （注意：如果您在 Windows 上，则需要使用${pwd}，而不是$(pwd)。如果您的文件夹名称中包含空格字符，Docker 可能会引发警告。）
  8. 在浏览器中加载 index.html（IE 不算）。

多田！你（几乎）有一个工作的离线地图应用程序！

4

1 回答 1

0

事实证明，抛出 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 获取请求中工作。

于 2021-10-11T21:30:41.637 回答