dash-leaflet (geojson): 更改最后点击功能的颜色

Question

我正在尝试通过单击更改多段线（地图项）的颜色，但我不知道如何更改。我知道有组件 click_feature，我应该以某种方式使用它（所以我可以针对特定功能，但我不知道如何更新颜色）。

类似的东西：

app.clientside_callback(
    """function(feature){
        // set and return color
        ;}""",
    Output("geojson", ???), # To what children?
    Input("geojson", "click_feature")
    )

有什么想法吗，如何在点击事件中更改特定功能的颜色？

谢谢！

Answer 1

当您使用 GeoJSON 组件时，您必须对有关如何在 rendering 函数中绘制特征的所有信息进行编码，即 style 道具（多边形）和 point_to_layer 道具。例如，要将特定的多边形着色为灰色，结构类似于

function(feature, context){
        const match = ...
        if(match) return {weight:5, color:'#666', dashArray:''};
};

其中 match 是确定将哪个或哪些多边形着色为灰色的条件。要实现交互性，可以使用 hideout 属性。你可以例如将其设置为上次单击的功能，

app.clientside_callback("function(feature){return feature}", Output("states", "hideout"), [Input("states", "click_feature")])

结合这两个概念，可以在点击时突出显示一个功能。这是一个使用 us-states dataset,

的小例子

import dash_html_components as html
import dash_leaflet as dl
from dash import Dash
from dash.dependencies import Output, Input
from dash_extensions.javascript import assign

# Color the feature saved in the hideout prop in a particular way (grey).
style_handle = assign("""function(feature, context){
    const match = context.props.hideout &&  context.props.hideout.properties.name === feature.properties.name;
    if(match) return {weight:5, color:'#666', dashArray:''};
}""")
# Create example app.
app = Dash()
app.layout = html.Div([
    dl.Map(center=[39, -98], zoom=4, children=[
        dl.TileLayer(),
        dl.GeoJSON(url="/assets/us-states.pbf", format="geobuf", id="states", 
                   options=dict(style=style_handle), hideout=dict(click_feature=None))
    ], style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"}, id="map"),
])
# Update the feature saved on the hideout prop on click.
app.clientside_callback("function(feature){return feature}", Output("states", "hideout"), [Input("states", "click_feature")])

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

dash-leaflet (geojson): 更改最后点击功能的颜色

dash-leaflet (geojson): change color of last clicked feature

python

geojson

leaflet

plotly-dash