如何在Folium绘制Polyline/Polygon后添加元数据（如道路名称）？

你通过Folium的Draw插件绘制Polyline/Polygon后，想要给这些图形添加道路名称这类元数据，以下是几个可行的基于Folium的解决思路：

一、配置Draw插件，添加自定义元数据输入字段 #

Draw插件支持通过options参数自定义绘制时的表单，让你在绘制图形时直接输入元数据，这些数据会被包含在导出的GeoJSON里。

示例代码：

import folium
from folium.plugins import Draw

# 创建地图
m = folium.Map(location=[1.3521, 103.8198], zoom_start=11)

# 配置Draw插件，添加自定义元数据输入框
draw_options = {
    'polyline': {
        'allowIntersection': False,
        'drawError': {'color': '#e1e100', 'message': '不能交叉！'},
        'shapeOptions': {'color': '#6bc2e5', 'weight': 4},
        # 添加自定义表单字段，用于输入道路名称
        'formOptions': {
            'title': '折线属性',
            'fields': [
                {'name': 'road_name', 'label': '道路名称', 'type': 'text'}
            ]
        }
    },
    'polygon': {
        'drawError': {'color': '#e1e100', 'message': '不能交叉！'},
        'shapeOptions': {'color': '#6bc2e5', 'weight': 4},
        # 给多边形也添加元数据字段
        'formOptions': {
            'title': '多边形属性',
            'fields': [
                {'name': 'area_name', 'label': '区域名称', 'type': 'text'},
                {'name': 'road_name', 'label': '关联道路', 'type': 'text'}
            ]
        }
    },
    'export': True  # 开启导出功能，导出的GeoJSON会包含输入的元数据
}

draw = Draw(export=True, options=draw_options)
draw.add_to(m)

# 显示地图
m

绘制图形时，完成绘制后会弹出表单，输入的元数据会和图形的几何信息一起被导出为GeoJSON，后续可以解析使用。

二、为绘制的图形添加点击弹窗，展示/编辑元数据 #

可以通过监听Draw插件的draw:created事件，在图形绘制完成后，给图形绑定一个弹窗，弹窗里可以显示或编辑元数据，同时将元数据存储到图形的属性中。

示例代码（需要结合JavaScript）：

import folium
from folium.plugins import Draw

# 创建地图
m = folium.Map(location=[1.3521, 103.8198], zoom_start=11)

draw = Draw(export=True)
draw.add_to(m)

# 添加自定义JavaScript代码，处理绘制完成后的弹窗和元数据
custom_js = """
document.addEventListener('DOMContentLoaded', function() {
    map.on('draw:created', function(e) {
        var layer = e.layer;
        var type = e.layerType;
        
        // 弹窗内容：包含元数据输入框
        var popupContent = '<div>' +
            '<label>道路名称：</label>' +
            '<input type="text" id="roadNameInput" placeholder="输入道路名称">' +
            '<button onclick="saveMetadata()">保存</button>' +
            '</div>';
        
        layer.bindPopup(popupContent);
        
        // 保存元数据到图层属性
        window.saveMetadata = function() {
            var roadName = document.getElementById('roadNameInput').value;
            layer.feature.properties.road_name = roadName;
            layer.closePopup();
            layer.bindPopup('道路名称：' + roadName);
        };
    });
});
"""

# 将JavaScript添加到地图
folium.Element(custom_js).add_to(m.get_root())

# 显示地图
m

绘制完成后点击图形，会弹出输入框，输入元数据保存后，再次点击图形就能看到已保存的元数据。

三、结合已有道路数据自动关联元数据 #

如果你已经有OSM的道路GeoDataFrame（比如代码里的gdf），可以通过空间匹配，自动给绘制的折线/多边形关联道路名称等元数据。

简化代码示例：

import folium
from folium.plugins import Draw
import geopandas as gpd

# 假设已经有导出的绘制图形的GeoJSON数据（实际可通过Draw插件导出获取）
drawn_geojson = {
    "type": "FeatureCollection",
    "features": [
        {"type": "Feature", "properties": {}, "geometry": {"type": "LineString", "coordinates": [[103.8198, 1.3521], [103.82, 1.353]]}}
    ]
}

# 转为GeoDataFrame
drawn_gdf = gpd.GeoDataFrame.from_features(drawn_geojson)

# 空间连接，找到距离最近的道路（使用你已有的gdf数据）
joined_gdf = gpd.sjoin_nearest(drawn_gdf, gdf[['name', 'geometry']], max_distance=0.001)

# 创建地图并添加关联后的图形
m = folium.Map(location=[1.3521, 103.8198], zoom_start=11)

for idx, row in joined_gdf.iterrows():
    folium.GeoJson(
        row.geometry.__geo_interface__,
        popup=folium.Popup(f"道路名称：{row['name']}")
    ).add_to(m)

# 显示地图
m

内容的提问来源于stack exchange，提问作者lolgeswaran