plotly - Python Dash Mapboxgl 多边形点击事件数据，

Question

如何从 python dash/plotly 中的 mapboxgl 多边形单击事件获取数据(geojson 属性 - 名称、id 等)？

下面是 Dash Graph 元素

layer = dict(
        type="fill",
        below='traces',
        color="#18607e",
        opacity=0.7,
        hovermode="closest",
        interactive=True,
        text=[x['properties']['id'] for x in geojson['features']],
        source=geojson,
        sourcetype="geojson"

    )

    element = dcc.Graph(
                id='TxWCD-choropleth',
                figure=dict(
                    data=[dict(
                        type='scattermapbox'
                    )],
                    layout=dict(
                            plot_bgcolor="#18607e",
                            paper_bgcolor="#18607e",
                            clickmode="event+select",
                            mapbox=dict(
                                layers=[layer],
                                accesstoken=_token,
                                center=dict(
                                    lat=53.350140,
                                    lon=-6.266155
                                ),
                                zoom=1,
                                style='light'
                            ),
                            height=600,
                            autosize=True,
                            margin=dict(
                                l=0,
                                r=0,
                                b=0,
                                t=0,
                                pad=4
                            )
                    )
                )
            )

回调事件:

app.callback(
    Output(component_id='graphs', component_property='children'),
    [Input('map-flex', "n_clicks")]
)
def update_graph(data):

    # Do some updates
    # Expected result: mapbox click event data geojson properties

    return ''

预期结果:

单击 Mapbox 多边形会返回 Mapbox 事件数据。即 geojson 属性。

任何帮助或解决方法表示赞赏。谢谢

Answer 1

查看 scattermapbox 的文档。有一个名为 customdata 的属性，您可以使用它来确定传递给回调的内容。

要定义回调，您可以使用此 reference 。本质上，您正在执行以下步骤:

1. 将 clickmode 属性添加到您的图表布局:

   'layout': {
       'clickmode': 'event+select'
   }
   

2. 定义您的回调:

   @app.callback(
       Output(component_id='graphs', component_property='children'),
       [Input('map-flex', 'clickData')]) 
   def display_click_data(custom_data):
       print(custom_data)