提供地图瓦片包以供离线使用

2022-01-12 00:00:00 openstreetmap mapbox leaflet javascript

我正在制作一个必须离线工作的网络应用程序.到目前为止一切正常，我的最后一步是将地图图块离线.幸运的是，我确切地知道用户需要访问地图的哪些区域，因此我不必允许缓存数百万个图块.

I'm making a web application that has to work offline. So far everything works and my last step is to take the map tiles offline. Luckily I know exactly what areas of the map will need to be accessible to users, so I don't have to allow caching of millions of tiles.

地图分为多个区域，因此我们的想法是将这些区域的图块作为可下载的包"提供.

The map is split into areas and so the idea is to offer the tiles for these areas as downloadable 'packages.'

例如，当我在线时，我会转到平铺包"页面，该页面提供多个区域的下载.我选择我感兴趣的区域，它会下载瓷砖，当我离线时，我可以使用这些瓷砖.我只需要大约 2 个缩放级别，一个用于快速导航，一个用于快速导航，另一个用于获取更多细节.

For instance, when I'm online, I go to the 'tile packages' page, which offers downloads for several areas. I choose the area which I'm interested in, it downloads the tiles, and when I go offline, I'm able to use these tiles. I only need about 2 zoom levels, one far out for quick navigation, and one more up close for more detail.

我正在使用传单来提供地图.有没有人必须做这样的事情并且可以给我一些指导?我真的不知道如何解决这个问题，这是最后一块拼图.

I'm using leaflet to serve up the map. Has anyone had to do something like this and could give me some guidance? I really just don't know how to even approach this, and it's the last piece of the puzzle.

推荐答案

这就是我想出的.我将地图的一个区域导入我的数据库.然后，我将此部分作为可下载的包提供.当用户下载包时，将查询数据库并以 JSON 格式返回与该区域关联的所有图块.图像存储为 blob.然后，我将这个图块数组传递给解析数据的自定义传单层.这是图层的代码:

So here's what I came up with. I import an area of the map to my database. I then offer this section as a downloadable package. When the user downloads the package, the database is queried and returns all tiles associated with that area in JSON format. The images are stored as blobs. I then pass this array of tiles to a custom leaflet layer which parses the data. Here's the code for the layer:

define([], function() {
    L.TileLayer.IDBTiles = L.TileLayer.extend({
        initialize: function(url, options, tiles) {
            options = L.setOptions(this, options);

            // detecting retina displays, adjusting tileSize and zoom levels
            if (options.detectRetina && L.Browser.retina && options.maxZoom > 0) {

                options.tileSize = Math.floor(options.tileSize / 2);
                options.zoomOffset++;

                if (options.minZoom > 0) {
                    options.minZoom--;
                }
                this.options.maxZoom--;
            }

            this._url = url;

            var subdomains = this.options.subdomains;

            if (typeof subdomains === 'string') {
                this.options.subdomains = subdomains.split('');
            }

            this.tiles = tiles;
        },
        getTileUrl: function (tilePoint) {
            this._adjustTilePoint(tilePoint);

            var z = this._getZoomForUrl();
            var x = tilePoint.x;
            var y = tilePoint.y;

            var result = this.tiles.filter(function(row) {
                return (row.value.tile_column === x
                        && row.value.tile_row === y
                        && row.value.zoom_level === z);
            });

            if(result[0]) return result[0].value.tile_data;
            else return;
        }
    });
});

相关文章