使用 maplibre-gl-js 加载本地 .mbtiles答案

【问题标题】：Load local .mbtiles with maplibre-gl-js使用 maplibre-gl-js 加载本地 .mbtiles
【发布时间】：2021-10-21 12:24:18
【问题描述】：

我想用maplibre-gl-js 加载一个本地 .mbtiles（带有矢量图块）（如果知道重要，可以在 Cordova 应用程序中）。据我了解，我应该使用addProtocol 方法。当我得到我的 console.log 时效果很好，但我不知道如何加载图块......

这是我的代码：

maplibregl.addProtocol('mbtiles', (params, callback) => {
  console.log('I get this log.');
  // but what to do here to get local mbtiles vector tiles loaded?
});

样式定义如下：

...
"sources": {
  "openmaptiles": {
    "type": "vector",
    "url": "mbtiles://map/data/test.mbtiles"
  }
},
...

任何帮助/提示表示赞赏:)

如果您需要更多信息，请随时询问。

附：我之前用过mapbox-gl-cordova-offline，试图了解这个插件是如何加载磁贴的，但我还想不通。

【问题讨论】：

标签： javascript cordova mbtiles maplibre-gl

【解决方案1】：

这是我正在做的事情：

maplibregl.addProtocol("custom", (params, callback) => {
// tileBuffer = get a arrayBuffer of a specific tile using params.url
    if (tileBuffer) {
        callback(null, tileBuffer, null, null);
    } else {
        let message = `Tile is not in DB: ${params.url}`;
        callback(new Error(message));
    }
    return { cancel: () => { } };
});

我使用cordova-sqlite-ext 是为了能够在 Cordova 中使用预填充的数据库。该样式有一个tiles: [custom://database-name/{z}/{x}/{y}]，以便知道要获取哪个图块。

完整的代码可以在这里找到： https://github.com/IsraelHikingMap/Site/blob/6aa2ec0cfb8891fa048b1d9e2a4fc7d4cbcc8c97/IsraelHiking.Web/src/application/services/database.service.ts

值得注意的是，我在 maplibre 中添加了 addProtocol 方法，特别是为此目的。 :-)

【讨论】：