Python folium的實(shí)用功能詳解
前言
本博客重點(diǎn)：folium的使用功能，圖層控制、指北針、folium添加js和css、經(jīng)緯網(wǎng)格線(xiàn)（柵格線(xiàn)）
在上一篇使用folium制作地圖的博客中，我們介紹了folium制作一張地圖和基本使用，然而在使用中我們還需要一些額外的標(biāo)識(shí)提升我們圖片的質(zhì)量，folium提供了更清晰的方法和插件，雖然官方插件很全，但是有時(shí)我們也需要自定義我們自己的插件。
我講一下我這個(gè)需求的來(lái)源，做的項(xiàng)目是一個(gè)地理空間查詢(xún)和使用的系統(tǒng)，通過(guò)在前端調(diào)用高德地圖api創(chuàng)建了一個(gè)查詢(xún)區(qū)域，獲取區(qū)域內(nèi)的地理數(shù)據(jù)(數(shù)據(jù)庫(kù))。具體的需求就是，將查詢(xún)區(qū)域和地理數(shù)據(jù)制作成一個(gè)覆蓋率分析報(bào)告，報(bào)告中的其他內(nèi)容都已完成，但報(bào)告中需要展示高德地圖、查詢(xún)區(qū)域、地理數(shù)據(jù)的完整圖片這個(gè)功能卡了2個(gè)星期，主要原因是我對(duì)地理空間數(shù)據(jù)不熟悉，很多python相關(guān)庫(kù)也不清楚，在構(gòu)建圖形的過(guò)程中走了很多彎路。
現(xiàn)在將整個(gè)實(shí)現(xiàn)過(guò)程梳理完成，希望對(duì)各位同道有幫助，跟其他文章和官網(wǎng)不同，本博客是以使用的優(yōu)先級(jí)來(lái)講解這個(gè)庫(kù)。
一、?效果圖
二、圖層控制
上一篇博客講的很基礎(chǔ)，其實(shí)在folium官方還提供了一些更明確的方法供我們使用。就比如圖層的控制。官方給方法名稱(chēng)是FeatureGroup，導(dǎo)入方式時(shí)from folium import FeatureGroup，或者folium.FeatureGroup()。具體原理我這里就不細(xì)說(shuō)了，主要還是看示例：
import folium
def map2png(map_data,out_file='pdf.png'):
# 1.直接構(gòu)造，默認(rèn)底圖
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添加一個(gè)點(diǎn)
fg.add_child(folium.Marker(
location=[45.3311, -121.7113],
popup="Timberline Lodge",
icon=folium.Icon(color="green")))
# 2.3添加一個(gè)線(xiàn)形
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添加一個(gè)面
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-重點(diǎn)數(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對(duì)象
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() # 這個(gè)拿到的就是一個(gè)html的內(nèi)容
# mo.save('text.html')
三、指北針
指北針這個(gè)功能對(duì)于地圖來(lái)說(shuō)不一定是必須的，但是加上總是好的。從官方和源碼分析來(lái)看沒(méi)有相關(guān)介紹，但是FloatImage放法可以完成這個(gè)功能。這個(gè)方法是官方文檔中的插件，其實(shí)官方給了很多插件，網(wǎng)上使用最多的是熱力圖也就是HeatMap方法。
FloatImage方法實(shí)現(xiàn)的是將一張圖片放到屏幕上，并指定圖片的大小，和屏幕上的位置，參數(shù)為為整數(shù)（FloatImage方法實(shí)現(xiàn)了百分比轉(zhuǎn)化）。我們?cè)诙a的基礎(chǔ)上，將圖片加在了左下角。
fg.add_child(FloatImage(os.path.join(base, 'map_png', 'image', 'compass.png'), left=5, bottom=10, width=5))
四、folium添加js和css
folium官方未提供添加js和css的相關(guān)方法，網(wǎng)上很多方法應(yīng)該都是在解讀源碼的基礎(chǔ)上進(jìn)行的抽取，相對(duì)來(lái)說(shuō)比較的單一，沒(méi)有針對(duì)如何添加js和css進(jìn)行相關(guān)說(shuō)明。這里可以畫(huà)一個(gè)folium里各種類(lèi)的繼承關(guān)系，方便我們更清晰的明白整個(gè)過(guò)程。
官方鏈接：https://www.osgeo.cn/folium/plugins.html
從源代碼中可以知道，folium中實(shí)現(xiàn)地圖功能是通過(guò)jinjia2實(shí)現(xiàn)數(shù)據(jù)和地圖加載html的。
源碼中主要使用了三種添加數(shù)據(jù)和地圖的方法。這些方法存在缺陷（只能加在最前面），這些方法可以使用大多數(shù)場(chǎng)景，如果不涉及對(duì)map對(duì)象的操作，此三種方法可以滿(mǎn)足要求。
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))
五、經(jīng)緯網(wǎng)格線(xiàn)
上一步實(shí)現(xiàn)了在html文件不同位置添加js和css的方法，如果涉及到對(duì)map對(duì)象的操作，可能存在不滿(mǎn)足的情況，比如添加經(jīng)緯網(wǎng)格線(xiàn)。實(shí)現(xiàn)經(jīng)緯網(wǎng)格線(xiàn)這個(gè)功能比較麻煩，主要存在以下困難：
1.官方?jīng)]有相關(guān)的方法和插件(目前沒(méi)有)；
2.folium是依賴(lài)leadlet.js實(shí)現(xiàn)的第三方庫(kù)，想實(shí)現(xiàn)經(jīng)緯線(xiàn)需要熟悉leaflet(在網(wǎng)上只找到一篇相關(guān)文章)；
3.上邊的文章是前端完成，沒(méi)有直接后端實(shí)現(xiàn)的方法。
4.前端實(shí)現(xiàn)的方法是直接構(gòu)建的地圖，我們這里是地圖創(chuàng)建對(duì)象不可獲?。ǖ貓D對(duì)象隨機(jī)生成）。
如何才能事項(xiàng)經(jīng)緯網(wǎng)格線(xiàn)呢？
這里我們需要在map對(duì)象創(chuàng)建時(shí)將對(duì)象存儲(chǔ)，在map對(duì)象創(chuàng)建后獲取map對(duì)象并依據(jù)縮放實(shí)現(xiàn)網(wǎng)格線(xiàn)。這里有一個(gè)重點(diǎn)工作就是如何將js代碼在map對(duì)象創(chuàng)建前后加入到html中。
其中map對(duì)象創(chuàng)建時(shí)將對(duì)象存儲(chǔ)在四中已經(jīng)實(shí)現(xiàn)，通過(guò)學(xué)習(xí)folium源碼，重寫(xiě)了添加js的方法實(shí)現(xiàn)map對(duì)象創(chuàng)建后添加js。
1.html頁(yè)面實(shí)現(xiàn)經(jīng)緯度網(wǎng)格
<!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"
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" style="height: 100%; width: 100%"></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 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)線(xiàn)網(wǎng)格
for (let index = -180; index <= 360; index += d) {
// 判斷當(dāng)前視野內(nèi)
if (bounds.contains([north, index])) {
// 繪制經(jīng)線(xiàn)
let lonLine = L.polyline(
[
[-90, index],
[90, index],
],
{ weight: 1, color: "blue" }
);
lonLatGridLineLayer.addLayer(lonLine);
// 標(biāo)注
let text = index.toFixed(1) + "°";
// 動(dòng)態(tài)計(jì)算小數(shù)位數(shù)
if (zoom > 10) {
text = index.toFixed((zoom - 8) / 2) + "°";
}
let divIcon = L.divIcon({
html: `<div style="white-space: nowrap;color:red;">${text}</div>`,
iconAnchor: [0, -5],
});
let textMarker = L.marker([north, index], { icon: divIcon });
lonLatGridLineLayer.addLayer(textMarker);
}
}
if(d>90)d=90;
// 緯線(xiàn)網(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);
// 標(biāo)注
let text = index.toFixed(1) + "°";
if (zoom > 10) {
text = index.toFixed((zoom - 8) / 2) + "°";
}
let divIcon = L.divIcon({
html: `<div style="white-space: nowrap;color:red;">${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>
2.自定義網(wǎng)格線(xiàn)的類(lèi)
通過(guò)源碼的類(lèi)繼承關(guān)系，我采取繼承MacroElement類(lèi)。
from branca.element import MacroElement,
from jinja2 import Template
from folium.vector_layers import path_options
class Jwwg(MacroElement):
"""自定義經(jīng)緯線(xiàn)網(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)線(xiàn)網(wǎng)格
for (let index = -180; index <= 360; index += d) {
// 判斷當(dāng)前視野內(nèi)
if (bounds.contains([north, index])) {
// 繪制經(jīng)線(xiàn)
let lonLine = L.polyline(
[
[-90, index],
[90, index],
],
{weight: 1, color: "blue"}
);
lonLatGridLineLayer.addLayer(lonLine);
// 標(biāo)注
let text = index.toFixed(1) + "°";
// 動(dòng)態(tài)計(jì)算小數(shù)位數(shù)
if (zoom > 10) {
text = index.toFixed((zoom - 8) / 2) + "°";
}
let divIcon = L.divIcon({
html: `<div style="white-space: nowrap;color:red;">${text}</div>`,
iconAnchor: [0, -5],
});
let textMarker = L.marker([north, index], {icon: divIcon});
lonLatGridLineLayer.addLayer(textMarker);
}
}
if (d > 90) d = 90;
// 緯線(xiàn)網(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);
// 標(biāo)注
let text = index.toFixed(1) + "°";
if (zoom > 10) {
text = index.toFixed((zoom - 8) / 2) + "°";
}
let divIcon = L.divIcon({
html: `<div style="white-space: nowrap;color:red;">${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)
3.實(shí)現(xiàn)網(wǎng)格線(xiàn)
import folium
def map2png(map_data,out_file='pdf.png'):
# 1.直接構(gòu)造，默認(rèn)底圖
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添加一個(gè)點(diǎn)
fg.add_child(folium.Marker(
location=[45.3311, -121.7113],
popup="Timberline Lodge",
icon=folium.Icon(color="green")))
# 2.3添加一個(gè)線(xiàn)形
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添加一個(gè)面
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)格線(xiàn)
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() # 這個(gè)拿到的就是一個(gè)html的內(nèi)容
# mo.save('text.html')
到此這篇關(guān)于Python folium的實(shí)用功能詳解的文章就介紹到這了,更多相關(guān)Python folium內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Python實(shí)現(xiàn)的遠(yuǎn)程登錄windows系統(tǒng)功能示例
這篇文章主要介紹了Python實(shí)現(xiàn)的遠(yuǎn)程登錄windows系統(tǒng)功能,結(jié)合實(shí)例形式分析了Python基于wmi模塊的遠(yuǎn)程連接與進(jìn)程操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-06-06
Python創(chuàng)建一個(gè)自定義視頻播放器的實(shí)現(xiàn)
本文主要介紹了Python創(chuàng)建一個(gè)自定義視頻播放器的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
python 基于selenium實(shí)現(xiàn)鼠標(biāo)拖拽功能
這篇文章主要介紹了python 基于selenium實(shí)現(xiàn)鼠標(biāo)拖拽功能的方法，幫助大家更好的理解和使用python，感興趣的朋友可以了解下2020-12-12
python基于Selenium的web自動(dòng)化框架
這篇文章主要介紹了python基于Selenium的web自動(dòng)化框架，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Python中使用Opencv開(kāi)發(fā)停車(chē)位計(jì)數(shù)器功能
這篇文章主要介紹了Python中使用Opencv開(kāi)發(fā)停車(chē)位計(jì)數(shù)器,本教程最好的一點(diǎn)就是我們將使用基本的圖像處理技術(shù)來(lái)解決這個(gè)問(wèn)題,沒(méi)有使用機(jī)器學(xué)習(xí)、深度學(xué)習(xí)進(jìn)行訓(xùn)練來(lái)識(shí)別，感興趣的朋友跟隨小編一起看看吧2022-04-04
這篇文章主要為大家詳細(xì)介紹了Python的列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
python爬取網(wǎng)頁(yè)轉(zhuǎn)換為PDF文件
這篇文章主要為大家詳細(xì)介紹了python爬取網(wǎng)頁(yè)轉(zhuǎn)換為PDF文件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
Python中ArcPy柵格裁剪柵格(批量對(duì)齊柵格圖像范圍并統(tǒng)一行數(shù)與列數(shù))
本文介紹基于Python中ArcPy模塊，實(shí)現(xiàn)基于柵格圖像批量裁剪柵格圖像，同時(shí)對(duì)齊各個(gè)柵格圖像的空間范圍，統(tǒng)一其各自行數(shù)與列數(shù)的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-02-02
Python數(shù)據(jù)類(lèi)型中的元組Tuple
這篇文章主要介紹了Python數(shù)據(jù)類(lèi)型中的元組Tuple，元組可以理解為一個(gè)只讀列表，用（）來(lái)標(biāo)識(shí)，下文圍繞元組展開(kāi)詳細(xì)資料，需要的小伙伴可以參考一下2022-02-02
Python編程快速上手——強(qiáng)口令檢測(cè)算法案例分析
這篇文章主要介紹了Python強(qiáng)口令檢測(cè)算法,結(jié)合實(shí)例形式分析了Python針對(duì)密碼口令強(qiáng)度檢測(cè)的相關(guān)算法實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-02-02