數(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)下載AntPath螞蟻線/螞蟻路徑是 folium 提供的一款地圖插件它把 Leaflet 的 polyline 與 CSS 動(dòng)畫結(jié)合讓軌跡線呈現(xiàn)“螞蟻爬行”式的流動(dòng)效果非常適合展示風(fēng)場(chǎng)、洋流、航線、遷徙路徑等有方向感、有動(dòng)態(tài)過程的數(shù)據(jù)。本篇文章以倉庫內(nèi) antpath.md 文檔為核心結(jié)合 antpath.py 源碼與 test_antpath.py 測(cè)試用例完整講解 AntPath 的用法、全部配置參數(shù)與底層實(shí)現(xiàn)原理讀完即可在自己的地圖上跑起來。AntPath 能做什么AntPath 本質(zhì)上是 folium 對(duì)第三方 Leaflet 插件 leaflet-ant-path 最大的區(qū)別在于它不是一條靜止的線而是通過 dash 虛線樣式與動(dòng)畫讓整條線段的“線段/空隙”交替移動(dòng)產(chǎn)生一種沿路徑連續(xù)爬行的視覺錯(cuò)覺。這種動(dòng)態(tài)效果特別適合表達(dá)風(fēng)場(chǎng)流向文檔示例即用北大西洋上空的 16 個(gè)坐標(biāo)點(diǎn)描繪一條風(fēng)軌跡洋流、河流或航線的方向遷徙路線、物流配送路徑等帶時(shí)序感的數(shù)據(jù)。在 folium 中AntPath 位于folium.plugins命名空間下通過 folium/plugins/init.py 中from folium.plugins.antpath import AntPath對(duì)外導(dǎo)出因此可以直接用folium.plugins.AntPath(...)創(chuàng)建。快速上手繪制一條螞蟻線文檔中的完整示例是在一張空地圖上繪制跨越北大西洋的風(fēng)軌跡線代碼如下import folium import folium.plugins m folium.Map() wind_locations [ [59.35560, -31.992190], [55.178870, -42.89062], [47.754100, -43.94531], [38.272690, -37.96875], [27.059130, -41.13281], [16.299050, -36.56250], [8.4071700, -30.23437], [1.0546300, -22.50000], [-8.754790, -18.28125], [-21.61658, -20.03906], [-31.35364, -24.25781], [-39.90974, -30.93750], [-43.83453, -41.13281], [-47.75410, -49.92187], [-50.95843, -54.14062], [-55.97380, -56.60156], ] folium.plugins.AntPath( locationswind_locations, reverseTrue, dash_array[20, 30] ).add_to(m) m.fit_bounds(m.get_bounds()) m這段代碼的執(zhí)行流程是folium.Map()創(chuàng)建默認(rèn)地圖對(duì)象初始位置為中心點(diǎn) [0, 0]、默認(rèn)縮放級(jí)別AntPath(locationswind_locations, reverseTrue, dash_array[20, 30])用 16 個(gè)[緯度, 經(jīng)度]坐標(biāo)對(duì)構(gòu)造螞蟻線并開啟反向動(dòng)畫、設(shè)置 20/30 的虛線段長(zhǎng)度.add_to(m)將圖層掛到地圖上m.fit_bounds(m.get_bounds())先讓 folium 根據(jù)所有坐標(biāo)點(diǎn)計(jì)算出外包矩形再把地圖視野自動(dòng)縮放到恰好包含這條軌跡。注意文檔示例中reverseTrue傳的是字符串True。在 Python 中這個(gè)字符串是 truthy 值因此能正常生效但從源碼看更規(guī)范、可讀性更好的寫法是傳布爾值True它與字符串True都會(huì)被渲染為 JS 層的reverse: true。測(cè)試用例 test_antpath.py 中也以默認(rèn)參數(shù)構(gòu)造對(duì)象僅驗(yàn)證渲染腳本與 CDN 引入未對(duì)字符串寫法做特殊校驗(yàn)。fit_bounds 的作用m.fit_bounds(m.get_bounds())是兩個(gè) Map 方法的鏈?zhǔn)秸{(diào)用參見 folium.pym.get_bounds()匯總地圖上所有圖層的邊界返回[[西南角緯度, 西南角經(jīng)度], [東北角緯度, 東北角經(jīng)度]]形式的兩點(diǎn)包圍盒m.fit_bounds(bounds, padding_top_leftNone, padding_bottom_rightNone, paddingNone, max_zoomNone)把視野調(diào)整為剛好容納該包圍盒并盡量使用最大縮放級(jí)別。對(duì)本示例而言這意味著地圖會(huì)自動(dòng)框住整條風(fēng)軌跡線而不必手動(dòng)指定中心點(diǎn)與縮放級(jí)別。AntPath 的完整參數(shù)說明構(gòu)造參數(shù)與默認(rèn)值從 antpath.py 源碼看AntPath.__init__簽名如下def __init__(self, locations, popupNone, tooltipNone, **kwargs):其中參數(shù)類型默認(rèn)值說明locations坐標(biāo)對(duì)列表必填折線的經(jīng)緯度點(diǎn)序列每點(diǎn)為[緯度, 經(jīng)度]Northing, Eastingpopupstr或folium.PopupNone點(diǎn)擊對(duì)象時(shí)顯示的文本或可視化內(nèi)容tooltipstr或folium.TooltipNone鼠標(biāo)懸停時(shí)顯示的文本**kwargs見下方各表—Polyline 與 AntPath 的全部可選項(xiàng)AntPath繼承自 BaseMultiLocation因此locations會(huì)經(jīng)過validate_multi_locations校驗(yàn)支持[[lat, lon], ...]這種坐標(biāo)對(duì)列表也支持[[[lat, lon], ...], ...]這種嵌套的“多條線”結(jié)構(gòu)當(dāng)傳入的是 Pandas DataFrame 時(shí)會(huì)被自動(dòng)轉(zhuǎn)換為 NumPy 數(shù)組后再校驗(yàn)見 utilities.py。popup與tooltip若非 Popup/Tooltip 實(shí)例則會(huì)被自動(dòng)包裝成對(duì)應(yīng)對(duì)象并作為子元素掛載。AntPath 專屬動(dòng)畫參數(shù)構(gòu)造時(shí)剩余的**kwargs會(huì)被分成兩部分處理先交給path_options(lineTrue, **kwargs)生成 Leaflet Path 公共選項(xiàng)再在self.options.update({...})中寫入 AntPath 專屬參數(shù)。AntPath 專屬參數(shù)及其默認(rèn)值如下源碼 antpath.py參數(shù)snake_case渲染為 JS 的鍵默認(rèn)值作用pausedpausedFalse是否暫停動(dòng)畫True時(shí)線段保持靜止不做“爬行”reversereverseFalse是否反向播放動(dòng)畫讓螞蟻線朝相反方向流動(dòng)hardware_accelerationhardwareAccelerationFalse是否啟用 GPU 硬件加速渲染delaydelay400動(dòng)畫節(jié)奏每次“爬行”步進(jìn)之間的延遲毫秒數(shù)值越小流動(dòng)越快dash_arraydashArray[10, 20]虛線段模式第一個(gè)數(shù)字是“線段”像素長(zhǎng)度第二個(gè)是“空隙”像素長(zhǎng)度weightweight5線寬像素opacityopacity0.5線條整體透明度范圍 0~1colorcolor#0000FF線段主體顏色pulse_colorpulseColor#FFFFFF“脈沖”顏色即動(dòng)畫中高亮移動(dòng)的那一段的顏色也就是說folium 統(tǒng)一使用snake_case的 Python 風(fēng)格參數(shù)名而渲染到瀏覽器端時(shí)再轉(zhuǎn)換為 Leaflet 插件需要的camelCase鍵名dash_array→dashArray、pulse_color→pulseColor、hardware_acceleration→hardwareAcceleration。從代碼結(jié)構(gòu)看這種命名轉(zhuǎn)換同樣適用于path_options中的其他選項(xiàng)即可以推斷 folium 對(duì)傳入的**kwargs執(zhí)行了統(tǒng)一的 camelize 處理參見 vector_layers.py 中{camelize(key): value for key, value in kwargs.items()}。文檔示例只覆蓋了reverse與dash_array其余參數(shù)由 antpath.py 源碼給出默認(rèn)值你可以按需覆蓋例如folium.plugins.AntPath( locationswind_locations, color#FF0000, pulse_color#FFFF00, delay200, dash_array[30, 40], reverseTrue, hardware_accelerationTrue, weight6, opacity0.8, ).add_to(m)繼承的 Polyline / Path 公共選項(xiàng)AntPath構(gòu)造時(shí)調(diào)用了path_options(lineTrue, **kwargs)vector_layers.py因此它還支持與 folium 其他矢量圖層Polyline、Polygon、Rectangle 等一致的 Path 級(jí)選項(xiàng)參數(shù)渲染鍵默認(rèn)值作用strokestrokeTrue是否繪制描邊colorcolor#3388ff描邊顏色若未單獨(dú)設(shè)置weightweight3描邊寬度像素opacityopacity1.0描邊透明度line_caplineCapround線段端頭形狀line_joinlineJoinround線段拐角形狀dash_arraydashArrayNone虛線模式AntPath 會(huì)用自身默認(rèn)值覆蓋dash_offsetdashOffsetNone虛線起始偏移fill/fill_color/fill_opacity/fill_rule同左camelCaseFalse/ 繼承color/0.2/evenodd填充相關(guān)選項(xiàng)bubbling_mouse_eventsbubblingMouseEventsTrue鼠標(biāo)事件是否冒泡到地圖smooth_factorsmoothFactor1.0每個(gè)縮放級(jí)別上的折線簡(jiǎn)化程度值越大越平滑、性能越好越小越精確no_clipnoClipFalse是否禁用折線裁剪gradientgradientNone是否開啟描邊/填充的漸變tagstags—附加標(biāo)簽信息classNameclassName—自定義 CSS 類名注意一個(gè)細(xì)節(jié)path_options(lineTrue, ...)生成默認(rèn)dashArray: None而隨后AntPath的options.update({...})會(huì)用其專屬默認(rèn)值dashArray: [10, 20]覆蓋它因此螞蟻線的虛線段始終生效。也正因如此你通過dash_array傳入的自定義值會(huì)同時(shí)作用于“螞蟻段”的視覺分割。從 vector_layers.py 還可以看到path_options會(huì)把其余未識(shí)別的kwargs原樣透?jìng)鹘o Leaflet所以 Leaflet Path 的interactive、pane、renderer等高級(jí)選項(xiàng)也可以直接傳給AntPath。底層實(shí)現(xiàn)從 folium 對(duì)象到瀏覽器腳本渲染模板AntPath使用JSCSSMixin混入類和Template宏來生成前端代碼antpath.py{% macro script(this, kwargs) %} {{ this.get_name() }} L.polyline.antPath( {{ this.locations|tojson }}, {{ this.options|tojavascript }} ).addTo({{this._parent.get_name()}}); {% endmacro %}也就是說folium 在渲染該圖層時(shí)會(huì)把 Python 側(cè)構(gòu)造好的locations與options分別序列化為 JSON 和 JavaScript 對(duì)象調(diào)用 Leaflet 插件暴露的L.polyline.antPath(...)工廠函數(shù)創(chuàng)建螞蟻線并通過.addTo(地圖變量名)掛載到父級(jí)地圖上。this.get_name()是 folium 為每個(gè)元素生成唯一 JS 變量名的機(jī)制this._parent.get_name()指向地圖對(duì)象。CDN 依賴自動(dòng)引入AntPath 依賴第三方 JS 庫default_js聲明了其靜態(tài)資源地址antpath.pydefault_js [ ( antpath, https://cdn.jsdelivr.net/npm/leaflet-ant-path1.1.2/dist/leaflet-ant-path.min.js, ) ]借助JSCSSMixinfolium 在輸出 HTML 時(shí)會(huì)自動(dòng)把該script標(biāo)簽注入頁面無需你手動(dòng)引入。這一點(diǎn)同樣被測(cè)試用例驗(yàn)證test_antpath.py 中斷言渲染結(jié)果包含script srchttps://cdn.jsdelivr.net/npm/leaflet-ant-path1.1.2/dist/leaflet-ant-path.min.js/script。測(cè)試如何驗(yàn)證倉庫的 test_antpath.py 對(duì) AntPath 做了兩層校驗(yàn)靜態(tài)資源引入構(gòu)造地圖 → 添加 AntPath → 渲染 HTML → 斷言 CDN script 標(biāo)簽存在腳本片段一致性用與源碼相同的 Jinja 模板手動(dòng)渲染一次再與antpath._template.module.script(antpath)的輸出做歸一化比對(duì)確保L.polyline.antPath(...)的調(diào)用片段locations 序列化 options 序列化 addTo 掛載與源碼模板完全一致。這組測(cè)試是理解“folium 對(duì)象如何變成瀏覽器腳本”的最佳樣例你可以直接運(yùn)行pytest tests/plugins/test_antpath.py驗(yàn)證當(dāng)前環(huán)境行為。進(jìn)階用法示例多段路徑與 Popup/Tooltip由于繼承了BaseMultiLocation并支持popup、tooltip你可以用嵌套坐標(biāo)列表一次繪制多條軌跡并為每條軌跡或整條路徑綁定交互import folium import folium.plugins m folium.Map(location[20, 0], zoom_start2) routes [ [[59.35, -31.99], [47.75, -43.94], [27.05, -41.13]], [[16.29, -36.56], [1.05, -22.50], [-8.75, -18.28]], ] ant folium.plugins.AntPath( locationsroutes, popup風(fēng)場(chǎng)軌跡, tooltiphover me, color#00FF00, pulse_color#0000FF, dash_array[15, 25], delay300, ) ant.add_to(m) m.fit_bounds(m.get_bounds()) m此時(shí)彈出的 Popup、懸停的 Tooltip 均由BaseMultiLocation.__init__自動(dòng)包裝掛載vector_layers.py。在 Jupyter Notebook 中使用AntPath 完全兼容 Jupyter/Notebook 內(nèi)聯(lián)渲染文檔本身即采用code-cellipython3形式編寫見 docs/user_guide/plugins/antpath.md 開頭隱藏單元中import folium/import folium.plugins。在 Notebook 中只需把上述代碼按單元格執(zhí)行最后一行m即可直接顯示帶螞蟻動(dòng)畫的地圖在普通 Python 腳本中則用m.save(antpath.html)導(dǎo)出獨(dú)立 HTML 文件在瀏覽器打開。倉庫還提供了可運(yùn)行的 Jupyter Notebook 示例 examples/PolyLineTextPath_AntPath.ipynb它同時(shí)演示了 AntPath 與 PolyLineTextPath沿線文字路徑兩種動(dòng)畫軌跡效果適合作為對(duì)照實(shí)驗(yàn)。常見問題與提示reverse傳字符串True與布爾True都能工作字符串True是 truthy 值渲染結(jié)果均為reverse: true但建議統(tǒng)一使用布爾值保持代碼清晰。動(dòng)畫不動(dòng)檢查paused是否被設(shè)為True此外需要網(wǎng)絡(luò)可訪問cdn.jsdelivr.net因?yàn)槲浵伨€動(dòng)畫完全由該 CDN 上的 leaflet-ant-path 腳本驅(qū)動(dòng)無法離線運(yùn)行。想讓線更“靈動(dòng)”適當(dāng)調(diào)小delay如 100~300、拉長(zhǎng)dash_array的第一位數(shù)字、提高pulse_color與color的對(duì)比度即可獲得更明顯的流動(dòng)感。性能考量hardware_accelerationTrue可借助 GPU 渲染大量點(diǎn)位的路徑weight過大會(huì)帶來更多像素繪制開銷在路徑點(diǎn)極多時(shí)建議保持適中。坐標(biāo)順序AntPath 與 folium 其他矢量圖層一致點(diǎn)位格式為[緯度, 經(jīng)度]Northing, Easting注意不要與 GeoJSON 的[經(jīng)度, 緯度]順序混淆。參考資料用戶指南原文docs/user_guide/plugins/antpath.md插件源碼folium/plugins/antpath.py底層基類與公共選項(xiàng)folium/vector_layers.py坐標(biāo)校驗(yàn)與邊界計(jì)算folium/utilities.py測(cè)試用例tests/plugins/test_antpath.pyNotebook 示例examples/PolyLineTextPath_AntPath.ipynb地圖視野自適應(yīng)fit_boundsfolium/folium.py贊分享數(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)推薦Anime.js路徑動(dòng)畫SVG motion path運(yùn)動(dòng)軌跡控制Anime.js路徑動(dòng)畫SVG motion path運(yùn)動(dòng)軌跡控制 引言為什么需要路徑動(dòng)畫 在現(xiàn)代Web開發(fā)中創(chuàng)建流暢、自然的運(yùn)動(dòng)效果是提升用戶體驗(yàn)的關(guān)前端chhRobotics_CPP可視化使用matplotlibcpp繪制路徑與軌跡chhRobotics_CPP可視化使用matplotlibcpp繪制路徑與軌跡 chhRobotics_CPP是一個(gè)專注于自動(dòng)駕駛規(guī)劃控制常用算法的C實(shí)示例工程自動(dòng)駕駛tsParticles 路徑生成器插件Path Generator Plugins完全指南用 particles.move.path.generator 定制粒子運(yùn)動(dòng)軌跡tsParticles 路徑生成器插件Path Generator Plugins完全指南用 particles.move.path.generator前端創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考