时间戳

首页 > 解决方案 > 使用 maplibre-gl-js 加载本地 .mbtiles

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

问题描述

我想用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"
  }
},
...

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

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

PS 我之前使用过 mapbox-gl-cordova-offline并试图了解这个插件如何加载瓷砖，但我还无法弄清楚。

标签： javascriptcordovambtilesmaplibre-gl

解决方案

这是我为实现这一目标所做的工作：

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

值得注意的是，我addProtocol专门为此目的将方法添加到了 maplibre。:-)

推荐阅读