如何获取dash-leaflet地图可见区域的边界框？

dash-leaflet 原生支持该需求，不需要额外自定义扩展，通过地图组件内置的bounds属性搭配回调即可实现。

实现逻辑 #

• dash-leaflet 的 Map 组件内置了可读写的bounds属性，会实时同步当前地图可视区域的边界坐标，当地图发生缩放、平移等更新操作时，该属性值会自动更新
• 只需要将Map组件的bounds属性作为回调的输入项，即可在每次地图更新时自动触发回调，拿到最新的边界框

前置依赖 #

首先安装所需库，执行命令：
pip install dash dash-leaflet

完整示例代码 #

import dash
from dash import Input, Output, html
import dash_leaflet as dl

app = dash.Dash(__name__)

app.layout = html.Div([
    dl.Map(
        id="leaflet-map",
        children=[dl.TileLayer()],
        style={"width": "100%", "height": "600px"},
        zoom=10,
        center=[39.9, 116.4]  # 默认定位到北京
    ),
    html.Div(id="bounds-display", style={"marginTop": "20px", "fontSize": "16px"})
])

@app.callback(
    Output("bounds-display", "children"),
    Input("leaflet-map", "bounds"),
    prevent_initial_call=False  # 设为True则初始加载不触发回调
)
def update_bounds_display(bounds):
    if not bounds:
        return "暂无边界框数据"
    # bounds格式为 [[西南角纬度, 西南角经度], [东北角纬度, 东北角经度]]
    sw_lat, sw_lng = bounds[0]
    ne_lat, ne_lng = bounds[1]
    return f"当前地图边界框：西南({sw_lat:.4f}, {sw_lng:.4f})，东北({ne_lat:.4f}, {ne_lng:.4f})"

if __name__ == "__main__":
    app.run_server(debug=True)

补充说明 #

• 回调返回的bounds属性结构和原生Leaflet的getBounds()方法返回值完全对应，可直接用于边界过滤、范围查询等业务逻辑
• 如果需要同时获取当前地图的缩放等级、中心点坐标，还可以在回调中额外监听Map组件的zoom、center属性

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