数据可视化数据分析GIS【免费下载链接】foliumPython Data. Leaflet.js Maps.项目地址https://gitcode.com/gh_mirrors/fo/folium点击查看免费下载导读Folium 作为 Python 生态中基于 Leaflet.js 的地图可视化库最常见的落地场景之一就是与 Flask 等 Web 框架集成把交互式地图发布为网页服务。本文基于 docs/advanced_guide/flask.rst 官方指南及其配套示例 docs/_static/flask_example.py系统讲解在 Flask 中嵌入 Folium 地图的三种方案直接返回地图 HTML、以 iframe 嵌入现有页面、以及拆分地图组件header / html / script后手动组装。读完本文你将能够独立搭建一个可运行的 Flask Folium 应用并理解每种方案背后的渲染原理与适用场景。三种集成方案概览官方文档明确指出在 Flask 应用中使用 Folium 是一个常见需求且存在多种实现方式。最简单的方式是直接返回地图的 HTML 表示如果要把地图嵌入到已有的页面布局中则可以选择嵌入 iframe或者提取地图的各个组成部分header、html、script后手动插入页面。这三种方式在 docs/_static/flask_example.py 中均有对应的可运行示例分别对应三个路由路由方案核心调用/全屏渲染m.get_root().render()/iframeiframe 嵌入m.get_root()._repr_html_()/components组件拆分header.render()/html.render()/script.render()运行环境只需两个 Python 包flask与folium。启动命令为$ python flask_example.py启动后在浏览器访问http://127.0.0.1:5000/即可看到地图。方案一直接返回地图 HTML全屏页面这是三种方式中最简单的一种适用于地图本身占据整个页面的场景如全屏可视化大屏、单一地图应用。from flask import Flask, render_template_string import folium app Flask(__name__) app.route(/) def fullscreen(): Simple example of a fullscreen map. m folium.Map() return m.get_root().render()其核心在于m.get_root()。从 Folium 的渲染模型看每个folium.Map对象在构造时都会被挂载到一个Figure画布对象上——在 folium/folium.py 的Map.__init__中有明确逻辑Figure().add_child(self)因此get_root()返回的就是这个Figure实例而Figure.render()会一次性产出完整的 HTML 文档包含head、Leaflet 的 CSS/JS 链接、地图容器 div 以及初始化脚本。Map类继承了JSCSSMixin定义于 folium/elements.py其中default_js与default_css列表如 Leaflet 1.9.4、jQuery、Bootstrap 等资源的 CDN 链接会在渲染时被注入到 figure 的 header 中最终由 folium/folium.py 的JSCSSMixin.render()统一生成script与link标签。由此可以理解该方案的特性返回的是完整、独立的 HTML 文档浏览器直接解析即可显示地图不需要 Flask 模板引擎参与代码最简地图尺寸默认按folium.Map的width/height参数默认100%呈现适合整页场景。从源码 folium/folium.py 的Map._template可以看到页面布局相关的样式位置、宽高、min-width/min-height、left/top均由该模板中的header宏生成这就是render()能输出完整页面布局的底层依据。方案二iframe 嵌入现有页面当你的页面已经具备自己的导航栏、侧边栏或内容区布局只想在地图区域嵌入一块交互地图时iframe 是最省心的方式地图与宿主页面互不干扰样式完全隔离。app.route(/iframe) def iframe(): Embed a map as an iframe on a page. m folium.Map() # set the iframe width and height m.get_root().width 800px m.get_root().height 600px iframe m.get_root()._repr_html_() return render_template_string( !DOCTYPE html html head/head body h1Using an iframe/h1 {{ iframe|safe }} /body /html , iframeiframe, )这里有几个关键点值得展开1. 尺寸控制。示例通过直接修改 figure 的属性来设定地图区域大小m.get_root().width 800px m.get_root().height 600px在 folium/folium.py 中width与height参数在Map.__init__里会经过_parse_size解析成(数值, 单位)的二元组并分别记录_width_is_percent/_height_is_percent标志模板中据此区分使用vw/vh百分比还是固定像素值同时设置min-width/min-height。因此你也可以传入100%、50%等百分比字符串或者直接使用folium.Map(width800, height600)的构造参数形式。2._repr_html_()的作用。Map._repr_html_方法定义于 folium/folium.pydef _repr_html_(self, **kwargs) - str: Displays the HTML Map in a Jupyter notebook. if self._parent is None: self.add_to(Figure()) self._parent: Figure out self._parent._repr_html_(**kwargs) self._parent None else: out self._parent._repr_html_(**kwargs) return out它在 Jupyter 中用于地图的富文本显示而在 Flask 场景下被借用来生成一段内联的 HTML 片段。这里需要特别注意示例中调用的是m.get_root()._repr_html_()即 figure 的_repr_html_它返回的是包含完整style、script与地图容器 div 的自包含片段因此可以直接塞进{{ iframe|safe }}渲染。3. Jinja2 的安全转义。由于地图 HTML 片段包含大量script与style标签而 Jinja2 默认会转义 HTML模板中必须使用|safe过滤器如{{ iframe|safe }}告知 Jinja2 这是可信的原始 HTML否则地图将无法正常显示。iframe 方案的优点宿主页面结构清晰、地图样式不会污染页面其他元素缺点地图内外的交互隔离如无法跨 iframe 调用地图 API且每次请求都会额外渲染一份完整的自包含文档。方案三拆分地图组件header / html / script这是最灵活、也是最能体现 Folium 渲染架构的方案把地图拆解成三段独立的 HTML 片段分别插入到宿主页面的head与body中。app.route(/components) def components(): Extract map components and put those on a page. m folium.Map( width800, height600, ) m.get_root().render() header m.get_root().header.render() body_html m.get_root().html.render() script m.get_root().script.render() return render_template_string( !DOCTYPE html html head {{ header|safe }} /head body h1Using components/h1 {{ body_html|safe }} script {{ script|safe }} /script /body /html , headerheader, body_htmlbody_html, scriptscript, )执行顺序的意义。示例先调用m.get_root().render()再分别渲染各段这并非冗余Figure.render()会先遍历并渲染整棵元素树把 Leaflet 初始化脚本、CSS/JS 资源链接、地图容器等依次写入 figure 内部的header、html、script三个子容器。从 Folium 的类继承关系可以推断参见 folium/elements.py 与 folium/folium.py 的JSCSSMixin.render()figure 的header会承载 Leaflet 等外部资源的link与script引用html存放地图容器div classfolium-mapscript存放L.map(...)等初始化 JavaScript。三段之间是严格的前置依赖——CSS 必须在 body 渲染前加载、JS 初始化脚本必须放在地图容器之后因此示例把header放进head、body_html放进body顶部、script包进script标签放在最后这一顺序是保证地图正常显示的关键。与方案二的区别。方案二生成的 iframe 片段是打包好的自包含 HTML而方案三把 CSS、DOM、JS 拆开让你可以复用宿主页已有的头部资源header 可按需取舍在script前后追加自定义 JavaScript将body_html精确放置在页面任意布局位置摆脱 iframe 的隔离限制实现页面与地图的脚本级互通。该方案代价是需要手工保证三段顺序与闭合标签正确出错概率略高建议封装为可复用的模板片段。实战搭建完整运行环境安装依赖pip install flask folium。注意 Folium 的运行时依赖见 requirements.txtbranca0.6.0提供Figure、Element等底层元素体系、jinja22.9模板渲染引擎、numpy、requests与xyzservices。在 folium/init.py 中还有版本硬校验若branca低于 0.3.0 会直接抛出ImportError。保存示例将 docs/_static/flask_example.py 完整保存为flask_example.py或复制到examples/目录运行。启动服务$ python flask_example.py示例末尾的app.run(debugTrue)会以调试模式启动开发服务器默认监听127.0.0.1:5000。浏览器分别访问http://127.0.0.1:5000/—— 全屏地图http://127.0.0.1:5000/iframe—— iframe 嵌入页http://127.0.0.1:5000/components—— 组件拆分页。debugTrue仅在开发阶段使用生产部署如 gunicorn、uWSGI 或平台化托管时务必关闭调试模式并考虑将地图渲染结果缓存因为render()每次都会重新执行完整的模板渲染流程。常见问题与调优建议地图不显示优先检查是否为{{ iframe|safe }}之类的 Jinja2 变量漏加了|safe过滤器若手写模板再确认 header 位于head、script 位于地图 div 之后。地图尺寸不对通过folium.Map(width..., height...)构造参数或m.get_root().width / height调整支持像素整数与百分比字符串两种写法模板中百分比会被渲染为vw/vh见 folium/folium.py 的Map._template。需要多地图共存每个folium.Map实例都会被赋予唯一的get_name()如map_xxxxx即使在同一页面渲染多张地图变量名也不会冲突这一点从Map._template中var {{ this.get_name() }} L.map(...)的变量命名方式可以得到验证。生产环境资源加载Folium 默认通过 CDN 加载 Leaflet 1.9.4、jQuery 等资源见 folium/folium.py 的_default_js/_default_css内网或离线环境需改用add_js_link/add_css_link定义于 folium/elements.py替换为自建静态资源地址。总结Folium 与 Flask 的集成虽然入门简单但理解其渲染模型会让你的集成方案更有章法get_root()拿到底层Figurerender()输出完整页面_repr_html_()生成自包含片段header/html/script三个子容器则对应 CSS 资源、DOM 容器与初始化脚本。三种方案从整页到片段再到组件级控制覆盖了从最小演示到复杂布局整合的全部常见场景官方示例 docs/_static/flask_example.py 可直接作为项目脚手架使用。赞分享数据可视化数据分析GIS【免费下载链接】foliumPython Data. Leaflet.js Maps.项目地址https://gitcode.com/gh_mirrors/fo/folium点击查看免费下载相关推荐Dittofeed嵌入式组件iframe集成Dittofeed嵌入式组件iframe集成 引言为什么选择嵌入式集成 在现代SaaS应用中消息自动化已成为提升用户参与度和转化率的关键功能。Ditto后端前端企业应用Mesop Embed 组件实战在 Python AI 应用中安全嵌入 iframe 网页Mesop Embed 组件实战在 Python AI 应用中安全嵌入 iframe 网页 导读 Mesop 是面向 Python 开发者、用于快速构建 AI前端后端Web框架react-datepicker 日历图标CalendarIcon组件完全指南三种图标渲染模式与 DatePicker 集成实战react datepicker 日历图标CalendarIcon组件完全指南三种图标渲染模式与 DatePicker 集成实战 CalendarIcon前端UI组件上一篇ComfyUI ControlNet Aux插件模型下载失败问题的终极解决方案下一篇CC Switch 切换 Codex 供应商后旧会话续聊失败三步切回加一条命令快速定位指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 在 Flask 应用中集成 Folium 地图的三种实践方案：全屏渲染、iframe 嵌入与组件拆分
数据可视化数据分析GIS【免费下载链接】foliumPython Data. Leaflet.js Maps.项目地址https://gitcode.com/gh_mirrors/fo/folium点击查看免费下载导读Folium 作为 Python 生态中基于 Leaflet.js 的地图可视化库最常见的落地场景之一就是与 Flask 等 Web 框架集成把交互式地图发布为网页服务。本文基于 docs/advanced_guide/flask.rst 官方指南及其配套示例 docs/_static/flask_example.py系统讲解在 Flask 中嵌入 Folium 地图的三种方案直接返回地图 HTML、以 iframe 嵌入现有页面、以及拆分地图组件header / html / script后手动组装。读完本文你将能够独立搭建一个可运行的 Flask Folium 应用并理解每种方案背后的渲染原理与适用场景。三种集成方案概览官方文档明确指出在 Flask 应用中使用 Folium 是一个常见需求且存在多种实现方式。最简单的方式是直接返回地图的 HTML 表示如果要把地图嵌入到已有的页面布局中则可以选择嵌入 iframe或者提取地图的各个组成部分header、html、script后手动插入页面。这三种方式在 docs/_static/flask_example.py 中均有对应的可运行示例分别对应三个路由路由方案核心调用/全屏渲染m.get_root().render()/iframeiframe 嵌入m.get_root()._repr_html_()/components组件拆分header.render()/html.render()/script.render()运行环境只需两个 Python 包flask与folium。启动命令为$ python flask_example.py启动后在浏览器访问http://127.0.0.1:5000/即可看到地图。方案一直接返回地图 HTML全屏页面这是三种方式中最简单的一种适用于地图本身占据整个页面的场景如全屏可视化大屏、单一地图应用。from flask import Flask, render_template_string import folium app Flask(__name__) app.route(/) def fullscreen(): Simple example of a fullscreen map. m folium.Map() return m.get_root().render()其核心在于m.get_root()。从 Folium 的渲染模型看每个folium.Map对象在构造时都会被挂载到一个Figure画布对象上——在 folium/folium.py 的Map.__init__中有明确逻辑Figure().add_child(self)因此get_root()返回的就是这个Figure实例而Figure.render()会一次性产出完整的 HTML 文档包含head、Leaflet 的 CSS/JS 链接、地图容器 div 以及初始化脚本。Map类继承了JSCSSMixin定义于 folium/elements.py其中default_js与default_css列表如 Leaflet 1.9.4、jQuery、Bootstrap 等资源的 CDN 链接会在渲染时被注入到 figure 的 header 中最终由 folium/folium.py 的JSCSSMixin.render()统一生成script与link标签。由此可以理解该方案的特性返回的是完整、独立的 HTML 文档浏览器直接解析即可显示地图不需要 Flask 模板引擎参与代码最简地图尺寸默认按folium.Map的width/height参数默认100%呈现适合整页场景。从源码 folium/folium.py 的Map._template可以看到页面布局相关的样式位置、宽高、min-width/min-height、left/top均由该模板中的header宏生成这就是render()能输出完整页面布局的底层依据。方案二iframe 嵌入现有页面当你的页面已经具备自己的导航栏、侧边栏或内容区布局只想在地图区域嵌入一块交互地图时iframe 是最省心的方式地图与宿主页面互不干扰样式完全隔离。app.route(/iframe) def iframe(): Embed a map as an iframe on a page. m folium.Map() # set the iframe width and height m.get_root().width 800px m.get_root().height 600px iframe m.get_root()._repr_html_() return render_template_string( !DOCTYPE html html head/head body h1Using an iframe/h1 {{ iframe|safe }} /body /html , iframeiframe, )这里有几个关键点值得展开1. 尺寸控制。示例通过直接修改 figure 的属性来设定地图区域大小m.get_root().width 800px m.get_root().height 600px在 folium/folium.py 中width与height参数在Map.__init__里会经过_parse_size解析成(数值, 单位)的二元组并分别记录_width_is_percent/_height_is_percent标志模板中据此区分使用vw/vh百分比还是固定像素值同时设置min-width/min-height。因此你也可以传入100%、50%等百分比字符串或者直接使用folium.Map(width800, height600)的构造参数形式。2._repr_html_()的作用。Map._repr_html_方法定义于 folium/folium.pydef _repr_html_(self, **kwargs) - str: Displays the HTML Map in a Jupyter notebook. if self._parent is None: self.add_to(Figure()) self._parent: Figure out self._parent._repr_html_(**kwargs) self._parent None else: out self._parent._repr_html_(**kwargs) return out它在 Jupyter 中用于地图的富文本显示而在 Flask 场景下被借用来生成一段内联的 HTML 片段。这里需要特别注意示例中调用的是m.get_root()._repr_html_()即 figure 的_repr_html_它返回的是包含完整style、script与地图容器 div 的自包含片段因此可以直接塞进{{ iframe|safe }}渲染。3. Jinja2 的安全转义。由于地图 HTML 片段包含大量script与style标签而 Jinja2 默认会转义 HTML模板中必须使用|safe过滤器如{{ iframe|safe }}告知 Jinja2 这是可信的原始 HTML否则地图将无法正常显示。iframe 方案的优点宿主页面结构清晰、地图样式不会污染页面其他元素缺点地图内外的交互隔离如无法跨 iframe 调用地图 API且每次请求都会额外渲染一份完整的自包含文档。方案三拆分地图组件header / html / script这是最灵活、也是最能体现 Folium 渲染架构的方案把地图拆解成三段独立的 HTML 片段分别插入到宿主页面的head与body中。app.route(/components) def components(): Extract map components and put those on a page. m folium.Map( width800, height600, ) m.get_root().render() header m.get_root().header.render() body_html m.get_root().html.render() script m.get_root().script.render() return render_template_string( !DOCTYPE html html head {{ header|safe }} /head body h1Using components/h1 {{ body_html|safe }} script {{ script|safe }} /script /body /html , headerheader, body_htmlbody_html, scriptscript, )执行顺序的意义。示例先调用m.get_root().render()再分别渲染各段这并非冗余Figure.render()会先遍历并渲染整棵元素树把 Leaflet 初始化脚本、CSS/JS 资源链接、地图容器等依次写入 figure 内部的header、html、script三个子容器。从 Folium 的类继承关系可以推断参见 folium/elements.py 与 folium/folium.py 的JSCSSMixin.render()figure 的header会承载 Leaflet 等外部资源的link与script引用html存放地图容器div classfolium-mapscript存放L.map(...)等初始化 JavaScript。三段之间是严格的前置依赖——CSS 必须在 body 渲染前加载、JS 初始化脚本必须放在地图容器之后因此示例把header放进head、body_html放进body顶部、script包进script标签放在最后这一顺序是保证地图正常显示的关键。与方案二的区别。方案二生成的 iframe 片段是打包好的自包含 HTML而方案三把 CSS、DOM、JS 拆开让你可以复用宿主页已有的头部资源header 可按需取舍在script前后追加自定义 JavaScript将body_html精确放置在页面任意布局位置摆脱 iframe 的隔离限制实现页面与地图的脚本级互通。该方案代价是需要手工保证三段顺序与闭合标签正确出错概率略高建议封装为可复用的模板片段。实战搭建完整运行环境安装依赖pip install flask folium。注意 Folium 的运行时依赖见 requirements.txtbranca0.6.0提供Figure、Element等底层元素体系、jinja22.9模板渲染引擎、numpy、requests与xyzservices。在 folium/init.py 中还有版本硬校验若branca低于 0.3.0 会直接抛出ImportError。保存示例将 docs/_static/flask_example.py 完整保存为flask_example.py或复制到examples/目录运行。启动服务$ python flask_example.py示例末尾的app.run(debugTrue)会以调试模式启动开发服务器默认监听127.0.0.1:5000。浏览器分别访问http://127.0.0.1:5000/—— 全屏地图http://127.0.0.1:5000/iframe—— iframe 嵌入页http://127.0.0.1:5000/components—— 组件拆分页。debugTrue仅在开发阶段使用生产部署如 gunicorn、uWSGI 或平台化托管时务必关闭调试模式并考虑将地图渲染结果缓存因为render()每次都会重新执行完整的模板渲染流程。常见问题与调优建议地图不显示优先检查是否为{{ iframe|safe }}之类的 Jinja2 变量漏加了|safe过滤器若手写模板再确认 header 位于head、script 位于地图 div 之后。地图尺寸不对通过folium.Map(width..., height...)构造参数或m.get_root().width / height调整支持像素整数与百分比字符串两种写法模板中百分比会被渲染为vw/vh见 folium/folium.py 的Map._template。需要多地图共存每个folium.Map实例都会被赋予唯一的get_name()如map_xxxxx即使在同一页面渲染多张地图变量名也不会冲突这一点从Map._template中var {{ this.get_name() }} L.map(...)的变量命名方式可以得到验证。生产环境资源加载Folium 默认通过 CDN 加载 Leaflet 1.9.4、jQuery 等资源见 folium/folium.py 的_default_js/_default_css内网或离线环境需改用add_js_link/add_css_link定义于 folium/elements.py替换为自建静态资源地址。总结Folium 与 Flask 的集成虽然入门简单但理解其渲染模型会让你的集成方案更有章法get_root()拿到底层Figurerender()输出完整页面_repr_html_()生成自包含片段header/html/script三个子容器则对应 CSS 资源、DOM 容器与初始化脚本。三种方案从整页到片段再到组件级控制覆盖了从最小演示到复杂布局整合的全部常见场景官方示例 docs/_static/flask_example.py 可直接作为项目脚手架使用。赞分享数据可视化数据分析GIS【免费下载链接】foliumPython Data. Leaflet.js Maps.项目地址https://gitcode.com/gh_mirrors/fo/folium点击查看免费下载相关推荐Dittofeed嵌入式组件iframe集成Dittofeed嵌入式组件iframe集成 引言为什么选择嵌入式集成 在现代SaaS应用中消息自动化已成为提升用户参与度和转化率的关键功能。Ditto后端前端企业应用Mesop Embed 组件实战在 Python AI 应用中安全嵌入 iframe 网页Mesop Embed 组件实战在 Python AI 应用中安全嵌入 iframe 网页 导读 Mesop 是面向 Python 开发者、用于快速构建 AI前端后端Web框架react-datepicker 日历图标CalendarIcon组件完全指南三种图标渲染模式与 DatePicker 集成实战react datepicker 日历图标CalendarIcon组件完全指南三种图标渲染模式与 DatePicker 集成实战 CalendarIcon前端UI组件上一篇ComfyUI ControlNet Aux插件模型下载失败问题的终极解决方案下一篇CC Switch 切换 Codex 供应商后旧会话续聊失败三步切回加一条命令快速定位指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考