离线地图示例图
初次接触百度离线地图感觉还行，离线地图说白了就是把在线资源生成本地静态资源，查看代码。
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" href="http://api.map.baidu.com/res/webgl/10/bmap.css"/>');})();
图一
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结构放好：
图九
按照/res/webgl/10/worker_wasm_u2pign.js结构放好：
图十
（6）下载本地资源
本地资源就是使用地图时平时用到的一些模块(module)，如图层类、标记类。这些模块也是你用到哪些就把哪些下载到本地就行。
在webgl.js文件中全局搜索 &mod= 定位到下面文件，然后通过console.log(T._getMd5ModsStr(T.Module.modulesNeedToLoad))将你需要的模块打印出来并进行下载:
图十一
这些是我用到的文件：
图十二
在webgl.js文件中全局搜索getmodules替换掉请求路径：
图十三
在webgl.js 中搜索Config.baseUrl 替换掉请求逻辑：
图十四
在webgl.js中全局搜索hU.join(",")并替换为：
图十六
（7）替换瓦片地址：
在文件开头加上配置
window.offLineIPAddress = bmapcfg.tiles_dir;
在webgl.js 中搜索"pvd/"
图十七
webgl用的是矢量瓦片地图，通过用望远镜可以下载，将下载矢量瓦片的把titles文件夹名改为pvd，如下：
图十八
（8）下载地图上的静态图标及js文件
以上将主要的资源文件下载完成，地图上的银行的标识图片，动物园的动物图片及一些其他文件也需要下载，否则在断网情况下，离线地图依旧无法加载。
由于镜头图片的数量过大，我这直接在望远镜找到一些，其他个别缺少的图片自己依照图片的下载路径自行下载就行：
图十九
我本地下载图片：
图二十
替换静态图片的路径
在webgl.js文件中全局搜索image/api/替换为：
图二十一
在webgl.js文件中全局搜索/sty/替换为：
图二十二
在webgl.js文件中全局搜索wolfman替换为：
image.png
至此js文件修改完成，本地资源文件也下载完成。
参考链接：
https://blog.csdn.net/bbarber/article/details/114026207
