Leafmap项目中使用Folium后端解决Streamlit地图标记问题

问题背景

在使用Leafmap进行地理数据可视化时，开发者可能会遇到在Jupyter Notebook中运行正常的地图标记功能，在Streamlit环境中却无法正常显示的问题。这种情况通常是由于后端渲染引擎的兼容性问题导致的。

技术分析

Leafmap支持多种地图渲染引擎，其中ipyleaflet和folium是两种常用的后端。Streamlit作为一个Web应用框架，对这两种后端的支持程度不同：

1. ipyleaflet后端：基于Jupyter Widgets，主要在Jupyter环境中工作良好，但在Streamlit中支持有限
2. folium后端：基于纯JavaScript实现，与Streamlit兼容性更好

解决方案

要解决Streamlit中地图标记显示异常的问题，需要显式指定使用folium后端：

import leafmap.foliumap as leafmap

这一行代码替换了常规的import leafmap导入语句，确保Leafmap使用与Streamlit兼容的folium后端进行地图渲染。

完整示例代码

以下是修正后的完整代码示例，展示了如何在Streamlit中正确使用Leafmap进行地理数据可视化：

import streamlit as st
import leafmap.foliumap as leafmap
import geopandas as gpd
import pandas as pd
from shapely import Point

# 加载城市数据
cities = pd.read_csv("城市数据CSV地址")

# 创建几何对象
geometry = [Point(xy) for xy in zip(cities['longitude'], cities['latitude'])]

# 转换为GeoDataFrame
cities = gpd.GeoDataFrame(cities, geometry=geometry, crs='epsg:4326')

# 创建地图实例
m = leafmap.Map(center=[40, -100], zoom=4)

# 添加数据图层
m.add_data(cities,
    layer_name="Regions",
    column="region",
    categories=['West', 'South', 'Midwest', 'Northeast'],
    colors=['#a6611a','#dfc27d','#80cdc1','#018571'],
    categorical=True, 
    legend_position='bottomright',
    style={
        "stroke": True,
        "color": "gray",
        "weight": .5,
        "opacity": .5,
        "fill": True,               
        "fillOpacity": 0.5,           
    }
)

# 在Streamlit中显示地图
m.to_streamlit(height=700)

注意事项

1. 确保安装了正确版本的依赖库：

   • leafmap 0.41.5或更高版本
   • streamlit 1.40.2或更高版本
   • geopandas
   • folium

2. 如果遇到性能问题，可以考虑：

   • 减少显示的数据点数量
   • 使用聚类标记
   • 调整地图缩放级别

3. 对于更复杂的地图交互需求，可能需要考虑使用Streamlit的原生地图组件或其他专门的地图库。

通过使用正确的后端导入方式，开发者可以充分利用Leafmap在Streamlit中的地理数据可视化能力，实现丰富的地图展示效果。