離線地圖示例圖

初次接觸百度離線地圖感覺還行，離線地圖說白了就是把在線資源生成本地靜態(tài)資源，查看代碼。

1.獲取百度地圖的api的js代碼

 //api.map.baidu.com/api?type=webgl&v=1.0&ak=密鑰

打開之后會看到如下js代碼：

 (function(){ window.BMapGL_loadScriptTime = (new Date).getTime(); document.write('<script         type="text/javascript" src="http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=eseRcUMFiUlnWA6miQLejNpvS70H8SRN&services=&t=20210528194133"></script>');document.write('<link rel="stylesheet" type="text/css" );})();

http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=eseRcUMFiUlnWA6miQLejNpvS70H8SRN&services=&t=20210528194133打開獲取如下js代碼：

圖一

http://api.map.baidu.com/res/webgl/10/bmap.css打開獲取如下css代碼：

圖二

2.保存文件

將上面的代碼代碼格式化工具，將代碼格式化方便后期的查看與修改。
把上面的獲取到的文件分布命名為webgl.js 和 bmap.css文件保存到本地：

圖三

引入到index.html中：

圖四

3.修改百度地圖的JS代碼

（1）在webgl.js文件中全局搜索Math.random()，定位到如下代碼并最開始添加：
（百度地圖API代碼有更新，但基本樣式不變）

if (/^http/.test(hR)) return; // 添加這一行

如下示例：

圖五

（2）在webgl.js文件最開始位置添加

const bmapcfg = {
 'tiles_dir'   : window.location.origin, // 瓦片地圖的位置
 'home': window.location.origin // 其他js文件的位置
};

如下示例：

圖六

（3）在webgl.js文件中全局搜索 //map.baidu.com 并找到 apiHost 修改為：

圖七

（4）在webgl.js文件中全局搜索 &callback= 并找到 ho.load(e) 注釋：

圖八

（5）下載如下2個JS文件：
(全局搜索worker_asm，worker_wasm即可找到類似名字的文件)
worker_asm_2q1spc.js
worker_wasm_u2pign.js
下載后在地圖文件目錄按照res/webgl/10/worker_asm_2q1spc.js結(jié)構(gòu)放好：

圖九

按照/res/webgl/10/worker_wasm_u2pign.js結(jié)構(gòu)放好：

圖十

（6）下載本地資源
本地資源就是使用地圖時(shí)平時(shí)用到的一些模塊(module)，如圖層類、標(biāo)記類。這些模塊也是你用到哪些就把哪些下載到本地就行。
在webgl.js文件中全局搜索 &mod= 定位到下面文件，然后通過console.log(T._getMd5ModsStr(T.Module.modulesNeedToLoad))將你需要的模塊打印出來并進(jìn)行下載:

圖十一

這些是我用到的文件：

圖十二

在webgl.js文件中全局搜索getmodules替換掉請求路徑：

圖十三

在webgl.js 中搜索Config.baseUrl 替換掉請求邏輯：

圖十四

在webgl.js中全局搜索hU.join(",")并替換為：

圖十六

（7）替換瓦片地址：
在文件開頭加上配置

window.offLineIPAddress = bmapcfg.tiles_dir;

在webgl.js 中搜索"pvd/"

圖十七

webgl用的是矢量瓦片地圖，通過用望遠(yuǎn)鏡可以下載，將下載矢量瓦片的把titles文件夾名改為pvd，如下：

圖十八

（8）下載地圖上的靜態(tài)圖標(biāo)及js文件
以上將主要的資源文件下載完成，地圖上的銀行的標(biāo)識圖片，動物園的動物圖片及一些其他文件也需要下載，否則在斷網(wǎng)情況下，離線地圖依舊無法加載。
由于鏡頭圖片的數(shù)量過大，我這直接在望遠(yuǎn)鏡找到一些，其他個別缺少的圖片自己依照圖片的下載路徑自行下載就行：