如何获取Folium Draw插件绘制圆形的坐标与半径值？

核心思路 #

folium生成的是静态HTML页面，Draw插件的交互数据仅存在于前端浏览器中。要获取绘制的圆形参数，需要结合Leaflet原生事件监听捕获数据，再配合距离计算逻辑统计范围内的标记点。

步骤1：添加自定义JS捕获圆形绘制事件 #

folium的Draw插件基于Leaflet.Draw，我们可以通过监听draw:created事件提取圆心坐标和半径。以下是完整的Python代码示例：

import folium
from folium.plugins import Draw

# 初始化地图
m = folium.Map(location=[40.7128, -74.0060], zoom_start=10)

# 配置Draw插件，仅启用圆形绘制
Draw(
    draw_options={
        'circle': True,
        'polyline': False,
        'rectangle': False,
        'polygon': False,
        'marker': False
    },
    edit_options={'edit': False}
).add_to(m)

# 添加自定义JavaScript捕获绘制事件
custom_js = """
map.on('draw:created', function(e) {
    const layerType = e.layerType;
    const layer = e.layer;

    if (layerType === 'circle') {
        // 获取圆心经纬度
        const center = layer.getLatLng();
        // 获取半径（单位：米）
        const radius = layer.getRadius();

        // 弹窗显示参数，也可改为存入页面隐藏元素或发送到后端
        alert(`圆心坐标：${center.lat}, ${center.lng}\\n半径：${radius}米`);
        
        // 存入隐藏输入框，方便后续获取
        document.getElementById('circle-lat').value = center.lat;
        document.getElementById('circle-lng').value = center.lng;
        document.getElementById('circle-radius').value = radius;
    }

    // 将绘制的圆形添加到地图
    map.addLayer(layer);
});
"""

# 将JS代码注入地图页面
folium.Element(custom_js).add_to(m.get_root().html)

# 添加隐藏输入框存储参数（可选）
hidden_inputs = """
<input type="hidden" id="circle-lat" value="">
<input type="hidden" id="circle-lng" value="">
<input type="hidden" id="circle-radius" value="">
"""
folium.Element(hidden_inputs).add_to(m.get_root().html)

# 保存地图
m.save('map.html')

步骤2：计算圆形范围内的标记点 #

由于地球是球体，需用Haversine公式计算球面两点距离，判断标记点是否在半径范围内。以下是Python端的计算示例：

import math

def calculate_spherical_distance(lat1, lon1, lat2, lon2):
    """计算两点间球面距离（单位：米）"""
    earth_radius = 6371000  # 地球平均半径，米
    phi1 = math.radians(lat1)
    phi2 = math.radians(lat2)
    delta_phi = math.radians(lat2 - lat1)
    delta_lambda = math.radians(lon2 - lon1)

    a = math.sin(delta_phi/2)**2 + math.cos(phi1)*math.cos(phi2)*math.sin(delta_lambda/2)**2
    c = 2 * math.atan2(math.sqrt(a), math.sqrt(1-a))
    
    return earth_radius * c

# 示例标记点列表（可替换为你的表格数据）
marker_coords = [
    (40.7128, -74.0060),
    (40.7308, -73.9973),
    (40.7061, -74.0119)
]

# 假设从前端获取的圆形参数（实际可通过表单提交或AJAX传递）
circle_center = (40.7128, -74.0060)
circle_radius = 1000  # 单位：米

# 统计范围内的标记点数量
in_range_count = 0
for lat, lon in marker_coords:
    distance = calculate_spherical_distance(circle_center[0], circle_center[1], lat, lon)
    if distance <= circle_radius:
        in_range_count += 1

print(f"圆形范围内的标记点数量：{in_range_count}")

补充说明 #

• 如果需要在前端直接计算标记点数量，可以将标记点坐标嵌入到JS代码中，用同样的Haversine公式在浏览器中完成计算，无需回传后端。
• 若要实现实时统计，可通过AJAX将圆形参数发送到Python后端，计算后返回结果并更新页面。

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