0

0

将交互式图表集成到Folium地图中

聖光之護

聖光之護

发布时间:2025-12-08 19:17:35

|

278人浏览过

|

来源于php中文网

原创

将交互式图表集成到folium地图中

本教程详细介绍了如何在Folium地图中嵌入Matplotlib生成的图表。通过结合Folium、Matplotlib和mpld3库,您可以创建地理可视化,并在地图标记的弹出窗口中展示数据图表。文章将指导您完成环境搭建、图表生成、HTML转换以及最终集成到Folium地图的每个步骤,旨在提供一个清晰、专业的实践指南。

引言

Folium是一个强大的Python库,它能够将Python数据操作能力与Leaflet.js的交互式地图可视化功能结合起来。在地理空间数据分析中,我们经常需要在地图上不仅展示点、线、面等地理要素,还需要在特定位置附加更详细的数据可视化,例如统计图表。本教程将指导您如何利用Folium,结合Matplotlib和mpld3库,在地图标记的弹出窗口中嵌入动态生成的图表。

环境准备

在开始之前,请确保您的Python环境中已安装以下必要的库:

  • folium: 用于创建交互式地图。
  • matplotlib: 用于生成数据图表。
  • mpld3: 用于将Matplotlib图表转换为可在网页中嵌入的HTML/JavaScript格式,以保留一定的交互性。

您可以通过以下命令安装它们:

pip install folium matplotlib mpld3

核心步骤

1. 初始化Folium地图

首先,我们需要创建一个Folium地图对象。您需要指定地图的初始中心坐标和缩放级别。

import folium

# 定义地图中心坐标(例如,北京的某个位置)
latitude = 39.9042
longitude = 116.4074
zoom_start = 12

# 创建地图对象
m = folium.Map(location=[latitude, longitude], zoom_start=zoom_start)

2. 创建数据图表

接下来,使用Matplotlib创建一个您想要嵌入地图的图表。这里以一个简单的柱状图为例。您可以根据实际需求创建任何类型的Matplotlib图表,如折线图、散点图、饼图等。

PHP经典实例(第二版)
PHP经典实例(第二版)

PHP经典实例(第2版)能够为您节省宝贵的Web开发时间。有了这些针对真实问题的解决方案放在手边,大多数编程难题都会迎刃而解。《PHP经典实例(第2版)》将PHP的特性与经典实例丛书的独特形式组合到一起,足以帮您成功地构建跨浏览器的Web应用程序。在这个修订版中,您可以更加方便地找到各种编程问题的解决方案,《PHP经典实例(第2版)》中内容涵盖了:表单处理;Session管理;数据库交互;使用We

下载
import matplotlib.pyplot as plt

# 准备图表数据
data = [10, 20, 30, 40, 50]
labels = ['A', 'B', 'C', 'D', 'E']

# 创建图表
fig, ax = plt.subplots(figsize=(6, 4)) # 创建一个图表和子图对象
ax.bar(labels, data, color='skyblue')
ax.set_xlabel('类别')
ax.set_ylabel('数值')
ax.set_title('示例柱状图')

# 注意:不要在此处调用 plt.show(),因为我们不需要在单独窗口显示图表
# plt.show()

3. 将图表转换为HTML

为了将Matplotlib图表嵌入到Folium地图的弹出窗口中,我们需要将其转换为HTML格式。mpld3库能够很好地完成这项工作,它会将Matplotlib图表渲染为SVG,并添加必要的JavaScript以提供基本的交互功能(如缩放、平移等)。

import mpld3

# 将当前的Matplotlib图表(plt.gcf() 获取当前图表)转换为HTML
chart_html = mpld3.fig_to_html(fig) # 使用之前创建的 'fig' 对象

4. 将图表添加到地图标记的弹出窗口

现在,我们可以创建一个地图标记,并将生成的图表HTML作为其弹出窗口的内容。当用户点击地图上的标记时,图表就会显示出来。

# 定义标记的坐标
marker_latitude = 39.9100
marker_longitude = 116.4100

# 创建一个弹出窗口对象,内容为图表的HTML
popup = folium.Popup(chart_html, max_width=600) # max_width 可以调整弹出窗口的最大宽度

# 创建一个标记,并附加弹出窗口
marker = folium.Marker(location=[marker_latitude, marker_longitude])
marker.add_child(popup)
marker.add_to(m)

如果您需要在一个位置显示多个图表,或者图表内容非常复杂,可以考虑使用folium.IFrame来承载更复杂的HTML内容。

5. 保存并查看地图

最后一步是将创建的Folium地图保存为HTML文件。您可以在任何现代网络浏览器中打开此文件来查看结果。

# 保存地图为HTML文件
map_filename = 'map_with_chart.html'
m.save(map_filename)

print(f"地图已保存到 {map_filename}。请在浏览器中打开查看。")

注意事项与进阶

  • 图表交互性:mpld3转换的图表在HTML中会保留基本的交互功能,如缩放、平移。但其交互性不如专门为Web设计的图表库(如Plotly、Bokeh或ECharts)那么丰富。如果需要更高级的交互性,您可能需要考虑将这些库生成的独立HTML/JavaScript图表嵌入到Folium的IFrame中。
  • 性能考量:如果地图上有大量的标记都带有复杂的图表弹出窗口,可能会影响地图的加载和渲染性能。在这种情况下,可以考虑使用folium.plugins.MarkerCluster来聚合标记,或者只在用户请求时动态加载图表数据。
  • 样式定制:Matplotlib图表的样式可以通过其API进行全面定制。而弹出窗口的样式则可以通过max_width等参数进行调整,或者在chart_html中嵌入自定义CSS。
  • 数据源:本教程使用硬编码数据创建图表。在实际应用中,图表数据通常来自数据库、CSV文件、API或其他数据源。

总结

本教程演示了如何利用Folium、Matplotlib和mpld3库,在交互式地图上嵌入数据图表。通过将Matplotlib图表转换为HTML并在Folium标记的弹出窗口中显示,您可以为地理空间数据分析提供更丰富、更直观的可视化体验。这种方法使得将复杂的统计信息与地理位置关联起来变得简单而高效。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
ECharts是什么
ECharts是什么

ECharts是基于JavaScript的开源可视化库,能够帮助开发者轻松地实现各种复杂的数据可视化效果,提供了丰富的图表类型和交互功能。本专题为大家提供ECharts是什么的相关的文章、下载、课程内容,供大家免费下载体验。

272

2023.08.04

echarts自适应大小设置
echarts自适应大小设置

使用ECharts的自适应大小设置可以使图表能够根据不同屏幕尺寸和设备进行自适应。一种是使用resize事件,在图表容器大小改变时重新渲染图表;另一种是使用CSS样式,通过设置图表容器的宽度和高度为百分比值,使图表容器根据父元素的大小进行自适应。根据实际需求选择合适的方法,可以使图表在不同设备上都能够良好地显示和交互 。

466

2023.09.13

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

515

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

244

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

320

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

5330

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

481

2023.09.01

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

212

2023.09.04

C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

CSS教程
CSS教程

共754课时 | 25.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号