移動端H5地圖離線瓦片方案

文章版權由做者李曉暉和博客園共有，若轉載請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

1.背景

移動端的網速和流量耗費是移動開發必須考慮的兩個點。常規的瓦片展現方案是移動端實時請求在線瓦片服務（瓦片放在服務器端供直接讀取，或者瓦片由地理服務器發佈成WMTS服務等）。這個方案存在兩個問題：

* 瓦片實時請求加載受限於移動端網速，容易致使加載卡頓現象

* 瓦片請求耗費手機流量。

試想，若是咱們將切圖瓦片提早存放到移動設備上，每次瓦片請求時直接讀取設備緩存瓦片，不只能夠提升瓦片加載效率，也能夠規避流量的耗費。目前各大地圖廠商也都提供了地圖下載功能，使得手機即便在無網環境下依然能夠照常使用地圖。

2.方案研究點

• JS沒法直接讀取移動端本地文件，如何進行本地瓦片獲取
• 避免下載所有瓦片致使的數據量過大，如何實現瓦片基於單元網格（最小打包單元，相對穩定，避免使用責任網格打包後因爲網格變更致使的重複工做量）的打包，如何基於單元網格瓦片生成責任網格的打包，並實現上傳更新。
• 瓦片爲規則矩形，如何實如今移動端只顯示不規則面（責任網格）內的地圖信息，即裁剪顯示

3.JS讀取手機本地瓦片文件的解決方法

3.1方法描述

• 與手機研發定義讀取本地瓦片時的固定URL前綴，手機程序監聽全部請求，當匹配上該固定前綴時，則代表手機程序需進行文件讀取，如：
  var offlineURL = "http://mobile.test.com.cn/tile? "
• 請求參數帶有瓦片級別、行、列、文件名參數。手機程序解析這些參數，讀取本地對應瓦片，並將數據返回

3.2優化

請求參數中增長瓦片服務端獲取URL，當手機本地沒有尋找到對應瓦片時，則觸發服務端獲取的URL，從服務端獲取瓦片後再緩存至手機本地,如:

var offlineURL = "http://mobile.test.com.cn/tile?raw=" url = offlineURL+encodeURIComponent(url)+"&level="+level+ "&row="+row+"&col="+col+"&layername="+(this.get("mobileCacheName")||"");

對在線URL進行編碼（可將URL中的特殊符號轉換），便於手機程序獲取raw參數對應的值。

4.基於網格圖層的瓦片打包工具

4.1工具設計思路

• 獲取瓦片切圖的具體參數：包含各級別比例尺、切圖原點、瓦片大小
• 遍歷網格圖層獲取圖層各要素，得到各要素的四角範圍
• 經過切圖參數以及要素的四角範圍，算出該範圍所對應的全部瓦片，將這些瓦片保留原有文件組織結構拷貝至目錄文件夾下。遍歷處理全部要素對應的四角範圍瓦片。
  
  
• 將目標文件夾壓縮成一個文件

        

　　　　public static int getXTileIndex(double x,double originx,double resolution,double size) { double d = (x - originx) / (resolution * size); int index = (int)Math.Floor(Math.Abs(d)); return index; } public static int getYTileIndex(double y, double originy, double resolution, double size) { double d = (y - originy) / (resolution * size); int index = (int)Math.Floor(Math.Abs(d)); return index; } public static String calcPath(String dir,int level,int yindex,int xindex) { StringBuilder sb = new StringBuilder(dir).Append("\\").Append("L"); sb.Append(padLeft(Convert.ToString(level, 16), 2, '0')); sb.Append("\\").Append("R").Append(padLeft(Convert.ToString(yindex, 16), 8, '0')); sb.Append("\\").Append("C").Append(padLeft(Convert.ToString(xindex, 16), 8, '0')); sb.Append(".png"); return sb.ToString(); } private static String padLeft(String str, int size, char symbol) { if (str == null) str = ""; int str_size = str.Length; int pad_len = size - str_size; StringBuilder retvalue = new StringBuilder(); for (int i = 0; i < pad_len; i++) { retvalue.Append(symbol); } return retvalue.Append(str).ToString(); }

4.2工具展現

5.手機服務端進行瓦片整合以及上傳

5.1基於單元網格切片合成責任網格切片

單元網格的切片組織以下：

即：網格編碼_alllayers\level\row\col.png
因此，服務端進行責任網格瓦片合併方法以下：

• 讀取責任網格與單元網格的對應關係表，獲取每一個責任網格編碼對應的全部單元網格編碼
• 在單元網格切片文件夾中找到全部對應的單元網格編碼切片文件夾
• 以增量覆蓋方式，將各單元網格文件夾中的文件（從_allLayers文件夾至下）進行合併，合併後的文件存放至責任網格編碼的文件夾下
• 將各責任網格文件分別壓縮

5.2責任網格瓦片打包上傳

服務端修改更新配置，當移動端再次啓動時，依據不一樣移動端所屬的責任網格區域進行對應的瓦片下載和解壓。

6.成果展現

 

7.前端優化展現效果——遮罩展現

因爲瓦片是規則四邊形，而區域是不規則多邊形，因此全圖瀏覽時會出現太多不在區域範圍內的數據。 這裏可使用遮罩的思想進行處理：製做一個很大的四邊形，而後以區邊界要素爲內環，二者結合構成一個環狀要素。疊加在地圖上時，把多邊形環要素設置爲背景色，這能夠變相實現遮罩效果。

 

                                                                                 -----歡迎轉載，但保留版權，請於明顯處標明出處：http://www.cnblogs.com/naaoveGIS/

                                                                      　　　　  若是您以爲本文確實幫助了您，能夠微信掃一掃，進行小額的打賞和鼓勵，謝謝 ^_^