如何使用下拉菜单修改地图上绘制的点？

Question

以下是我创建地图并添加带有选项 1 和选项 2 的下拉菜单的方法。

import pandas as pd
import plotly.express as px

us_cities = pd.read_csv(
    'https://raw.githubusercontent.com/plotly/datasets/master/us-cities-top-1k.csv'
)


fig = px.scatter_mapbox(
    us_cities,
    lat='lat',
    lon='lon',
    hover_name='City',
    hover_data=['State', 'Population'],
    color_discrete_sequence=['fuchsia'],
    zoom=3,
)
fig.update_layout(mapbox_style='open-street-map')
fig.update_layout(margin={'r': 0, 't': 0, 'l': 0, 'b': 0})
fig.update_layout(
    updatemenus=[
        dict(
            buttons=list(
                [
                    {
                        'args': ['type', 'option1'],
                        'label': 'Option 1',
                        'method': 'restyle',
                    },
                    {
                        'args': ['type', 'option2'],
                        'label': 'Option 2',
                        'method': 'restyle',
                    },
                ]
            ),
            direction='down',
            x=0.075,
            xanchor='right',
            yanchor='bottom',
        ),
    ]
)
fig.show()

我想在下拉菜单中列出所有状态，当设置为 all 或 option1 或任何名称时，可以选择绘制所有状态的所有数据点，或者, 到 select 一个状态，只有属于该状态的数据点被显示，其余的被丢弃。

Answer 1

由于express不支持drop-downs，所以我改用了graph对象。 go 不会自动设置悬停数据，所以我引入了自定义数据并添加了城市名称和人口。为了通过 drop-down 切换地图，需要为每个按钮配置必要的地图和数据，因此我们将为每个按钮准备一个空列表（用于地图和按钮）并添加为每个州提取的数据。同时地图的显示和non-display会绑定到按钮上。请注意，下拉菜单不会滚动，因此必须调整图形高度和下拉菜单字体大小以显示所有状态。

import pandas as pd
import plotly.express as px
import plotly.graph_objects as go

us_cities = pd.read_csv(
    'https://raw.githubusercontent.com/plotly/datasets/master/us-cities-top-1k.csv'
)

traces = []
buttons = []
state_list = np.append('All_state', us_cities['State'].unique())
visible = state_list
for s in state_list:
    #print(s)
    if s == 'All_state':
        filtered_df = us_cities.copy()
    else:
        filtered_df = us_cities[us_cities['State'] == s]

    traces.append(go.Scattermapbox(
        lat=filtered_df['lat'],
        lon=filtered_df['lon'],
        mode='markers',
        visible=True if s == state_list[0] else False,
        customdata=filtered_df,
        hovertemplate='City: %{customdata[0]}<br>Population: %{customdata[2]}<extra></extra>',
        marker=go.scattermapbox.Marker(
            size=9,
            color='fuchsia'
        )
    ))
    
    buttons.append(
        dict(
            method='update',
            label=s,
            args=[{'visible':list(visible==s)}],)
    )

fig = go.Figure(data=traces)
fig.update_layout(
    mapbox=dict(
        style='open-street-map',
        #accesstoken=mapbox_access_token,
        bearing=0,
        center=go.layout.mapbox.Center(
            lat=us_cities['lat'].mean(),
            lon=us_cities['lon'].mean(),
        ),
        zoom=3
    ),
    margin={'r':10, 't': 0, 'l': 0, 'b': 0}
)

fig.update_layout(
    # autosize=False,
    height=1000,
    showlegend=False,
    updatemenus=[
        dict(
            buttons=buttons,
            direction='down',
            x=0.05,
            y=1.0,
            xanchor='right',
            yanchor='bottom',
            font=dict(size=8)
        ),
    ]
)

fig.show()

如何使用下拉菜单修改地图上绘制的点？

How to modify points drawn on map using a dropdown menu?

python

plotly