數(shù)據(jù)可視化數(shù)據(jù)分析GIS【免費下載鏈接】foliumPython Data. Leaflet.js Maps.項目地址https://gitcode.com/gh_mirrors/fo/folium點擊查看免費下載導讀folium.plugins.Fullscreen是 folium 官方提供的 Leaflet 插件封裝之一用于在地圖上添加一個「全屏切換」按鈕基于瀏覽器原生 HTML Fullscreen API 實現(xiàn)。本指南以 docs/user_guide/plugins/fullscreen.md 為核心結合 folium/plugins/fullscreen.py 的源碼實現(xiàn)系統(tǒng)講解該插件的使用方法、全部可配置參數(shù)、底層渲染原理與測試驗證幫助你在 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因而在現(xiàn)代瀏覽器Chrome、Firefox、Safari、Edge 等中均有良好的兼容性。在 folium 的插件體系中它位于folium.plugins命名空間下已在 folium/plugins/init.py 中通過from folium.plugins.fullscreen import Fullscreen導出因此使用時可直接寫作folium.plugins.Fullscreen(...)無需額外導入路徑。快速上手三行代碼實現(xiàn)全屏官方文檔給出的最小可用示例非常簡潔只需三步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(...)創(chuàng)建基礎地圖location為初始中心坐標zoom_start為初始縮放級別實例化Fullscreen控件并傳入四個自定義參數(shù)調用.add_to(m)將控件掛載到地圖上。在 Jupyter Notebook 中執(zhí)行后地圖右上角會出現(xiàn)一個標題為 Expand me 的按鈕點擊進入全屏后按鈕標題變?yōu)?Exit me。由于設置了force_separate_buttonTrue該按鈕與 Leaflet 默認的縮放控件/-分離顯示。若使用默認參數(shù)最短寫法為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。完整參數(shù)說明從 folium/plugins/fullscreen.py 的類定義第 51-67 行可以看到Fullscreen.__init__的完整簽名如下def __init__( self, positiontopleft, titleFull Screen, title_cancelExit Full Screen, force_separate_buttonFalse, **kwargs, ):各參數(shù)含義與默認值匯總參數(shù)類型默認值說明positionstrtopleft按鈕在地圖上的位置可選topleft、topright、bottomright、bottomlefttitlestrFull Screen按鈕的默認標題非全屏狀態(tài)下顯示的提示文字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的實現(xiàn)是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 的干凈與可讀性。底層實現(xiàn)原理模板與資源加載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 中產(chǎn)生類似如下的腳本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離線或內(nèi)網(wǎng)環(huán)境需注意網(wǎng)絡可達性若需替換 CDN 地址如改用內(nèi)網(wǎng)鏡像可利用JSCSSMixin.add_js_link(name, url)/add_css_link(name, url)方法按資源名覆蓋例如fs.add_js_link(Control.Fullscreen.js, your-mirror-url)。控件類名與對象標識源碼中self._name Fullscreen指定了控件的對象標識名它會出現(xiàn)在生成的 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測試要點創(chuàng)建一個地圖并掛載默認配置的Fullscreen控件渲染地圖根對象得到完整的 HTML 輸出字符串用與插件相同的 Jinja 模板獨立渲染控件再斷言其輸出是最終頁面 HTML 的子串。該測試直接驗證了「控件成功渲染進地圖 HTML」這一核心行為可視為插件可用性的最小回歸保障。運行測試可執(zhí)行在倉庫根目錄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 頁面元素因此當?shù)貓D嵌入在 Notebook 單元或 iframe 中時全屏會放大該容器本身適合大屏展示、數(shù)據(jù)看板等需要最大化地圖可視區(qū)域的場景。小結folium.plugins.Fullscreen提供了一條極簡的路徑為 folium 地圖增加全屏能力核心用法folium.plugins.Fullscreen(...).add_to(m)一行掛載、零手工資源引用四個關鍵參數(shù)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 目錄下。贊分享數(shù)據(jù)可視化數(shù)據(jù)分析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前端數(shù)據(jù)可視化GIS終極PDF字體嵌入指南告別跨平臺顯示問題的完整解決方案終極PDF字體嵌入指南告別跨平臺顯示問題的完整解決方案 還在為PDF文檔在不同設備上顯示亂碼而煩惱嗎 今天我要為大家介紹一款強大的開源工具——PDF補丁桌面應用文檔Obsidian AI協(xié)作終極指南Claudian插件的高效批量處理與多任務管理Obsidian AI協(xié)作終極指南Claudian插件的高效批量處理與多任務管理 Claudian是一款革命性的Obsidian插件它將Claude CodAI 應用代碼智能體交互助手人工智能AI Agent上一篇【親測免費】 ESP-Hosted 項目常見問題解決方案下一篇終極Lua代碼質量守護者Luacheck靜態(tài)分析工具完全指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 folium Fullscreen 插件：為 Leaflet 地圖添加全屏切換按鈕的完整指南
數(shù)據(jù)可視化數(shù)據(jù)分析GIS【免費下載鏈接】foliumPython Data. Leaflet.js Maps.項目地址https://gitcode.com/gh_mirrors/fo/folium點擊查看免費下載導讀folium.plugins.Fullscreen是 folium 官方提供的 Leaflet 插件封裝之一用于在地圖上添加一個「全屏切換」按鈕基于瀏覽器原生 HTML Fullscreen API 實現(xiàn)。本指南以 docs/user_guide/plugins/fullscreen.md 為核心結合 folium/plugins/fullscreen.py 的源碼實現(xiàn)系統(tǒng)講解該插件的使用方法、全部可配置參數(shù)、底層渲染原理與測試驗證幫助你在 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因而在現(xiàn)代瀏覽器Chrome、Firefox、Safari、Edge 等中均有良好的兼容性。在 folium 的插件體系中它位于folium.plugins命名空間下已在 folium/plugins/init.py 中通過from folium.plugins.fullscreen import Fullscreen導出因此使用時可直接寫作folium.plugins.Fullscreen(...)無需額外導入路徑。快速上手三行代碼實現(xiàn)全屏官方文檔給出的最小可用示例非常簡潔只需三步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(...)創(chuàng)建基礎地圖location為初始中心坐標zoom_start為初始縮放級別實例化Fullscreen控件并傳入四個自定義參數(shù)調用.add_to(m)將控件掛載到地圖上。在 Jupyter Notebook 中執(zhí)行后地圖右上角會出現(xiàn)一個標題為 Expand me 的按鈕點擊進入全屏后按鈕標題變?yōu)?Exit me。由于設置了force_separate_buttonTrue該按鈕與 Leaflet 默認的縮放控件/-分離顯示。若使用默認參數(shù)最短寫法為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。完整參數(shù)說明從 folium/plugins/fullscreen.py 的類定義第 51-67 行可以看到Fullscreen.__init__的完整簽名如下def __init__( self, positiontopleft, titleFull Screen, title_cancelExit Full Screen, force_separate_buttonFalse, **kwargs, ):各參數(shù)含義與默認值匯總參數(shù)類型默認值說明positionstrtopleft按鈕在地圖上的位置可選topleft、topright、bottomright、bottomlefttitlestrFull Screen按鈕的默認標題非全屏狀態(tài)下顯示的提示文字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的實現(xiàn)是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 的干凈與可讀性。底層實現(xiàn)原理模板與資源加載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 中產(chǎn)生類似如下的腳本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離線或內(nèi)網(wǎng)環(huán)境需注意網(wǎng)絡可達性若需替換 CDN 地址如改用內(nèi)網(wǎng)鏡像可利用JSCSSMixin.add_js_link(name, url)/add_css_link(name, url)方法按資源名覆蓋例如fs.add_js_link(Control.Fullscreen.js, your-mirror-url)。控件類名與對象標識源碼中self._name Fullscreen指定了控件的對象標識名它會出現(xiàn)在生成的 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測試要點創(chuàng)建一個地圖并掛載默認配置的Fullscreen控件渲染地圖根對象得到完整的 HTML 輸出字符串用與插件相同的 Jinja 模板獨立渲染控件再斷言其輸出是最終頁面 HTML 的子串。該測試直接驗證了「控件成功渲染進地圖 HTML」這一核心行為可視為插件可用性的最小回歸保障。運行測試可執(zhí)行在倉庫根目錄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 頁面元素因此當?shù)貓D嵌入在 Notebook 單元或 iframe 中時全屏會放大該容器本身適合大屏展示、數(shù)據(jù)看板等需要最大化地圖可視區(qū)域的場景。小結folium.plugins.Fullscreen提供了一條極簡的路徑為 folium 地圖增加全屏能力核心用法folium.plugins.Fullscreen(...).add_to(m)一行掛載、零手工資源引用四個關鍵參數(shù)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 目錄下。贊分享數(shù)據(jù)可視化數(shù)據(jù)分析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前端數(shù)據(jù)可視化GIS終極PDF字體嵌入指南告別跨平臺顯示問題的完整解決方案終極PDF字體嵌入指南告別跨平臺顯示問題的完整解決方案 還在為PDF文檔在不同設備上顯示亂碼而煩惱嗎 今天我要為大家介紹一款強大的開源工具——PDF補丁桌面應用文檔Obsidian AI協(xié)作終極指南Claudian插件的高效批量處理與多任務管理Obsidian AI協(xié)作終極指南Claudian插件的高效批量處理與多任務管理 Claudian是一款革命性的Obsidian插件它將Claude CodAI 應用代碼智能體交互助手人工智能AI Agent上一篇【親測免費】 ESP-Hosted 項目常見問題解決方案下一篇終極Lua代碼質量守護者Luacheck靜態(tài)分析工具完全指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考