筆者最近實(shí)踐了利用openlayers在android app中實(shí)現(xiàn)離線地圖應(yīng)用饵隙，本文記錄了筆者實(shí)踐的思路撮珠。
android端移動地圖功能設(shè)計(jì)：
1、加載本地的地圖瓦片金矛；
2芯急、GPS定位；
3驶俊、疊加部件（矢量）圖層娶耍；
準(zhǔn)備工作
android端用webview加載在線頁面或離線的html頁面都是沒問題的，同時(shí)饼酿，android原生與JS之間可以互相調(diào)用榕酒。這一部分不是本文的重點(diǎn)，參考資料如下：
- Android與HTML+JS交互入門 android原生與JS之間互相調(diào)用的例子
- android 與JS之間的交互 WebView加載本地資源的小結(jié)
- Android WebView 與JS的數(shù)據(jù)交互 如何將css js 圖片等靜態(tài)資源部署在APP中
ol如何加載手機(jī)端本地地圖瓦片
筆者想到ol加載地瓦片地圖時(shí)故俐，可以用tileUrlFunction返回一個(gè)瓦片的鏈接想鹰，例如：
tileUrlFunction: function (tileCoord, pixelRatio, proj) {
var z = tileCoord[0] + 11;
var x = tileCoord[1];
var y = -tileCoord[2] - 1;
return "http://www.dzmap.cn/OneMapServer/rest/services/vector_service/MapServer/tile/" + z + "/" + y + "/" + x;
}
- tileUrlFunction返回一個(gè)地圖瓦片的路徑，ol請求瓦片并渲染药版。如果在此步驟將請求服務(wù)端的瓦片改為請求Android本地的資源辑舷，是否可行？
- android端本地?zé)o法提供一個(gè)http路徑槽片，我想到了用base64將圖片編碼的方式返回給ol何缓，測試證明這是可行的。
- 那么加載本地瓦片就簡單了还栓，下載地圖瓦片并組織好存儲路徑碌廓，tileUrlFunction中調(diào)用android原生的方法獲取對應(yīng)xyz的瓦片，然后用base64編碼后剩盒，返回給ol谷婆。
- 進(jìn)一步改進(jìn)，用文件方式存儲地圖瓦片比較浪費(fèi)，就想到了用sqlite mbtile方式存儲瓦片波材。筆者在之前的地圖瓦片下載工具基礎(chǔ)上股淡，增加了輸出sqlite mbtile的功能，點(diǎn)擊下載廷区。
- MBTile相關(guān)介紹：
官方介紹
MBTiles移動存儲簡介 - 通過測試唯灵，發(fā)現(xiàn)用base64編碼后的瓦片，ol的緩存功能貌似不好使了隙轻，查了一些資料埠帕，提到用base64編碼后，就無法用到瀏覽器緩存了玖绿。沒關(guān)系敛瓷，在android端用Lrucache做緩存，也能很好的解決此問題斑匪。
實(shí)現(xiàn)GPS定位功能
- JS調(diào)用android原生獲取GPS定位坐標(biāo)呐籽，android端可以用原生的GPS定位，或使用baidu sdk蚀瘸，返回當(dāng)前位置坐標(biāo)狡蝶。
- 為防止獲取GPS位置時(shí)有較長的等待，筆者推薦用異步的方式贮勃。即贪惹，由JS調(diào)用Android端獲取GPS位置，android啟用異步方式獲取當(dāng)前位置寂嘉，并立即返回奏瞬；當(dāng)Android端獲取到位置后，回調(diào)JS端泉孩，傳遞當(dāng)前位置給OL硼端，ol標(biāo)注當(dāng)前位置。
疊加部件（矢量）圖層
- 與上述加載本地瓦片類似棵譬，事先預(yù)處理好矢量圖層显蝌，用spatialite（基于sqlite的空間數(shù)據(jù)庫）存儲矢量部件圖層预伺，建好空間索引订咸；
- ol注冊map.moveend事件，請求當(dāng)前可視范圍的矢量數(shù)據(jù)酬诀；
- 這里應(yīng)該還可以用矢量瓦片來替代脏嚷，還沒來及實(shí)踐。
本文獻(xiàn)給大連機(jī)場瞒御，感謝您延誤航班父叙，使我有時(shí)間有耐心寫完本文，謝謝。
