数据可视化数据分析GIS【免费下载链接】foliumPython Data. Leaflet.js Maps.项目地址https://gitcode.com/gh_mirrors/fo/folium点击查看免费下载导读folium.plugins.Fullscreen是 folium 官方提供的 Leaflet 插件封装之一用于在地图上添加一个「全屏切换」按钮基于浏览器原生 HTML Fullscreen API 实现。本指南以 docs/user_guide/plugins/fullscreen.md 为核心结合 folium/plugins/fullscreen.py 的源码实现系统讲解该插件的使用方法、全部可配置参数、底层渲染原理与测试验证帮助你在 Web 地图、Jupyter Notebook 及 Flask 服务等场景中快速接入全屏交互能力。Fullscreen 插件是什么Fullscreen 插件为 folium 地图添加一个控制按钮点击后可将地图容器切换到浏览器原生全屏模式再次点击或按 ESC则退出全屏。在 docs/user_guide/plugins.rst 的插件总览表中它的官方描述是A fullscreen button control for modern browsers, using HTML Fullscreen API.这意味着它不依赖任何自绘制的遮罩层而是直接调用浏览器的 Fullscreen API因而在现代浏览器Chrome、Firefox、Safari、Edge 等中均有良好的兼容性。在 folium 的插件体系中它位于folium.plugins命名空间下已在 folium/plugins/init.py 中通过from folium.plugins.fullscreen import Fullscreen导出因此使用时可直接写作folium.plugins.Fullscreen(...)无需额外导入路径。快速上手三行代码实现全屏官方文档给出的最小可用示例非常简洁只需三步import folium import folium.plugins m folium.Map(location[41.9, -97.3], zoom_start4) folium.plugins.Fullscreen( positiontopright, titleExpand me, title_cancelExit me, force_separate_buttonTrue, ).add_to(m) m代码解读folium.Map(...)创建基础地图location为初始中心坐标zoom_start为初始缩放级别实例化Fullscreen控件并传入四个自定义参数调用.add_to(m)将控件挂载到地图上。在 Jupyter Notebook 中执行后地图右上角会出现一个标题为 Expand me 的按钮点击进入全屏后按钮标题变为 Exit me。由于设置了force_separate_buttonTrue该按钮与 Leaflet 默认的缩放控件/-分离显示。若使用默认参数最短写法为import folium import folium.plugins m folium.Map(location[41.9, -97.3], zoom_start4) folium.plugins.Fullscreen().add_to(m) m默认情况下按钮位于左上角topleft标题为 Full Screen / Exit Full Screen。完整参数说明从 folium/plugins/fullscreen.py 的类定义第 51-67 行可以看到Fullscreen.__init__的完整签名如下def __init__( self, positiontopleft, titleFull Screen, title_cancelExit Full Screen, force_separate_buttonFalse, **kwargs, ):各参数含义与默认值汇总参数类型默认值说明positionstrtopleft按钮在地图上的位置可选topleft、topright、bottomright、bottomlefttitlestrFull Screen按钮的默认标题非全屏状态下显示的提示文字title_cancelstrExit Full Screen进入全屏后按钮显示的提示文字force_separate_buttonboolFalse是否强制将全屏按钮与缩放按钮分离为独立按钮**kwargs--透传给底层 leaflet.fullscreen 控件的其他选项position控制按钮位置控制按钮的四个可选位置与 Leaflet 其他控件如缩放控件、比例尺控件一致topleft左上角默认topright右上角bottomright右下角bottomleft左下角title / title_cancel定制按钮文案title与title_cancel分别对应进入全屏前后的悬停提示文案。源码默认值分别为Full Screen与Exit Full Screen。官方文档示例将其改为更友好的 Expand me / Exit me适合需要本地化或自定义交互文案的场景。force_separate_button是否独立成按钮Leaflet 的 fullscreen 控件默认会与缩放控件zoom control组合在一起。当force_separate_buttonFalse默认时全屏按钮会附加在缩放控件上设为True时则渲染为一个独立按钮视觉上更清晰也便于在自定义控件布局中单独定位。官方文档示例使用了force_separate_buttonTrue。kwargs 透传机制__init__末尾的**kwargs会被并入self.options字典最终通过模板中的{{ this.options|tojavascript }}序列化为 JavaScript 对象传给L.control.fullscreen(...)。这意味着底层 leaflet.fullscreen 插件支持的额外选项如titleCancel的驼峰变体理论上都可以透传具体能力以 leaflet.fullscreen 插件为准。默认值过滤remove_empty 的作用从源码可以看到self.options的构造使用了folium.utilities.remove_empty定义于 folium/utilities.py 第 408-410 行self.options remove_empty( positionposition, titletitle, title_canceltitle_cancel, force_separate_buttonforce_separate_button, **kwargs, )remove_empty的实现是def remove_empty(**kwargs): Return a dict without None values. return {key: value for key, value in kwargs.items() if value is not None}它会把值为None的键剔除确保生成的 JavaScript 配置对象中不包含无意义的null值从而保持输出 HTML 的干净与可读性。底层实现原理模板与资源加载Fullscreen类继承自JSCSSMixin与MacroElementclass Fullscreen(JSCSSMixin, MacroElement):渲染模板类的_template定义了控件的 JavaScript 渲染逻辑folium/plugins/fullscreen.py 第 30-36 行{% macro script(this, kwargs) %} L.control.fullscreen( {{ this.options|tojavascript }} ).addTo({{this._parent.get_name()}}); {% endmacro %}该模板最终在生成的 HTML 中产生类似如下的脚本L.control.fullscreen({...}).addTo(map);其中this._parent.get_name()是控件挂载到的父对象通常是地图变量名如map的引用this.options|tojavascript将 Python 字典序列化为 JSON 风格的 JS 对象字面量。JS / CSS 资源自动注入JSCSSMixin定义于 folium/elements.py 第 23-66 行负责在渲染时把外部资源链接注入到页面head中。Fullscreen声明了两条默认资源default_js [ ( Control.Fullscreen.js, https://cdn.jsdelivr.net/npm/leaflet.fullscreen3.0.0/Control.FullScreen.min.js, ) ] default_css [ ( Control.FullScreen.css, https://cdn.jsdelivr.net/npm/leaflet.fullscreen3.0.0/Control.FullScreen.css, ) ]渲染时JSCSSMixin.render会遍历default_js与default_css通过figure.header.add_child(JavascriptLink(url), namename)与figure.header.add_child(CssLink(url), namename)将 CDN 资源以命名方式注入页面头部。这意味着无需手动引入任何 CSS/JS 文件Fullscreen控件会自包含所需资源资源通过 jsDelivr CDN 加载leaflet.fullscreen3.0.0版本渲染地图的页面需要能访问该 CDN离线或内网环境需注意网络可达性若需替换 CDN 地址如改用内网镜像可利用JSCSSMixin.add_js_link(name, url)/add_css_link(name, url)方法按资源名覆盖例如fs.add_js_link(Control.Fullscreen.js, your-mirror-url)。控件类名与对象标识源码中self._name Fullscreen指定了控件的对象标识名它会出现在生成的 HTML 元素命名与脚本变量命名中便于在生成的页面中定位该控件。测试验证渲染输出可被断言仓库在 tests/plugins/test_fullscreen.py 中为 Fullscreen 控件提供了自动化测试核心逻辑如下def test_fullscreen(): m folium.Map([47, 3], zoom_start1) fs plugins.Fullscreen().add_to(m) out normalize(m._parent.render()) # verify that the fullscreen control was rendered tmpl Template( L.control.fullscreen( {{ this.options|tojavascript }} ).addTo({{this._parent.get_name()}}); ) assert normalize(tmpl.render(thisfs)) in out测试要点创建一个地图并挂载默认配置的Fullscreen控件渲染地图根对象得到完整的 HTML 输出字符串用与插件相同的 Jinja 模板独立渲染控件再断言其输出是最终页面 HTML 的子串。该测试直接验证了「控件成功渲染进地图 HTML」这一核心行为可视为插件可用性的最小回归保障。运行测试可执行在仓库根目录python -m pytest tests/plugins/test_fullscreen.py在 Flask 服务中集成全屏地图官方示例 docs/_static/flask_example.py 展示了如何用 Flask 提供一个含全屏地图的页面其核心路由如下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()启动方式python docs/_static/flask_example.py然后浏览器访问http://127.0.0.1:5000/即可看到地图。将Fullscreen控件加入地图后返回的 HTML 中即包含全屏按钮及所需的 JS/CSS 资源用户在浏览器端可直接点击进入全屏。进阶与其他 folium 元素的组合Fullscreen 是一个标准的MacroElement控件与 folium 中其他元素一样遵循「实例化 → add_to(地图)」的组合模式因此可以自由地与标记、GeoJSON 图层、图层控制等组合使用。例如import folium import folium.plugins m folium.Map(location[41.9, -97.3], zoom_start4) folium.Marker([41.9, -97.3], popupCenter point).add_to(m) folium.plugins.Fullscreen( positionbottomright, titleEnter Fullscreen, title_cancelExit Fullscreen, force_separate_buttonTrue, ).add_to(m) m全屏切换针对的是地图所在容器整个 HTML 页面元素因此当地图嵌入在 Notebook 单元或 iframe 中时全屏会放大该容器本身适合大屏展示、数据看板等需要最大化地图可视区域的场景。小结folium.plugins.Fullscreen提供了一条极简的路径为 folium 地图增加全屏能力核心用法folium.plugins.Fullscreen(...).add_to(m)一行挂载、零手工资源引用四个关键参数position、title、title_cancel、force_separate_button覆盖位置、文案与布局的常见定制需求底层机制JSCSSMixin自动注入 leaflet.fullscreen 的 JS/CSSv3.0.0jsDelivr CDNMacroElement模板生成L.control.fullscreen(...).addTo(map)脚本质量保障仓库自带渲染断言测试tests/plugins/test_fullscreen.py并有 Flask 集成示例docs/_static/flask_example.py可参考。如需了解 folium 全部插件的能力矩阵可查阅 docs/user_guide/plugins.rst其他插件文档位于 docs/user_guide/plugins 目录下。赞分享数据可视化数据分析GIS【免费下载链接】foliumPython Data. Leaflet.js Maps.项目地址https://gitcode.com/gh_mirrors/fo/folium点击查看免费下载相关推荐Leaflet.fullscreen 插件指南基于 HTML Fullscreen API 的 Leaflet 地图全屏控制Leaflet.fullscreen 插件指南基于 HTML Fullscreen API 的 Leaflet 地图全屏控制 导读 Leaflet.fulls前端数据可视化GIS终极PDF字体嵌入指南告别跨平台显示问题的完整解决方案终极PDF字体嵌入指南告别跨平台显示问题的完整解决方案 还在为PDF文档在不同设备上显示乱码而烦恼吗 今天我要为大家介绍一款强大的开源工具——PDF补丁桌面应用文档Obsidian AI协作终极指南Claudian插件的高效批量处理与多任务管理Obsidian AI协作终极指南Claudian插件的高效批量处理与多任务管理 Claudian是一款革命性的Obsidian插件它将Claude CodAI 应用代码智能体交互助手人工智能AI Agent上一篇【亲测免费】 ESP-Hosted 项目常见问题解决方案下一篇终极Lua代码质量守护者Luacheck静态分析工具完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 folium Fullscreen 插件：为 Leaflet 地图添加全屏切换按钮的完整指南
数据可视化数据分析GIS【免费下载链接】foliumPython Data. Leaflet.js Maps.项目地址https://gitcode.com/gh_mirrors/fo/folium点击查看免费下载导读folium.plugins.Fullscreen是 folium 官方提供的 Leaflet 插件封装之一用于在地图上添加一个「全屏切换」按钮基于浏览器原生 HTML Fullscreen API 实现。本指南以 docs/user_guide/plugins/fullscreen.md 为核心结合 folium/plugins/fullscreen.py 的源码实现系统讲解该插件的使用方法、全部可配置参数、底层渲染原理与测试验证帮助你在 Web 地图、Jupyter Notebook 及 Flask 服务等场景中快速接入全屏交互能力。Fullscreen 插件是什么Fullscreen 插件为 folium 地图添加一个控制按钮点击后可将地图容器切换到浏览器原生全屏模式再次点击或按 ESC则退出全屏。在 docs/user_guide/plugins.rst 的插件总览表中它的官方描述是A fullscreen button control for modern browsers, using HTML Fullscreen API.这意味着它不依赖任何自绘制的遮罩层而是直接调用浏览器的 Fullscreen API因而在现代浏览器Chrome、Firefox、Safari、Edge 等中均有良好的兼容性。在 folium 的插件体系中它位于folium.plugins命名空间下已在 folium/plugins/init.py 中通过from folium.plugins.fullscreen import Fullscreen导出因此使用时可直接写作folium.plugins.Fullscreen(...)无需额外导入路径。快速上手三行代码实现全屏官方文档给出的最小可用示例非常简洁只需三步import folium import folium.plugins m folium.Map(location[41.9, -97.3], zoom_start4) folium.plugins.Fullscreen( positiontopright, titleExpand me, title_cancelExit me, force_separate_buttonTrue, ).add_to(m) m代码解读folium.Map(...)创建基础地图location为初始中心坐标zoom_start为初始缩放级别实例化Fullscreen控件并传入四个自定义参数调用.add_to(m)将控件挂载到地图上。在 Jupyter Notebook 中执行后地图右上角会出现一个标题为 Expand me 的按钮点击进入全屏后按钮标题变为 Exit me。由于设置了force_separate_buttonTrue该按钮与 Leaflet 默认的缩放控件/-分离显示。若使用默认参数最短写法为import folium import folium.plugins m folium.Map(location[41.9, -97.3], zoom_start4) folium.plugins.Fullscreen().add_to(m) m默认情况下按钮位于左上角topleft标题为 Full Screen / Exit Full Screen。完整参数说明从 folium/plugins/fullscreen.py 的类定义第 51-67 行可以看到Fullscreen.__init__的完整签名如下def __init__( self, positiontopleft, titleFull Screen, title_cancelExit Full Screen, force_separate_buttonFalse, **kwargs, ):各参数含义与默认值汇总参数类型默认值说明positionstrtopleft按钮在地图上的位置可选topleft、topright、bottomright、bottomlefttitlestrFull Screen按钮的默认标题非全屏状态下显示的提示文字title_cancelstrExit Full Screen进入全屏后按钮显示的提示文字force_separate_buttonboolFalse是否强制将全屏按钮与缩放按钮分离为独立按钮**kwargs--透传给底层 leaflet.fullscreen 控件的其他选项position控制按钮位置控制按钮的四个可选位置与 Leaflet 其他控件如缩放控件、比例尺控件一致topleft左上角默认topright右上角bottomright右下角bottomleft左下角title / title_cancel定制按钮文案title与title_cancel分别对应进入全屏前后的悬停提示文案。源码默认值分别为Full Screen与Exit Full Screen。官方文档示例将其改为更友好的 Expand me / Exit me适合需要本地化或自定义交互文案的场景。force_separate_button是否独立成按钮Leaflet 的 fullscreen 控件默认会与缩放控件zoom control组合在一起。当force_separate_buttonFalse默认时全屏按钮会附加在缩放控件上设为True时则渲染为一个独立按钮视觉上更清晰也便于在自定义控件布局中单独定位。官方文档示例使用了force_separate_buttonTrue。kwargs 透传机制__init__末尾的**kwargs会被并入self.options字典最终通过模板中的{{ this.options|tojavascript }}序列化为 JavaScript 对象传给L.control.fullscreen(...)。这意味着底层 leaflet.fullscreen 插件支持的额外选项如titleCancel的驼峰变体理论上都可以透传具体能力以 leaflet.fullscreen 插件为准。默认值过滤remove_empty 的作用从源码可以看到self.options的构造使用了folium.utilities.remove_empty定义于 folium/utilities.py 第 408-410 行self.options remove_empty( positionposition, titletitle, title_canceltitle_cancel, force_separate_buttonforce_separate_button, **kwargs, )remove_empty的实现是def remove_empty(**kwargs): Return a dict without None values. return {key: value for key, value in kwargs.items() if value is not None}它会把值为None的键剔除确保生成的 JavaScript 配置对象中不包含无意义的null值从而保持输出 HTML 的干净与可读性。底层实现原理模板与资源加载Fullscreen类继承自JSCSSMixin与MacroElementclass Fullscreen(JSCSSMixin, MacroElement):渲染模板类的_template定义了控件的 JavaScript 渲染逻辑folium/plugins/fullscreen.py 第 30-36 行{% macro script(this, kwargs) %} L.control.fullscreen( {{ this.options|tojavascript }} ).addTo({{this._parent.get_name()}}); {% endmacro %}该模板最终在生成的 HTML 中产生类似如下的脚本L.control.fullscreen({...}).addTo(map);其中this._parent.get_name()是控件挂载到的父对象通常是地图变量名如map的引用this.options|tojavascript将 Python 字典序列化为 JSON 风格的 JS 对象字面量。JS / CSS 资源自动注入JSCSSMixin定义于 folium/elements.py 第 23-66 行负责在渲染时把外部资源链接注入到页面head中。Fullscreen声明了两条默认资源default_js [ ( Control.Fullscreen.js, https://cdn.jsdelivr.net/npm/leaflet.fullscreen3.0.0/Control.FullScreen.min.js, ) ] default_css [ ( Control.FullScreen.css, https://cdn.jsdelivr.net/npm/leaflet.fullscreen3.0.0/Control.FullScreen.css, ) ]渲染时JSCSSMixin.render会遍历default_js与default_css通过figure.header.add_child(JavascriptLink(url), namename)与figure.header.add_child(CssLink(url), namename)将 CDN 资源以命名方式注入页面头部。这意味着无需手动引入任何 CSS/JS 文件Fullscreen控件会自包含所需资源资源通过 jsDelivr CDN 加载leaflet.fullscreen3.0.0版本渲染地图的页面需要能访问该 CDN离线或内网环境需注意网络可达性若需替换 CDN 地址如改用内网镜像可利用JSCSSMixin.add_js_link(name, url)/add_css_link(name, url)方法按资源名覆盖例如fs.add_js_link(Control.Fullscreen.js, your-mirror-url)。控件类名与对象标识源码中self._name Fullscreen指定了控件的对象标识名它会出现在生成的 HTML 元素命名与脚本变量命名中便于在生成的页面中定位该控件。测试验证渲染输出可被断言仓库在 tests/plugins/test_fullscreen.py 中为 Fullscreen 控件提供了自动化测试核心逻辑如下def test_fullscreen(): m folium.Map([47, 3], zoom_start1) fs plugins.Fullscreen().add_to(m) out normalize(m._parent.render()) # verify that the fullscreen control was rendered tmpl Template( L.control.fullscreen( {{ this.options|tojavascript }} ).addTo({{this._parent.get_name()}}); ) assert normalize(tmpl.render(thisfs)) in out测试要点创建一个地图并挂载默认配置的Fullscreen控件渲染地图根对象得到完整的 HTML 输出字符串用与插件相同的 Jinja 模板独立渲染控件再断言其输出是最终页面 HTML 的子串。该测试直接验证了「控件成功渲染进地图 HTML」这一核心行为可视为插件可用性的最小回归保障。运行测试可执行在仓库根目录python -m pytest tests/plugins/test_fullscreen.py在 Flask 服务中集成全屏地图官方示例 docs/_static/flask_example.py 展示了如何用 Flask 提供一个含全屏地图的页面其核心路由如下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()启动方式python docs/_static/flask_example.py然后浏览器访问http://127.0.0.1:5000/即可看到地图。将Fullscreen控件加入地图后返回的 HTML 中即包含全屏按钮及所需的 JS/CSS 资源用户在浏览器端可直接点击进入全屏。进阶与其他 folium 元素的组合Fullscreen 是一个标准的MacroElement控件与 folium 中其他元素一样遵循「实例化 → add_to(地图)」的组合模式因此可以自由地与标记、GeoJSON 图层、图层控制等组合使用。例如import folium import folium.plugins m folium.Map(location[41.9, -97.3], zoom_start4) folium.Marker([41.9, -97.3], popupCenter point).add_to(m) folium.plugins.Fullscreen( positionbottomright, titleEnter Fullscreen, title_cancelExit Fullscreen, force_separate_buttonTrue, ).add_to(m) m全屏切换针对的是地图所在容器整个 HTML 页面元素因此当地图嵌入在 Notebook 单元或 iframe 中时全屏会放大该容器本身适合大屏展示、数据看板等需要最大化地图可视区域的场景。小结folium.plugins.Fullscreen提供了一条极简的路径为 folium 地图增加全屏能力核心用法folium.plugins.Fullscreen(...).add_to(m)一行挂载、零手工资源引用四个关键参数position、title、title_cancel、force_separate_button覆盖位置、文案与布局的常见定制需求底层机制JSCSSMixin自动注入 leaflet.fullscreen 的 JS/CSSv3.0.0jsDelivr CDNMacroElement模板生成L.control.fullscreen(...).addTo(map)脚本质量保障仓库自带渲染断言测试tests/plugins/test_fullscreen.py并有 Flask 集成示例docs/_static/flask_example.py可参考。如需了解 folium 全部插件的能力矩阵可查阅 docs/user_guide/plugins.rst其他插件文档位于 docs/user_guide/plugins 目录下。赞分享数据可视化数据分析GIS【免费下载链接】foliumPython Data. Leaflet.js Maps.项目地址https://gitcode.com/gh_mirrors/fo/folium点击查看免费下载相关推荐Leaflet.fullscreen 插件指南基于 HTML Fullscreen API 的 Leaflet 地图全屏控制Leaflet.fullscreen 插件指南基于 HTML Fullscreen API 的 Leaflet 地图全屏控制 导读 Leaflet.fulls前端数据可视化GIS终极PDF字体嵌入指南告别跨平台显示问题的完整解决方案终极PDF字体嵌入指南告别跨平台显示问题的完整解决方案 还在为PDF文档在不同设备上显示乱码而烦恼吗 今天我要为大家介绍一款强大的开源工具——PDF补丁桌面应用文档Obsidian AI协作终极指南Claudian插件的高效批量处理与多任务管理Obsidian AI协作终极指南Claudian插件的高效批量处理与多任务管理 Claudian是一款革命性的Obsidian插件它将Claude CodAI 应用代码智能体交互助手人工智能AI Agent上一篇【亲测免费】 ESP-Hosted 项目常见问题解决方案下一篇终极Lua代码质量守护者Luacheck静态分析工具完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考