溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“Python folium的功能怎么使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Python folium的功能怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
在folium官方還提供了一些更明確的方法供我們使用。就比如圖層的控制。官方給方法名稱是FeatureGroup，導入方式時from folium import FeatureGroup，或者folium.FeatureGroup()。具體原理我這里就不細說了，主要還是看示例：
import folium
def map2png(map_data,out_file='pdf.png'):
# 1.直接構造，默認底圖
mo = folium.Map(location=[0, 0])
# 2.圖層1-高德底圖+數據
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-重點數據+最上層
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的參數必須是FeatureGroup或TileLayer對象
mo.keep_in_front(fg2)
# 5.根據范圍縮放地圖
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的內容
# mo.save('text.html')指北針這個功能對于地圖來說不一定是必須的，但是加上總是好的。從官方和源碼分析來看沒有相關介紹，但是FloatImage放法可以完成這個功能。這個方法是官方文檔中的插件，其實官方給了很多插件，網上使用最多的是熱力圖也就是HeatMap方法。
FloatImage方法實現的是將一張圖片放到屏幕上，并指定圖片的大小，和屏幕上的位置，參數為為整數（FloatImage方法實現了百分比轉化）。我們在二代碼的基礎上，將圖片加在了左下角。
fg.add_child(FloatImage(os.path.join(base, 'map_png', 'image', 'compass.png'), left=5, bottom=10, width=5))
folium官方未提供添加js和css的相關方法，網上很多方法應該都是在解讀源碼的基礎上進行的抽取，相對來說比較的單一，沒有針對如何添加js和css進行相關說明。
從源代碼中可以知道，folium中實現地圖功能是通過jinjia2實現數據和地圖加載html的。
源碼中主要使用了三種添加數據和地圖的方法。這些方法存在缺陷（只能加在最前面），這些方法可以使用大多數場景，如果不涉及對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))
上一步實現了在html文件不同位置添加js和css的方法，如果涉及到對map對象的操作，可能存在不滿足的情況，比如添加經緯網格線。實現經緯網格線這個功能比較麻煩，主要存在以下困難：
1.官方沒有相關的方法和插件(目前沒有)；
2.folium是依賴leadlet.js實現的第三方庫，想實現經緯線需要熟悉leaflet(在網上只找到一篇相關文章)；
3.上邊的文章是前端完成，沒有直接后端實現的方法。
4.前端實現的方法是直接構建的地圖，我們這里是地圖創建對象不可獲取（地圖對象隨機生成）。
如何才能事項經緯網格線呢？
這里我們需要在map對象創建時將對象存儲，在map對象創建后獲取map對象并依據縮放實現網格線。這里有一個重點工作就是如何將js代碼在map對象創建前后加入到html中。
其中map對象創建時將對象存儲在四中已經實現，通過學習folium源碼，重寫了添加js的方法實現map對象創建后添加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-經緯網格</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);
// 創建圖層
let lonLatGridLineLayer = L.featureGroup().addTo(map);
// 經緯網格生成方法
let addLonLatLine = () => {
let zoom = map.getZoom();
let bounds = map.getBounds();
let north = bounds.getNorth();
let east = bounds.getEast();
// 經緯度間隔
let d = 90 / Math.pow(2, zoom - 1);
// 經線網格
for (let index = -180; index <= 360; index += d) {
// 判斷當前視野內
if (bounds.contains([north, index])) {
// 繪制經線
let lonLine = L.polyline(
[
[-90, index],
[90, index],
],
{ 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: [0, -5],
});
let textMarker = L.marker([north, index], { icon: divIcon });
lonLatGridLineLayer.addLayer(textMarker);
}
}
if(d>90)d=90;
// 緯線網格
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>通過源碼的類繼承關系，我采取繼承MacroElement類。
from branca.element import MacroElement,
from jinja2 import Template
from folium.vector_layers import path_options
class Jwwg(MacroElement):
"""自定義經緯線網格"""
_template = Template("""
{% macro script(this, kwargs) %}
var map = mapsPlaceholder.pop();
// 創建圖層
let lonLatGridLineLayer = L.featureGroup().addTo(map);
// 經緯網格生成方法
let addLonLatLine = () => {
let zoom = map.getZoom();
let bounds = map.getBounds();
let north = bounds.getNorth();
let east = bounds.getEast();
// 經緯度間隔
let d = 90 / Math.pow(2, zoom - 1);
// 經線網格
for (let index = -180; index <= 360; index += d) {
// 判斷當前視野內
if (bounds.contains([north, index])) {
// 繪制經線
let lonLine = L.polyline(
[
[-90, index],
[90, index],
],
{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: [0, -5],
});
let textMarker = L.marker([north, index], {icon: divIcon});
lonLatGridLineLayer.addLayer(textMarker);
}
}
if (d > 90) d = 90;
// 緯線網格
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.直接構造，默認底圖
mo = folium.Map(location=[0, 0])
# 2.圖層1-高德底圖+數據
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.根據范圍縮放地圖
mo.fit_bounds([[38.68,115.67],
[38.85,115.48],
[38.65,115.37],
[38.68,115.67]])
# 網格線
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的內容
# mo.save('text.html')讀到這里，這篇“Python folium的功能怎么使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
