Javascript 提供地图互动程序包供脱机使用

我正在制作一个必须脱机工作的web应用程序。到目前为止，一切正常，我的最后一步是将地图分幅脱机。幸运的是，我确切地知道用户需要访问地图的哪些区域，所以我不必允许缓存数百万块瓷砖

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

例如，当我在线时，我会进入“tile软件包”页面，该页面提供多个区域的下载。我选择我感兴趣的区域，它会下载互动程序，当我离线时，我可以使用这些互动程序。我只需要大约两个缩放级别，一个用于快速导航，一个用于近距离查看更多细节

---

我正在用传单把地图上的东西送上去。有没有人做过这样的事情，可以给我一些指导？我真的不知道如何处理这个问题，这是最后一个难题。

我想你可以使用四叉树，即空间填充曲线。MS Bing地图使用最简单的平铺地图：。我认为另一台地图服务器也使用了一条空间填充曲线，不过这并不明显。您可以搜索ms bings地图quadkey或nick的空间索引hilbert曲线。您还可以下载我的php类hilbert curve@phpclasses.org。您可以将其用于许多不同的空间填充曲线，并生成四键。好的开始也是黑客的食谱。有整整一章专门讨论希尔伯特曲线。

遗憾的是，你没有指出确切的问题是什么，或者你在哪一步失败了。因此，我将尝试给出一个一般性的答案：

传单使用不同提供商提供的瓷砖来使用JS制作SliplyMap。地图分幅（又名栅格图像）可以通过或稍微不同的方法提供（对于OSM编号）。
因此，您可以创建要获取的图像的列表，并可以通过重新指定法律和技术条款来传输这些图像。例如，对于OSM：

因此，您需要创建一个服务器/客户端脚本，该脚本能够执行这样的大容量传输（可能是打包的归档文件？），并要求将其放置在用户的特定位置。我对传单经验不足，无法告诉您如何提供它们，除此之外，您可以将它们添加到浏览器缓存本身，或者使用本地服务器将它们作为本地主机提供

---

不管怎样，如果你有更多的问题，就问吧。

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

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

---

我不确定你真正的问题是什么。你想知道如何为你的两个缩放级别生成分幅吗？你会发现有用的-一种基于sqlite的格式，用于从单个文件中提供分幅包。