Flask+Folium地图多边形坐标获取及面积计算实现求助

前端JavaScript（嵌入index.html） #

先确保Folium地图启用Draw控件，再添加按钮和对应逻辑，捕获绘制的多边形坐标并发送到后端：

<!-- 地图容器后添加按钮 -->
<button id="calcBtn">Calculate Shape</button>

<script>
// 存储绘制的多边形坐标
let drawnPolygonCoords = null;

// 监听Draw控件的创建事件
map.on('draw:created', function(e) {
    const type = e.layerType;
    const layer = e.layer;
    
    // 仅处理多边形类型
    if (type === 'polygon') {
        // 移除之前绘制的多边形（可选，避免重复）
        if (drawnPolygonCoords) {
            map.removeLayer(layer);
        }
        // 获取坐标：格式为[[纬度, 经度], ...]
        drawnPolygonCoords = layer.getLatLngs()[0];
    }
});

// 绑定按钮点击事件
document.getElementById('calcBtn').addEventListener('click', async function() {
    if (!drawnPolygonCoords) {
        alert('请先绘制一个多边形！');
        return;
    }

    // 转换坐标格式为后端易处理的数组
    const coords = drawnPolygonCoords.map(coord => [coord.lat, coord.lng]);

    try {
        // 发送POST请求到后端接口
        const response = await fetch('/calculate-area', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ polygon_coords: coords }),
        });

        const result = await response.json();
        if (result.success) {
            alert(`多边形面积：${result.area_sqkm} 平方公里 / ${result.area_hectares} 公顷`);
        } else {
            alert('计算失败：' + result.error);
        }
    } catch (error) {
        alert('请求失败：' + error.message);
    }
});
</script>

Flask后端代码（app.py） #

先安装依赖：pip install flask folium shapely pyproj

from flask import Flask, render_template, request, jsonify
import folium
from shapely.geometry import Polygon
from pyproj import Transformer

app = Flask(__name__)

@app.route('/')
def index():
    # 创建基础地图，启用仅支持多边形的Draw控件
    m = folium.Map(location=[39.9042, 116.4074], zoom_start=12)
    folium.plugins.Draw(
        export=False,
        draw_options={
            'polyline': False,
            'rectangle': False,
            'circle': False,
            'marker': False,
            'circlemarker': False,
            'polygon': True
        }
    ).add_to(m)
    # 将地图转为HTML字符串传入模板
    map_html = m._repr_html_()
    return render_template('index.html', map_html=map_html)

@app.route('/calculate-area', methods=['POST'])
def calculate_area():
    try:
        data = request.get_json()
        coords = data.get('polygon_coords')
        
        if not coords or len(coords) < 3:
            return jsonify({'success': False, 'error': '无效的多边形坐标（至少需要3个点）'})
        
        # 自动匹配UTM投影带，解决经纬度计算面积的误差问题
        lon = coords[0][1]
        utm_zone = int((lon + 180) / 6) + 1
        # 根据纬度选择北半球/南半球UTM坐标系
        crs = f'EPSG:326{utm_zone}' if coords[0][0] >= 0 else f'EPSG:327{utm_zone}'
        transformer = Transformer.from_crs('EPSG:4326', crs, always_xy=True)
        
        # 转换所有坐标为UTM投影（米为单位）
        utm_coords = [transformer.transform(lon, lat) for lat, lon in coords]
        
        # 创建多边形并计算面积
        polygon = Polygon(utm_coords)
        area_sqm = polygon.area
        area_sqkm = area_sqm / 1_000_000
        area_hectares = area_sqm / 10_000
        
        return jsonify({
            'success': True,
            'area_sqm': round(area_sqm, 2),
            'area_sqkm': round(area_sqkm, 4),
            'area_hectares': round(area_hectares, 2)
        })
    except Exception as e:
        return jsonify({'success': False, 'error': str(e)})

if __name__ == '__main__':
    app.run(debug=True)

index.html模板基础结构 #

确保正确渲染Folium地图：

<!DOCTYPE html>
<html>
<head>
    <title>Polygon Area Calculator</title>
    {{ map_html|safe }}
</head>
<body>
    <div id="map">{{ map_html|safe }}</div>
    <button id="calcBtn">Calculate Shape</button>

    <!-- 粘贴之前的JavaScript代码到这里 -->
    <script>
        // 这里放JS代码
    </script>
</body>
</html>

关键提示 #

• 经纬度直接计算面积会有较大误差，转为UTM投影（米为单位）后计算更精准
• Draw控件配置仅保留多边形工具，避免用户误操作其他绘图类型
• 前后端都加入了基础错误处理，方便调试排查问题

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