如何在folium/leaflet中动态生成最优缩放级别？

问题描述 #

我正在使用leaflet和folium绘制带筛选功能的位置地图，需要实现两个需求：

• 将地图居中于所有位置之间（已实现）；
• 自动调节缩放级别，让所有位置都显示在屏幕上（缩放级别可能从街道级到国家级）。

我了解到fitBounds可以自动计算适配矩形区域的缩放级别，但不清楚具体用法。已经算出了经纬度的最值和平均值，却不知道怎么转换成Leaflet的缩放级别，现有代码如下：

def function(request):
    markers = Model.objects.filter(location_active=True)

    #Max latitude & longitude
    min_latitude = Model.objects.filter(location_active=True).aggregate(Min('latitude'))['latitude__min']
    min_longitude = Model.objects.filter(location_active=True).aggregate(Min('longitude'))['longitude__min']

    #Min latitude & longitude
    max_latitude = Model.objects.filter(location_active=True).aggregate(Max('latitude'))['latitude__max']
    max_longitude = Model.objects.filter(location_active=True).aggregate(Max('longitude'))['longitude__max']

    sum_latitude = 0
    # sum latitude and longitude
    sum_latitude = max_latitude + min_latitude
    sum_longitude = max_longitude + min_longitude

    
    #average position for latitude and longitude
    average_latitude = sum_latitude/2
    print(f'average_latitude - {average_latitude} ')
    average_longitude = sum_longitude/2
    print(f'average_longitude - {average_longitude} ')

    center_location = [average_latitude,average_longitude]
    center_zoom_start= 12
    tiles_style = 'Stamen Terrain'
   
    
    #create Folium map
    m = folium.Map(location=center_location,zoom_start=center_zoom_start,tiles=tiles_style)
    m_access = folium.Map(location=center_location,zoom_start=center_zoom_start,tiles=tiles_style)

    context = {'markers':markers,'map_access':m_access._repr_html_,'map':m._repr_html_}
    
    return render(request,'template.html',context)

解决方案：用Folium的fit_bounds自动适配 #

不需要手动计算缩放级别，Folium内置的fit_bounds方法可以直接传入经纬度范围，自动算出最佳缩放级别并适配所有标记点。

具体修改步骤 #

1. 优化查询性能：把重复的数据库查询合并，减少请求次数

   active_markers = Model.objects.filter(location_active=True)
   

2. 一次性获取经纬度边界：用聚合操作批量获取最值，构造适配所需的边界格式

   bounds_data = active_markers.aggregate(
       min_lat=Min('latitude'),
       max_lat=Max('latitude'),
       min_lon=Min('longitude'),
       max_lon=Max('longitude')
   )
   # 边界格式：[[最小纬度, 最小经度], [最大纬度, 最大经度]]
   bounds = [
       [bounds_data['min_lat'], bounds_data['min_lon']],
       [bounds_data['max_lat'], bounds_data['max_lon']]
   ]
   

3. 调用fit_bounds适配地图：创建地图后直接调用该方法，无需手动设置zoom_start

   m = folium.Map(location=center_location, tiles=tiles_style)
   m_access = folium.Map(location=center_location, tiles=tiles_style)
   
   m.fit_bounds(bounds)
   m_access.fit_bounds(bounds)
   

4. 处理单个标记点的特殊情况：如果只有一个标记，添加内边距避免标记贴在屏幕边缘

   if active_markers.count() == 1:
       m.fit_bounds(bounds, padding=(50, 50))
       m_access.fit_bounds(bounds, padding=(50, 50))
   

修改后的完整代码 #

def function(request):
    active_markers = Model.objects.filter(location_active=True)
    
    # 初始化默认中心（无活跃标记时使用）
    center_location = [39.9042, 116.4074]  # 示例：北京坐标
    bounds = None

    if active_markers.exists():
        # 获取经纬度边界
        bounds_data = active_markers.aggregate(
            min_lat=Min('latitude'),
            max_lat=Max('latitude'),
            min_lon=Min('longitude'),
            max_lon=Max('longitude')
        )
        bounds = [
            [bounds_data['min_lat'], bounds_data['min_lon']],
            [bounds_data['max_lat'], bounds_data['max_lon']]
        ]
        # 计算中心位置
        average_latitude = (bounds_data['min_lat'] + bounds_data['max_lat']) / 2
        average_longitude = (bounds_data['min_lon'] + bounds_data['max_lon']) / 2
        center_location = [average_latitude, average_longitude]

    tiles_style = 'Stamen Terrain'
   
    # 创建Folium地图
    m = folium.Map(location=center_location, tiles=tiles_style)
    m_access = folium.Map(location=center_location, tiles=tiles_style)
    
    # 应用边界适配
    if bounds:
        if active_markers.count() == 1:
            m.fit_bounds(bounds, padding=(50, 50))
            m_access.fit_bounds(bounds, padding=(50, 50))
        else:
            m.fit_bounds(bounds)
            m_access.fit_bounds(bounds)

    context = {'markers': active_markers, 'map_access': m_access._repr_html_, 'map': m._repr_html_}
    
    return render(request, 'template.html', context)

原理说明 #

fit_bounds本质是调用Leaflet原生的fitBounds方法，它会根据传入的西南角、东北角坐标，自动计算刚好容纳整个区域的最佳缩放级别，同时自动对齐地图中心（你也可以保留手动计算的中心，不影响效果）。

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