離線地圖示例圖
初次接觸百度離線地圖感覺(jué)還行烟勋，離線地圖說(shuō)白了就是把在線資源生成本地靜態(tài)資源，查看代碼帘饶。
1.獲取百度地圖的api的js代碼
//api.map.baidu.com/api?type=webgl&v=1.0&ak=密鑰
打開(kāi)之后會(huì)看到如下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打開(kāi)獲取如下js代碼：
圖一
http://api.map.baidu.com/res/webgl/10/bmap.css打開(kāi)獲取如下css代碼：
圖二
2.保存文件
將上面的代碼代碼格式化工具，將代碼格式化方便后期的查看與修改。
把上面的獲取到的文件分布命名為webgl.js 和 bmap.css文件保存到本地：
圖三
引入到index.html中：
圖四
3.修改百度地圖的JS代碼
（1）在webgl.js文件中全局搜索Math.random()干签，定位到如下代碼并最開(kāi)始添加：
（百度地圖API代碼有更新，但基本樣式不變）
if (/^http/.test(hR)) return; // 添加這一行
如下示例：
圖五
（2）在webgl.js文件最開(kāi)始位置添加
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) 注釋?zhuān)?br>
圖八
（5）下載如下2個(gè)JS文件：
(全局搜索worker_asm拆撼，worker_wasm即可找到類(lèi)似名字的文件)
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)容劳，如圖層類(lèi)、標(biāo)記類(lèi)闸度。這些模塊也是你用到哪些就把哪些下載到本地就行竭贩。
在webgl.js文件中全局搜索 &mod= 定位到下面文件，然后通過(guò)console.log(T._getMd5ModsStr(T.Module.modulesNeedToLoad))將你需要的模塊打印出來(lái)并進(jìn)行下載:
圖十一
這些是我用到的文件：
圖十二
在webgl.js文件中全局搜索getmodules替換掉請(qǐng)求路徑：
圖十三
在webgl.js 中搜索Config.baseUrl 替換掉請(qǐng)求邏輯：
圖十四
在webgl.js中全局搜索hU.join(",")并替換為：
圖十六
（7）替換瓦片地址：
在文件開(kāi)頭加上配置
window.offLineIPAddress = bmapcfg.tiles_dir;
在webgl.js 中搜索"pvd/"
圖十七
webgl用的是矢量瓦片地圖莺禁，通過(guò)用望遠(yuǎn)鏡可以下載留量，將下載矢量瓦片的把titles文件夾名改為pvd，如下：
圖十八
（8）下載地圖上的靜態(tài)圖標(biāo)及js文件
以上將主要的資源文件下載完成哟冬，地圖上的銀行的標(biāo)識(shí)圖片楼熄，動(dòng)物園的動(dòng)物圖片及一些其他文件也需要下載，否則在斷網(wǎng)情況下浩峡，離線地圖依舊無(wú)法加載可岂。
由于鏡頭圖片的數(shù)量過(guò)大，我這直接在望遠(yuǎn)鏡找到一些翰灾，其他個(gè)別缺少的圖片自己依照?qǐng)D片的下載路徑自行下載就行：
圖十九
我本地下載圖片：
圖二十
替換靜態(tài)圖片的路徑
在webgl.js文件中全局搜索image/api/替換為：
圖二十一
在webgl.js文件中全局搜索/sty/替換為：
圖二十二
在webgl.js文件中全局搜索wolfman替換為：
image.png
至此js文件修改完成青柄，本地資源文件也下載完成。
參考鏈接：
https://blog.csdn.net/bbarber/article/details/114026207
