Openlayers 5 服务于本地 MBTiles答案

【问题标题】：Openlayers 5 serve local MBTilesOpenlayers 5 服务于本地 MBTiles
【发布时间】：2019-03-22 08:49:10
【问题描述】：

我正在尝试为 Ionic 4 项目中的本地 .mbtiles 提供图块。

一步一步我设法下载了mbtiles并使用XYZ成功创建了源

new XYZ({
  tileLoadFunction: (tile: ImageTile, url) => {
    //stuff
  },
  tileUrlFunction: (c) => {
    return c[0] + '/' + c[1] + '/' + c[2];
  },
  projection: 'EPSG:3857'
});

基本上，如果我将以下行添加到//stuff 它可以工作（我以表示绿色方块的基本 base64 字符串为例）

tile.getImage().setAttribute('src', 'base 64 string here');

但是当我尝试使用 SQLite 从 mbtiles 中检索磁贴时，它停止工作。我尝试了各种代码组合，但都没有按预期工作。

我注意到这是因为tileLoadFunction 不会等待对 SQLite 数据库的异步调用并在仍然为空时渲染图像。例如，如果我将此代码与返回 Promise 的 getTile 函数一起使用，则它不起作用。

getTile(tile.getTileCoord()).then((base64) => {
  tile.getImage().setAttribute('src', base64);
})

事实是它进入then 并执行本地代码和我知道的base64 字符串是正确的。显然 OpenLayers 在解析 getTile 之前正在渲染图块。

我还发现tileloaderror 事件是为每个图块调度的，但我不知道如何将其用作优势。

【问题讨论】：

获取url然后设置图片src。与此处使用 xhr 的示例类似 openlayers.org/en/latest/apidoc/module-ol_Tile.html
问题是我没有每个图块的特定 url。我只有本地保存的 mbtiles url，它对所有图块都是唯一的，它不提供图块。为了得到它，我还需要打开数据库并在数据库中找到磁贴。要使用它，我应该在本地加载一个我没有加载的服务器。或者，也许我错过了什么？无论如何感谢您的帮助

标签： typescript openlayers-5 mbtiles

【解决方案1】：

这是我找到的解决方案。

显然问题不在于对异步函数的调用，而是对getTileCoord 函数的调用，我正在将正确的参数传递给异步函数。我不知道为什么会发生这种情况，但删除该调用并更改它计算 tileLoadFunction 的 url 参数中的坐标解决了问题。

生成的代码如下所示

new XYZ({
  tileLoadFunction: (tile: any, url) => {
    let coords: [number, number, number] = [0, 0, 0];
    let tmp: string[] = url.split('/');
    for (let i in tmp) {
      coords[i] = parseInt(tmp[i]);
    }
    coords[2] = -coords[2]; // the y coordinates is negative
    this.storageService.getTile(coords).then(function (tileBase64: string) {
      tile.getImage().src = tileBase64;
    });
  },
  tileUrlFunction: (c) => {
    return c[0] + '/' + c[1] + '/' + c[2];
  },
  projection: 'EPSG:3857'
});

【讨论】：