利用本地资源加速folium生成的html网页

前言

Folium是一个用于可视化地理数据Python库，可以方便的生成网页（.html）形式的地图，然而在打开 html 时会出现加载缓慢或者失败的情形，这是因为html所需的一些资源文件（js或css）需要访问外国服务器。为了加速或者在完全离线的环境使用网页，可以将资源文件下载到本地，并替换html文件的引用源。

方法

js/css资源下载

首先利用 folium 生成地图的 html 文件，打开文件可以看到地图的 js/css 引用源

<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>

直接访问对应的地址就可以下载相应的资源文件，将其按照原始路径存放，比如 https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js 存放在 ./src/cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js 

后续我们只需进行字符串替换即可。

但是上述方法需要我们一个个手动构建相应的文件夹结构，费时费力，有没有方法能够一次性下载所有的资源文件呢？

答案是肯定的，我们只需利用edge中的overide功能，官方教程请参考

Override webpage resources with local copies (Overrides tab) - Microsoft Edge Developer documentation | Microsoft Learn

（egde的中文教程翻译一言难尽，建议直接看英文版）

简易版操作如下

1. 网页右键选择“检查（Inspect）”，打开开发者工具

2. 单击  Sources （） ，page，展开选项菜单，选择 overrides

3. 选择资源存放的文件夹

4. 弹出提示，点击允许

5. 接下来选择要下载的资源，点击 “元素（ELements）” -> “样式（Style）”选型卡，

点选对应的文件，右键选择 “Override content”，即可下载对应的文件

6. 可以在override选项卡中查看已经下载的资源（以生成的 map.html 为例）（css、js、图片都可以保存，但是配对文件scss不行）

7. 对照 html 文件，查看是否有遗漏的资源文件，在page选项卡中直接右键选择 “Override content”，即可下载对应资源

打开存放资源的文件夹，资源文件已经自动按原始url中路径的结构存放。

替换html文件中资源路径

有了本地的资源，我们只需替换html中的路径，简单的替换脚本如下，

def replace_html(html_path):
    with open(html_path, "r", encoding="utf-8") as f1, open("%s.bak" % html_path, "w", encoding="utf-8") as f2:
        for line in f1:
            if "https://" in line:
                line = line.replace("https://", r"./src/")

            f2.write(line)
    os.remove(html_path)
    os.rename("%s.bak" % html_path, html_path)

打开html，可以看到 js/css 引用源已变为本地

<script src="./src/cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"></script>
    <script src="./src/code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="./src/cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="./src/cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
    <link rel="stylesheet" href="./src/cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"/>
    <link rel="stylesheet" href="./src/cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./src/netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./src/cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css"/>
    <link rel="stylesheet" href="./src/cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
    <link rel="stylesheet" href="./src/cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
    

这样在网络不佳或离线环境下，我们也可以愉快的使用 html 网页了。

其他类型的网页也可以参照这一方法替换本地资源。

参考资料

folium 地图加载速度提升让加载速度飞起来 加载本地资源_folium加载不出地图-CSDN博客

Override webpage resources with local copies (Overrides tab) - Microsoft Edge Developer documentation | Microsoft Learn