我正在使用meteorjs和cordova开发混合移动应用程序。应用程序需要具有离线地图支持。我使用Maperitive导出了一个.mbtiles文件,该区域可以离线查看并将文件复制到我的应用程序,以便在使用Leaflet加载图块时可以访问它。为此,我使用了用于文件系统的cordova插件(将.mbtiles复制到正确的位置)和cordova sqlite插件(用于访问.mbtiles数据)并且该部分可用,当传单请求tile whit z,x和y时,我可以成功加载tile_data
不起作用的部分是将瓷砖“放置”在地图上。我正在使用一个自定义图块层来访问.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);
} });
地图上不显示平铺。 Leaflet请求正确的图块,这些图块从数据库成功返回,但不显示。
- 也许这就是问题所在:
tile.src = base64Prefix + res.rows.item(0).tile_data;
我没有正确使用tile_data。我是否必须将其转换为其他内容? .mbtiles文件中的tile存储为BLOB,但是.png图像。
- 当我把瓷砖传回来时,我错过了一个电话? 类似的东西:
tilelayer.fire('tileloadstart', {
tile: tile
});
在设置了tile.src之后调用它?
非常感谢任何帮助。