問題描述

我正在制作一個必須離線工作的網絡應用程序.到目前為止一切正常，我的最后一步是將地圖圖塊離線.幸運的是，我確切地知道用戶需要訪問地圖的哪些區域，因此我不必允許緩存數百萬個圖塊.

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

這篇關于提供地圖瓦片包以供離線使用的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！