meteorjs と cordova を使用してハイブリッド モバイル アプリを開発しています。アプリはオフライン マップをサポートする必要があります。オフラインで表示できる領域の Maperitive を使用して .mbtiles ファイルをエクスポートし、ファイルをアプリにコピーして、Leaflet でタイルを読み込むときにアクセスできるようにしました。そのために、ファイル システム用のコルドバ プラグイン (.mbtiles を適切な場所にコピーするため) とコルドバ sqlite プラグイン (.mbtiles データにアクセスするため) を使用しました。 .
機能しない部分は、マップ上にタイルを「配置」することです。.mbtiles sqlite データベースにアクセスして必要なタイルを取得するカスタム タイル レイヤーを使用しています。
//TilesLayer.MBTiles.js
L.TileLayer.MBTiles = L.TileLayer.extend({
mbTilesDB: null,
initialize: function(url, options, db) {
this.mbTilesDB = db;
L.Util.setOptions(this, options);
},
getTileUrl: function (tilePoint, zoom, tile) {
var z = this._getZoomForUrl();
var x = tilePoint.x;
var y = Math.pow(2, z) - tilePoint.y - 1;
var base64Prefix = "data:image/png;base64,";
this.mbTilesDB.readTransaction(function(tdx) {
tdx.executeSql("SELECT tile_data FROM tiles WHERE zoom_level = ? AND tile_column = ? AND tile_row = ?;", [z, x, y], function(tx, res) {
tile.src = base64Prefix + res.rows.item(0).tile_data;
console.log("tile-src" + JSON.stringify(tile.src));
}, function(tx, error) {
console.log('SELECT error: ' + error.message);
});
}, function(error) {
console.log('transaction error: ' + error.message);
}, function() {
console.log('transaction ok');
});
},
_loadTile: function (tile, tilePoint, zoom) {
tile._layer = this;
tile.onload = this._tileOnLoad;
tile.onerror = this._tileOnError;
this.getTileUrl(tilePoint, zoom, tile);
} });
タイルはマップに表示されません。リーフレットは正しいタイルを要求します。これらのタイルはデータベースから正常に返されますが、表示されません。
-おそらくこの行が問題ですか：
tile.src = base64Prefix + res.rows.item(0).tile_data;
tile_data を正しく使用していませんか? 別のものに変換する必要がありますか？.mbtiles ファイルのタイルは BLOB として保存されますが、.png 画像です。
- 牌を返すときに電話に出ませんか? 何かのようなもの：
tilelayer.fire('tileloadstart', {
tile: tile
});
tile.src が設定された後に呼び出しますか?
どんな助けでも大歓迎です。