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

【问题标题】：Offer packages of map tiles for offline use提供地图瓦片包以供离线使用
【发布时间】：2013-11-26 21:22:17
【问题描述】：

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

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

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

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

【问题讨论】：

我不确定您的实际问题是什么。您想知道如何为您的两个缩放级别生成图块吗？
您会发现 MBTiles 很有用 - 一种基于 sqlite 的格式，用于从单个文件中提供一组图块。

标签： javascript openstreetmap leaflet mapbox

【解决方案1】：

遗憾的是，您没有指出确切的问题是什么，或者您在哪一步失败了。所以我会尽量给出一个笼统的答案：

Leaflet 使用 不同的供应商 提供的 Tiles 来使用 JS 制作一个 slippymap。可以通过Tile Map Service (TMS) 或稍微不同的方法（对于 OSM，编号为 here described）提供地图图块（也称为光栅图像）。
因此，您可以创建想要获取的图像列表，并可以通过遵守法律和技术条款来传输它们。对于 OSM，例如：

所以您需要创建一个服务器/客户端脚本，它能够进行这样的批量传输（可能作为打包的存档文件？）并要求将其放置在您的用户的某个位置.我在 Leaflet 方面经验不足，无法告诉您如何提供它们，除了您可以将它们添加到浏览器缓存本身，或者使用本地服务器作为 localhost 提供它们。

不管怎样，如果你有更多问题，尽管问。

【讨论】：

【解决方案2】：

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

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;
        }
    });
});

【讨论】：

【解决方案3】：

我认为您可以使用四叉树，即空间填充曲线。 MS Bing Map 使用最简单的平铺地图：http://bcdcspatial.blogspot.de/2012/01/onlineoffline-mapping-map-tiles-and.html?m=1。我认为其他地图服务器也使用空间填充曲线，但不是那么明显。您可以搜索 ms bings maps quadkey 或 nick 的空间索引 hilbert 曲线。你也可以在@phpclasses.org 下载我的php 类希尔伯特曲线。您可以将它与许多不同的空间填充曲线一起使用并生成四键。一个好的开始也是黑客的食谱。有一整章专门介绍希尔伯特曲线。

【讨论】：