Dash打造美国县人口交互地图教程

本文手把手教你用 Dash 构建真正可靠、动态响应的美国县级人口交互地图，直击 Plotly 原生下拉菜单在 choropleth 图中导致的 FIPS 编码与人口数据严重错位这一顽疾——不再依赖危险的 restyle 操作，而是通过 Dash 回调每次生成全新图表对象，确保地理边界（GeoJSON）、行政区划编码（FIPS）和人口数值三者严格对齐；教程以华盛顿州为例，涵盖 GeoJSON 精准裁剪、FIPS 格式标准化、筛选逻辑封装、色阶统一控制及地图投影优化等关键细节，提供开箱即用的完整代码，助你轻松打造专业级、可扩展的地理可视化应用。

本文详解如何修复 Plotly 原生下拉菜单导致的地图数据错位问题，通过 Dash 构建真正动态过滤的县级人口 choropleth 地图，确保每次筛选后仅显示符合条件的县，并正确关联其地理编码与人口数值。

在使用 Plotly 的 px.choropleth 绘制美国县级人口地图时，若直接通过 updatemenus + restyle 方式切换 z（颜色映射值），会引发严重逻辑错误：地图仍渲染全部 GeoJSON 区域，但强行将截断后的子集数值（如 less_50K['County Pop 2022']）按原始 locations='FIPS' 顺序一一映射——导致 FIPS 编码与人口值错位（例如 King 县被错误赋予 Wahkiakum 县的 4688 人）。根本原因在于 restyle 不改变 locations 和 geojson 的拓扑结构，仅替换颜色数组，而子集 DataFrame 的索引已不连续，无法对齐原始地理要素顺序。

✅ 正确解法是：每次筛选都生成一个全新、独立的 choropleth 图形对象，确保 locations（FIPS）、color（对应人口）和 geojson 中匹配的 features 三者严格一致。Dash 的回调机制天然支持这一模式。

以下是完整、可运行的解决方案：

✅ 步骤 1：准备数据与地理信息

import dash
from dash import dcc, html, Input, Output
import plotly.express as px
import requests
import json
import pandas as pd

# 加载并过滤华盛顿州 GeoJSON（FIPS 前两位为 '53'）
r = requests.get('https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json')
counties = json.loads(r.text)
counties['features'] = [
    f for f in counties['features'] 
    if f['properties']['STATE'] == '53'
]

# 确保你的数据中 'FIPS' 列为字符串且长度为 5（如 '53033'），与 GeoJSON 中的 'id' 或 'FIPS' 属性一致
grouped_fips_pop['FIPS'] = grouped_fips_pop['FIPS'].astype(str).str.zfill(5)

✅ 步骤 2：构建 Dash 应用布局

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1("2022 Population in Washington State", style={'textAlign': 'center'}),

    # 下拉筛选器
    html.Div([
        html.Label("Filter by Population Range:", style={'font-weight': 'bold', 'margin': '10px 0'}),
        dcc.Dropdown(
            id='population-filter',
            options=[
                {'label': 'All Counties', 'value': 'all'},
                {'label': 'Less than 50,000', 'value': 'lt_50k'},
                {'label': '50,000 – 99,999', 'value': '50k_100k'},
                {'label': '100,000 or More', 'value': 'gt_100k'}
            ],
            value='all',
            clearable=False,
            style={'width': '300px'}
        )
    ], style={'textAlign': 'center', 'margin': '20px 0'}),

    # 地图容器
    dcc.Graph(id='choropleth-map')
])

✅ 步骤 3：定义回调函数（核心逻辑）

@app.callback(
    Output('choropleth-map', 'figure'),
    Input('population-filter', 'value')
)
def update_choropleth_map(selected_filter):
    # 动态过滤数据
    if selected_filter == 'all':
        filtered_df = grouped_fips_pop.copy()
    elif selected_filter == 'lt_50k':
        filtered_df = grouped_fips_pop[grouped_fips_pop['County Pop 2022'] < 50000].copy()
    elif selected_filter == '50k_100k':
        mask = (grouped_fips_pop['County Pop 2022'] >= 50000) & \
               (grouped_fips_pop['County Pop 2022'] < 100000)
        filtered_df = grouped_fips_pop[mask].copy()
    else:  # 'gt_100k'
        filtered_df = grouped_fips_pop[grouped_fips_pop['County Pop 2022'] >= 100000].copy()

    # 关键：为每个筛选结果重建完整 choropleth 图
    fig = px.choropleth(
        filtered_df,
        geojson=counties,
        locations='FIPS',                 # 严格匹配 GeoJSON 中的 'id' 或 properties.FIPS
        color='County Pop 2022',
        color_continuous_scale='Viridis',
        range_color=(grouped_fips_pop['County Pop 2022'].min(), 
                     grouped_fips_pop['County Pop 2022'].max()),
        scope='usa',
        labels={'County Pop 2022': 'Population'},
        hover_name='County',
        hover_data=['County Pop 2022']
    )

    # 优化地图投影与布局
    fig.update_geos(
        fitbounds="locations",
        visible=False,
        projection_type='albers usa',
        projection_scale=5,
        center={"lat": 47.5, "lon": -120}
    )
    fig.update_layout(
        margin={"r": 0, "t": 40, "l": 0, "b": 0},
        title={
            'text': f"2022 Population in Washington State ({selected_filter.replace('_', ' ').title()})",
            'x': 0.5,
            'xanchor': 'center'
        }
    )

    return fig

✅ 启动应用

if __name__ == '__main__':
    app.run_server(debug=True, port=8050)

⚠️ 关键注意事项

• FIPS 格式必须严格一致：GeoJSON 中的 features[i]['id'] 或 features[i]['properties']['FIPS'] 必须与 DataFrame 的 locations 列完全匹配（通常为 5 位字符串，如 '53033'）。使用 .astype(str).str.zfill(5) 强制标准化。
• 不要复用 fig 对象：避免在回调外创建 fig 并尝试 restyle/relayout —— 这是原问题根源。Dash 回调应返回全新图形对象。
• range_color 固定全局范围：保持色阶统一（使用全量数据的 min/max），便于跨筛选比较。
• 性能提示：对于超大数据集，可在回调内添加 filtered_df = filtered_df.reset_index(drop=True) 避免潜在索引干扰。

该方案彻底规避了 Plotly 原生下拉菜单的映射陷阱，以声明式、可维护的方式实现精准地理数据可视化，是构建生产级交互地图的标准实践。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~