破折号传单获取标记位置

Question

我正在使用破折号仪表板在地图上绘制点位置，因此用户可以 select 该点并显示该位置的一些附加数据。它与 MapBox 配合得很好，但我无法在破折号内找到一种方法来对位置进行聚类。但是，我发现 dash-plotly 库非常擅长聚类，并尝试将我的地图更改为传单，但现在我无法通过单击它来获取标记 ID？我确定我遗漏了一些微不足道的东西。

那么，有没有一种方法可以在单击标记时将此代码修改为 return 标记 ID，而不仅仅是 return 地图上的坐标？

import dash
import dash_html_components as html
import dash_leaflet as dl
from dash.dependencies import Input, Output

markers = [dl.Marker(children=dl.Tooltip("test"), position=a) for a in [(11,11),(33,33), 
    (55,55)]]
cluster = dl.MarkerClusterGroup(id="markers", children=markers, options={"polygonOptions": 
    {"color": "red"}})

app = dash.Dash(prevent_initial_callbacks=True)
app.layout = html.Div(
        children=[
        html.Div(
            dl.Map([dl.TileLayer(),
                    dl.LayerGroup(id="layer"),
                    cluster
            ],
                   id="map", style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"})),
        html.P("EHEE"),
        html.Div(id='clickdata')
    ])

@app.callback(Output("clickdata", "children"),
              [Input("map", "click_lat_lng")])
def map_click(click_lat_lng):
    return "{}".format(click_lat_lng)

if __name__ == '__main__':
    app.run_server()

我想继续使用 Python 界面，我对 JavaScript 的自定义工作不感兴趣。

Answer 1

获取被点击的标记的 ID 的最简单方法是监听属性标记上的变化而不是地图本身。通过这种方法，可以从 callback_context 中提取制造商 ID 信息。这是一个基于您的代码的小示例，

import dash
import dash_html_components as html
import dash_leaflet as dl
from dash.dependencies import Input, Output

positions = [(11, 11), (33, 33), (55, 55)]
markers = [dl.Marker(dl.Tooltip("test"), position=pos, id="marker{}".format(i)) for i, pos in enumerate(positions)]
cluster = dl.MarkerClusterGroup(id="markers", children=markers, options={"polygonOptions": {"color": "red"}})

app = dash.Dash(prevent_initial_callbacks=True)
app.layout = html.Div([
    html.Div(dl.Map([dl.TileLayer(), cluster], center=(33, 33), zoom=3, id="map",
                    style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"})),
    html.Div(id='clickdata')
])


@app.callback(Output("clickdata", "children"),
              [Input(marker.id, "n_clicks") for marker in markers])
def marker_click(*args):
    marker_id = dash.callback_context.triggered[0]["prop_id"].split(".")[0]
    return "Hello from {}".format(marker_id)


if __name__ == '__main__':
    app.run_server()

破折号传单获取标记位置

Dash leaflet get marker location

leaflet

plotly-dash