
數(shù)據(jù)可視化數(shù)據(jù)分析GIS【免費(fèi)下載鏈接】foliumPython Data. Leaflet.js Maps.項(xiàng)目地址https://gitcode.com/gh_mirrors/fo/folium點(diǎn)擊查看免費(fèi)下載導(dǎo)讀folium.plugins.Fullscreen是 folium 官方提供的 Leaflet 插件封裝之一用于在地圖上添加一個(gè)「全屏切換」按鈕基于瀏覽器原生 HTML Fullscreen API 實(shí)現(xiàn)。本指南以 docs/user_guide/plugins/fullscreen.md 為核心結(jié)合 folium/plugins/fullscreen.py 的源碼實(shí)現(xiàn)系統(tǒng)講解該插件的使用方法、全部可配置參數(shù)、底層渲染原理與測(cè)試驗(yàn)證幫助你在 Web 地圖、Jupyter Notebook 及 Flask 服務(wù)等場(chǎng)景中快速接入全屏交互能力。Fullscreen 插件是什么Fullscreen 插件為 folium 地圖添加一個(gè)控制按鈕點(diǎn)擊后可將地圖容器切換到瀏覽器原生全屏模式再次點(diǎn)擊或按 ESC則退出全屏。在 docs/user_guide/plugins.rst 的插件總覽表中它的官方描述是A fullscreen button control for modern browsers, using HTML Fullscreen API.這意味著它不依賴任何自繪制的遮罩層而是直接調(diào)用瀏覽器的 Fullscreen API因而在現(xiàn)代瀏覽器Chrome、Firefox、Safari、Edge 等中均有良好的兼容性。在 folium 的插件體系中它位于folium.plugins命名空間下已在 folium/plugins/init.py 中通過(guò)from folium.plugins.fullscreen import Fullscreen導(dǎo)出因此使用時(shí)可直接寫作folium.plugins.Fullscreen(...)無(wú)需額外導(dǎo)入路徑??焖偕鲜秩写a實(shí)現(xiàn)全屏官方文檔給出的最小可用示例非常簡(jiǎ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)建基礎(chǔ)地圖location為初始中心坐標(biāo)zoom_start為初始縮放級(jí)別實(shí)例化Fullscreen控件并傳入四個(gè)自定義參數(shù)調(diào)用.add_to(m)將控件掛載到地圖上。在 Jupyter Notebook 中執(zhí)行后地圖右上角會(huì)出現(xiàn)一個(gè)標(biāo)題為 Expand me 的按鈕點(diǎn)擊進(jìn)入全屏后按鈕標(biāo)題變?yōu)?Exit me。由于設(shè)置了force_separate_buttonTrue該按鈕與 Leaflet 默認(rèn)的縮放控件/-分離顯示。若使用默認(rèn)參數(shù)最短寫法為import folium import folium.plugins m folium.Map(location[41.9, -97.3], zoom_start4) folium.plugins.Fullscreen().add_to(m) m默認(rèn)情況下按鈕位于左上角topleft標(biāo)題為 Full Screen / Exit Full Screen。完整參數(shù)說(shuō)明從 folium/plugins/fullscreen.py 的類定義第 51-67 行可以看到Fullscreen.__init__的完整簽名如下def __init__( self, positiontopleft, titleFull Screen, title_cancelExit Full Screen, force_separate_buttonFalse, **kwargs, ):各參數(shù)含義與默認(rèn)值匯總參數(shù)類型默認(rèn)值說(shuō)明positionstrtopleft按鈕在地圖上的位置可選topleft、topright、bottomright、bottomlefttitlestrFull Screen按鈕的默認(rèn)標(biāo)題非全屏狀態(tài)下顯示的提示文字title_cancelstrExit Full Screen進(jìn)入全屏后按鈕顯示的提示文字force_separate_buttonboolFalse是否強(qiáng)制將全屏按鈕與縮放按鈕分離為獨(dú)立按鈕**kwargs--透?jìng)鹘o底層 leaflet.fullscreen 控件的其他選項(xiàng)position控制按鈕位置控制按鈕的四個(gè)可選位置與 Leaflet 其他控件如縮放控件、比例尺控件一致topleft左上角默認(rèn)topright右上角bottomright右下角bottomleft左下角title / title_cancel定制按鈕文案title與title_cancel分別對(duì)應(yīng)進(jìn)入全屏前后的懸停提示文案。源碼默認(rèn)值分別為Full Screen與Exit Full Screen。官方文檔示例將其改為更友好的 Expand me / Exit me適合需要本地化或自定義交互文案的場(chǎng)景。force_separate_button是否獨(dú)立成按鈕Leaflet 的 fullscreen 控件默認(rèn)會(huì)與縮放控件zoom control組合在一起。當(dāng)force_separate_buttonFalse默認(rèn)時(shí)全屏按鈕會(huì)附加在縮放控件上設(shè)為True時(shí)則渲染為一個(gè)獨(dú)立按鈕視覺(jué)上更清晰也便于在自定義控件布局中單獨(dú)定位。官方文檔示例使用了force_separate_buttonTrue。kwargs 透?jìng)鳈C(jī)制__init__末尾的**kwargs會(huì)被并入self.options字典最終通過(guò)模板中的{{ this.options|tojavascript }}序列化為 JavaScript 對(duì)象傳給L.control.fullscreen(...)。這意味著底層 leaflet.fullscreen 插件支持的額外選項(xiàng)如titleCancel的駝峰變體理論上都可以透?jìng)骶唧w能力以 leaflet.fullscreen 插件為準(zhǔn)。默認(rèn)值過(guò)濾remove_empty 的作用從源碼可以看到self.options的構(gòu)造使用了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的實(shí)現(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}它會(huì)把值為None的鍵剔除確保生成的 JavaScript 配置對(duì)象中不包含無(wú)意義的null值從而保持輸出 HTML 的干凈與可讀性。底層實(shí)現(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()是控件掛載到的父對(duì)象通常是地圖變量名如map的引用this.options|tojavascript將 Python 字典序列化為 JSON 風(fēng)格的 JS 對(duì)象字面量。JS / CSS 資源自動(dòng)注入JSCSSMixin定義于 folium/elements.py 第 23-66 行負(fù)責(zé)在渲染時(shí)把外部資源鏈接注入到頁(yè)面head中。Fullscreen聲明了兩條默認(rèn)資源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, ) ]渲染時(shí)JSCSSMixin.render會(huì)遍歷default_js與default_css通過(guò)figure.header.add_child(JavascriptLink(url), namename)與figure.header.add_child(CssLink(url), namename)將 CDN 資源以命名方式注入頁(yè)面頭部。這意味著無(wú)需手動(dòng)引入任何 CSS/JS 文件Fullscreen控件會(huì)自包含所需資源資源通過(guò) jsDelivr CDN 加載leaflet.fullscreen3.0.0版本渲染地圖的頁(yè)面需要能訪問(wèn)該 CDN離線或內(nèi)網(wǎng)環(huán)境需注意網(wǎng)絡(luò)可達(dá)性若需替換 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)。控件類名與對(duì)象標(biāo)識(shí)源碼中self._name Fullscreen指定了控件的對(duì)象標(biāo)識(shí)名它會(huì)出現(xiàn)在生成的 HTML 元素命名與腳本變量命名中便于在生成的頁(yè)面中定位該控件。測(cè)試驗(yàn)證渲染輸出可被斷言倉(cāng)庫(kù)在 tests/plugins/test_fullscreen.py 中為 Fullscreen 控件提供了自動(dòng)化測(cè)試核心邏輯如下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測(cè)試要點(diǎn)創(chuàng)建一個(gè)地圖并掛載默認(rèn)配置的Fullscreen控件渲染地圖根對(duì)象得到完整的 HTML 輸出字符串用與插件相同的 Jinja 模板獨(dú)立渲染控件再斷言其輸出是最終頁(yè)面 HTML 的子串。該測(cè)試直接驗(yàn)證了「控件成功渲染進(jìn)地圖 HTML」這一核心行為可視為插件可用性的最小回歸保障。運(yùn)行測(cè)試可執(zhí)行在倉(cāng)庫(kù)根目錄python -m pytest tests/plugins/test_fullscreen.py在 Flask 服務(wù)中集成全屏地圖官方示例 docs/_static/flask_example.py 展示了如何用 Flask 提供一個(gè)含全屏地圖的頁(yè)面其核心路由如下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()啟動(dòng)方式python docs/_static/flask_example.py然后瀏覽器訪問(wèn)http://127.0.0.1:5000/即可看到地圖。將Fullscreen控件加入地圖后返回的 HTML 中即包含全屏按鈕及所需的 JS/CSS 資源用戶在瀏覽器端可直接點(diǎn)擊進(jìn)入全屏。進(jìn)階與其他 folium 元素的組合Fullscreen 是一個(gè)標(biāo)準(zhǔn)的MacroElement控件與 folium 中其他元素一樣遵循「實(shí)例化 → add_to(地圖)」的組合模式因此可以自由地與標(biāo)記、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全屏切換針對(duì)的是地圖所在容器整個(gè) HTML 頁(yè)面元素因此當(dāng)?shù)貓D嵌入在 Notebook 單元或 iframe 中時(shí)全屏?xí)糯笤撊萜鞅旧磉m合大屏展示、數(shù)據(jù)看板等需要最大化地圖可視區(qū)域的場(chǎng)景。小結(jié)folium.plugins.Fullscreen提供了一條極簡(jiǎn)的路徑為 folium 地圖增加全屏能力核心用法folium.plugins.Fullscreen(...).add_to(m)一行掛載、零手工資源引用四個(gè)關(guān)鍵參數(shù)position、title、title_cancel、force_separate_button覆蓋位置、文案與布局的常見(jiàn)定制需求底層機(jī)制JSCSSMixin自動(dòng)注入 leaflet.fullscreen 的 JS/CSSv3.0.0jsDelivr CDNMacroElement模板生成L.control.fullscreen(...).addTo(map)腳本質(zhì)量保障倉(cāng)庫(kù)自帶渲染斷言測(cè)試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【免費(fèi)下載鏈接】foliumPython Data. Leaflet.js Maps.項(xiàng)目地址https://gitcode.com/gh_mirrors/fo/folium點(diǎn)擊查看免費(fèi)下載相關(guān)推薦Leaflet.fullscreen 插件指南基于 HTML Fullscreen API 的 Leaflet 地圖全屏控制Leaflet.fullscreen 插件指南基于 HTML Fullscreen API 的 Leaflet 地圖全屏控制 導(dǎo)讀 Leaflet.fulls前端數(shù)據(jù)可視化GIS終極PDF字體嵌入指南告別跨平臺(tái)顯示問(wèn)題的完整解決方案終極PDF字體嵌入指南告別跨平臺(tái)顯示問(wèn)題的完整解決方案 還在為PDF文檔在不同設(shè)備上顯示亂碼而煩惱嗎 今天我要為大家介紹一款強(qiáng)大的開(kāi)源工具——PDF補(bǔ)丁桌面應(yīng)用文檔Obsidian AI協(xié)作終極指南Claudian插件的高效批量處理與多任務(wù)管理Obsidian AI協(xié)作終極指南Claudian插件的高效批量處理與多任務(wù)管理 Claudian是一款革命性的Obsidian插件它將Claude CodAI 應(yīng)用代碼智能體交互助手人工智能AI Agent上一篇【親測(cè)免費(fèi)】 ESP-Hosted 項(xiàng)目常見(jiàn)問(wèn)題解決方案下一篇終極Lua代碼質(zhì)量守護(hù)者Luacheck靜態(tài)分析工具完全指南創(chuàng)作聲明:本文部分內(nèi)容由AI輔助生成(AIGC),僅供參考