提供離線使用的地圖圖塊包

我正在製作一個必須脫機工作的Web應用程序。到目前爲止，一切正常，我的最後一步是將地圖貼圖離線。幸運的是，我確切知道地圖的哪些區域需要用戶訪問，所以我不必緩存數百萬個地圖塊。提供離線使用的地圖圖塊包

該地圖被分割成多個區域，所以想法是將這些區域的圖塊作爲可下載的「包」提供。

例如，當我在線時，我會進入'tile packages'頁面，該頁面提供多個區域的下載。我選擇我感興趣的區域，下載瓷磚，當我離線時，我可以使用這些瓷磚。我只需要大約2個縮放級別，一個用於快速導航，另一個用於更多細節。

我正在使用傳單來提供地圖。有沒有人需要這樣做，並可以給我一些指導？我真的不知道如何解決這個問題，這是最後一塊難題。

2013-11-26 Willem Ellis

我不確定你的實際問題是什麼。你想知道如何爲你的兩個縮放級別生成拼貼圖嗎？ – scai

你介意找到[MBTiles]（https：//www.mapbox。com/developers/mbtiles /）有用 - 一種基於sqlite的格式，用於從單個文件提供一系列圖塊。 –

所以這就是我想出的。我將地圖的一個區域導入到我的數據庫中。然後我將此部分作爲可下載的軟件包提供。當用戶下載軟件包時，將查詢數據庫並以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; 
     } 
    }); 
});

來源

2013-12-04 17:27:20

我認爲你可以使用四叉樹，空間填充曲線。 MS Bing Map使用最簡單的瓷磚地圖：http://bcdcspatial.blogspot.de/2012/01/onlineoffline-mapping-map-tiles-and.html?m=1。我認爲其他地圖服務器也使用空間填充曲線，但它並不是那麼明顯。您可以搜索ms bings地圖quadkey或nick的空間索引希爾伯特曲線。你也可以下載我的php類hilbert曲線@ phpclasses.org。您可以將它用於許多不同的空間填充曲線並生成一個quadkey。黑客的食譜也是一個好的開始。有一整章致力於希爾伯特曲線。

來源

2013-11-26 22:23:37 Bytemain

不幸的是，您並沒有指出確切的問題是什麼，或者您在哪一步失敗。所以我會嘗試給出一個一般的答案：

單張使用瓷磚通過不同供應商來使用JS的slippymap。可以通過Tile Map Service (TMS)或稍微不同的方法（對於OSM，編號here described）提供地圖塊（aka rasterimages）。
因此，您可以創建一個想要獲得的圖像列表，並可以通過尊重法律和技術術語來轉讓它們。對於OSM這是例如：

所以，你需要創建一個服務器/客戶端腳本，這是能夠做到這樣的批量傳輸（也許包裝形式存檔文件？），並要求將它放置在某個地方供您的用戶使用。我在Leaflet中經驗不足，無法告訴你如何提供它們，除了可能將它們添加到瀏覽器緩存本身，或者使用本地服務器將它們提供爲本地主機。

無論如何，如果你有更多的問題，請問。

來源

2013-11-27 17:29:02 MaM

提供離線使用的地圖圖塊包

回答

相關問題