如何借助folium的JSCSSMixin类本地加载自定义JS/CSS资源？

嗨，我刚好折腾过类似的需求，其实用folium的JSCSSMixin加载本地资源没那么复杂，咱们一步步来解决你的问题：

首先，先把你修改好的Leaflet.Measure相关JS和CSS文件（包括那套日文样式）整理到本地目录里，推荐和你的Python脚本同目录下建一个static文件夹，再在里面分js和css子文件夹，把对应的文件放进去，这样路径管理起来更清晰。

接下来，修改你之前写的Measure类，核心就是把原来的CDN外链替换成本地文件的路径。这里要注意，尽量用相对路径，避免不同操作系统的路径格式问题，也能避免浏览器对file://协议的加载限制。

修改后的代码示例如下：

from jinja2 import Template
from folium.elements import JSCSSMixin
from folium.utilities import parse_options
import os

class Measure(JSCSSMixin):
    _template = Template(
        """
        {% macro script(this, kwargs) %}
            var {{ this.get_name() }} = new L.control.measure(
                {{ this.options|tojson }});
            {{this._parent.get_name()}}.addControl({{this.get_name()}});
        {% endmacro %}
        """
    )  # noqa

    # 用os模块构建本地资源的相对路径，确保跨平台兼容
    current_dir = os.path.dirname(os.path.abspath(__file__))
    default_js = [
        (
            "leaflet_measure_js",
            os.path.join("static", "js", "leaflet.measure.js")
        )
    ]

    default_css = [
        (
            "leaflet_measure_css",
            os.path.join("static", "css", "leaflet.measure.css")
        )
    ]

    def __init__(self, **kwargs):
        super().__init__()
        self._name = "Measure"
        self.options = parse_options(**kwargs)

然后说下使用时的注意点：当你生成地图并保存为HTML文件时，要确保生成的HTML和static文件夹处于同一级目录下。比如你用这样的代码生成地图：

import folium

# 生成东京地区的地图示例
m = folium.Map(location=[35.6895, 139.6917], zoom_start=12)
# 添加自定义的Measure控件
Measure().add_to(m)
# 保存地图
m.save("map.html")

此时你的文件结构应该是这样的：

你的脚本.py
static/
├─ js/
│  └─ leaflet.measure.js
└─ css/
   └─ leaflet.measure.css
map.html

这样打开map.html时，浏览器就能正确加载本地的JS和CSS资源了，完全不用依赖外部CDN。

其实原理和你熟悉的Flask/Jinja2差不多，folium底层也是用Jinja2模板渲染，JSCSSMixin已经帮你封装了资源注入的逻辑，你只需要把资源路径换成本地的就行，是不是很简单？

备注：内容来源于stack exchange，提问作者banderlog013