您好,登錄后才能下訂單哦!
本文小編為大家詳細介紹“Python folium的功能怎么使用”,內(nèi)容詳細,步驟清晰,細節(jié)處理妥當(dāng),希望這篇“Python folium的功能怎么使用”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
在folium官方還提供了一些更明確的方法供我們使用。就比如圖層的控制。官方給方法名稱是FeatureGroup,導(dǎo)入方式時from folium import FeatureGroup,或者folium.FeatureGroup()。具體原理我這里就不細說了,主要還是看示例:
import folium def map2png(map_data,out_file='pdf.png'): # 1.直接構(gòu)造,默認底圖 mo = folium.Map(location=[0, 0]) # 2.圖層1-高德底圖+數(shù)據(jù) fg = folium.FeatureGroup() # 2.1 高德地圖 fg.add_child(folium.TileLayer( tiles='http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', attr="© <a href=http://ditu.amap.com/>高德地圖</a>", min_zoom=0, max_zoom=19, control=True, zoom_control=False, show=True)) # 2.2添加一個點 fg.add_child(folium.Marker( location=[45.3311, -121.7113], popup="Timberline Lodge", icon=folium.Icon(color="green"))) # 2.3添加一個線形 fg.add_child(folium.PolyLine( locations=[[38.68,115.67], [38.85,115.48], [38.65,115.37], [38.68,115.67]], color='green', weight=2, opacity=1)) # 2.4添加一個面 fg.add_child(folium.Polygon( locations=[[38.68,115.67], [38.85,115.48], [38.65,115.37], [38.68,115.67]], color='green', weight=2, fill=True,fill_color = 'red')) # 2.5將我們的圖層加入map mo.add_child(fg) # 3.圖層2-重點數(shù)據(jù)+最上層 fg2 = folium.FeatureGroup() fg2.add_child(folium.Polygon( locations=[[38.68,115.67], [38.85,115.48], [38.65,115.37], [38.68,115.67]], color='green', weight=2, fill=True,fill_color = 'red')) mo.add_child(fg2) # 4.將圖層fg2顯示在最上層,keep_in_front的參數(shù)必須是FeatureGroup或TileLayer對象 mo.keep_in_front(fg2) # 5.根據(jù)范圍縮放地圖 mo.fit_bounds([[38.68,115.67], [38.85,115.48], [38.65,115.37], [38.68,115.67]]) root = mo.get_root() html = root.render() # 這個拿到的就是一個html的內(nèi)容 # mo.save('text.html')
指北針這個功能對于地圖來說不一定是必須的,但是加上總是好的。從官方和源碼分析來看沒有相關(guān)介紹,但是FloatImage放法可以完成這個功能。這個方法是官方文檔中的插件,其實官方給了很多插件,網(wǎng)上使用最多的是熱力圖也就是HeatMap方法。
FloatImage方法實現(xiàn)的是將一張圖片放到屏幕上,并指定圖片的大小,和屏幕上的位置,參數(shù)為為整數(shù)(FloatImage方法實現(xiàn)了百分比轉(zhuǎn)化)。我們在二代碼的基礎(chǔ)上,將圖片加在了左下角。
fg.add_child(FloatImage(os.path.join(base, 'map_png', 'image', 'compass.png'), left=5, bottom=10, width=5))
folium官方未提供添加js和css的相關(guān)方法,網(wǎng)上很多方法應(yīng)該都是在解讀源碼的基礎(chǔ)上進行的抽取,相對來說比較的單一,沒有針對如何添加js和css進行相關(guān)說明。
從源代碼中可以知道,folium中實現(xiàn)地圖功能是通過jinjia2實現(xiàn)數(shù)據(jù)和地圖加載html的。
源碼中主要使用了三種添加數(shù)據(jù)和地圖的方法。這些方法存在缺陷(只能加在最前面),這些方法可以使用大多數(shù)場景,如果不涉及對map對象的操作,此三種方法可以滿足要求。
1.header添加js和css
init_script = """ var mapsPlaceholder = []; L.Map.addInitHook(function () {mapsPlaceholder.push(this);}); """ # 加在header最上邊 mo.get_root().header.add_child(folium.Element(init_script))
2.body添加js和css
init_script = """ var mapsPlaceholder = []; L.Map.addInitHook(function () {mapsPlaceholder.push(this);}); """ # 加在body中 mo.get_root().html.add_child(folium.Element(init_script))
3.script添加js和css
init_script = """ var mapsPlaceholder = []; L.Map.addInitHook(function () {mapsPlaceholder.push(this);}); """ # 加在script中 mo.get_root().script.add_child(folium.Element(init_script))
上一步實現(xiàn)了在html文件不同位置添加js和css的方法,如果涉及到對map對象的操作,可能存在不滿足的情況,比如添加經(jīng)緯網(wǎng)格線。實現(xiàn)經(jīng)緯網(wǎng)格線這個功能比較麻煩,主要存在以下困難:
1.官方?jīng)]有相關(guān)的方法和插件(目前沒有);
2.folium是依賴leadlet.js實現(xiàn)的第三方庫,想實現(xiàn)經(jīng)緯線需要熟悉leaflet(在網(wǎng)上只找到一篇相關(guān)文章);
3.上邊的文章是前端完成,沒有直接后端實現(xiàn)的方法。
4.前端實現(xiàn)的方法是直接構(gòu)建的地圖,我們這里是地圖創(chuàng)建對象不可獲?。ǖ貓D對象隨機生成)。
如何才能事項經(jīng)緯網(wǎng)格線呢?
這里我們需要在map對象創(chuàng)建時將對象存儲,在map對象創(chuàng)建后獲取map對象并依據(jù)縮放實現(xiàn)網(wǎng)格線。這里有一個重點工作就是如何將js代碼在map對象創(chuàng)建前后加入到html中。
其中map對象創(chuàng)建時將對象存儲在四中已經(jīng)實現(xiàn),通過學(xué)習(xí)folium源碼,重寫了添加js的方法實現(xiàn)map對象創(chuàng)建后添加js。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="external nofollow" /> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <title>leaflet-經(jīng)緯網(wǎng)格</title> <style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; } .leaflet-div-icon { background: none; border: none; } </style> </head> <body> <div id="map" ></div> <script> let map = L.map("map", { renderer: L.canvas({ padding: 0.5 }) }).setView( [25.127879288597576, 118.37905883789064], 4 ); // 添加背景圖層 L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: '© <a href="https://www.openstreetmap.org/copyright" rel="external nofollow" >OpenStreetMap</a> contributors', }).addTo(map); // 創(chuàng)建圖層 let lonLatGridLineLayer = L.featureGroup().addTo(map); // 經(jīng)緯網(wǎng)格生成方法 let addLonLatLine = () => { let zoom = map.getZoom(); let bounds = map.getBounds(); let north = bounds.getNorth(); let east = bounds.getEast(); // 經(jīng)緯度間隔 let d = 90 / Math.pow(2, zoom - 1); // 經(jīng)線網(wǎng)格 for (let index = -180; index <= 360; index += d) { // 判斷當(dāng)前視野內(nèi) if (bounds.contains([north, index])) { // 繪制經(jīng)線 let lonLine = L.polyline( [ [-90, index], [90, index], ], { weight: 1, color: "blue" } ); lonLatGridLineLayer.addLayer(lonLine); // 標注 let text = index.toFixed(1) + "°"; // 動態(tài)計算小數(shù)位數(shù) if (zoom > 10) { text = index.toFixed((zoom - 8) / 2) + "°"; } let divIcon = L.divIcon({ html: `<div >${text}</div>`, iconAnchor: [0, -5], }); let textMarker = L.marker([north, index], { icon: divIcon }); lonLatGridLineLayer.addLayer(textMarker); } } if(d>90)d=90; // 緯線網(wǎng)格 for (let index = -90; index <= 90; index += d) { if (bounds.contains([index, east])) { let lonLine = L.polyline( [ [index, -180], [index, 360], ], { weight: 1, color: "blue" } ); lonLatGridLineLayer.addLayer(lonLine); // 標注 let text = index.toFixed(1) + "°"; if (zoom > 10) { text = index.toFixed((zoom - 8) / 2) + "°"; } let divIcon = L.divIcon({ html: `<div >${text}</div>`, iconAnchor: [(text.length + 1) * 6, 0], }); let textMarker = L.marker([index, east], { icon: divIcon }); lonLatGridLineLayer.addLayer(textMarker); } } }; addLonLatLine(); map.on("zoomend move", () => { lonLatGridLineLayer.clearLayers(); addLonLatLine(); }); </script> </body> </html>
通過源碼的類繼承關(guān)系,我采取繼承MacroElement類。
from branca.element import MacroElement, from jinja2 import Template from folium.vector_layers import path_options class Jwwg(MacroElement): """自定義經(jīng)緯線網(wǎng)格""" _template = Template(""" {% macro script(this, kwargs) %} var map = mapsPlaceholder.pop(); // 創(chuàng)建圖層 let lonLatGridLineLayer = L.featureGroup().addTo(map); // 經(jīng)緯網(wǎng)格生成方法 let addLonLatLine = () => { let zoom = map.getZoom(); let bounds = map.getBounds(); let north = bounds.getNorth(); let east = bounds.getEast(); // 經(jīng)緯度間隔 let d = 90 / Math.pow(2, zoom - 1); // 經(jīng)線網(wǎng)格 for (let index = -180; index <= 360; index += d) { // 判斷當(dāng)前視野內(nèi) if (bounds.contains([north, index])) { // 繪制經(jīng)線 let lonLine = L.polyline( [ [-90, index], [90, index], ], {weight: 1, color: "blue"} ); lonLatGridLineLayer.addLayer(lonLine); // 標注 let text = index.toFixed(1) + "°"; // 動態(tài)計算小數(shù)位數(shù) if (zoom > 10) { text = index.toFixed((zoom - 8) / 2) + "°"; } let divIcon = L.divIcon({ html: `<div >${text}</div>`, iconAnchor: [0, -5], }); let textMarker = L.marker([north, index], {icon: divIcon}); lonLatGridLineLayer.addLayer(textMarker); } } if (d > 90) d = 90; // 緯線網(wǎng)格 for (let index = -90; index <= 90; index += d) { if (bounds.contains([index, east])) { let lonLine = L.polyline( [ [index, -180], [index, 360], ], {weight: 1, color: "blue"} ); lonLatGridLineLayer.addLayer(lonLine); // 標注 let text = index.toFixed(1) + "°"; if (zoom > 10) { text = index.toFixed((zoom - 8) / 2) + "°"; } let divIcon = L.divIcon({ html: `<div >${text}</div>`, iconAnchor: [(text.length + 1) * 6, 0], }); let textMarker = L.marker([index, east], {icon: divIcon}); lonLatGridLineLayer.addLayer(textMarker); } } }; addLonLatLine(); map.on("zoomend move", () => { lonLatGridLineLayer.clearLayers(); addLonLatLine(); }); {% endmacro %} """) def __init__(self, **kwargs): super(Jwwg, self).__init__() self._name = 'Jwwg' self.options = path_options(line=True, **kwargs)
import folium def map2png(map_data,out_file='pdf.png'): # 1.直接構(gòu)造,默認底圖 mo = folium.Map(location=[0, 0]) # 2.圖層1-高德底圖+數(shù)據(jù) fg = folium.FeatureGroup() # 2.1 高德地圖 fg.add_child(folium.TileLayer( tiles='http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', attr="© <a href=http://ditu.amap.com/>高德地圖</a>", min_zoom=0, max_zoom=19, control=True, zoom_control=False, show=True)) # 2.2添加一個點 fg.add_child(folium.Marker( location=[45.3311, -121.7113], popup="Timberline Lodge", icon=folium.Icon(color="green"))) # 2.3添加一個線形 fg.add_child(folium.PolyLine( locations=[[38.68,115.67], [38.85,115.48], [38.65,115.37], [38.68,115.67]], color='green', weight=2, opacity=1)) # 2.4添加一個面 fg.add_child(folium.Polygon( locations=[[38.68,115.67], [38.85,115.48], [38.65,115.37], [38.68,115.67]], color='green', weight=2, fill=True,fill_color = 'red')) # 2.5將我們的圖層加入map mo.add_child(fg) # 5.根據(jù)范圍縮放地圖 mo.fit_bounds([[38.68,115.67], [38.85,115.48], [38.65,115.37], [38.68,115.67]]) # 網(wǎng)格線 init_script = """ var mapsPlaceholder = []; L.Map.addInitHook(function () {mapsPlaceholder.push(this);}); """ mo.get_root().script.add_child(folium.Element(init_script)) Jwwg().add_to(mo) root = mo.get_root() html = root.render() # 這個拿到的就是一個html的內(nèi)容 # mo.save('text.html')
讀到這里,這篇“Python folium的功能怎么使用”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。