百度离线地图WebGl(type=webgl&v=1.0)

离线地图示例图

初次接触百度离线地图感觉还行，离线地图说白了就是把在线资源生成本地静态资源，查看代码。

1.获取百度地图的api的js代码

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

打开之后会看到如下js代码：

 (function(){ window.BMapGL_loadScriptTime = (new Date).getTime(); document.write('');document.write('');})();

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结构放好：

图九

按照/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