如何更改多边形样式？

Question

我有一个回调函数，可以在地图上动态生成矩形多边形（通过 Dash Leaflet 生成）。多边形是根据矩形选择工具的坐标创建的。截至目前，我试图在地图上单击矩形时持久更改矩形的样式，并在单击其他位置时返回到之前的样式状态。我在尝试这样做时遇到了一个问题，因为矩形的 html 元素的 ID 是动态生成的，因此无法调用回调函数来更改多边形样式。

我尝试分配不同的类名，以便在给定 css 样式表配置的情况下样式会发生变化，但这不起作用。我还尝试直接从 dl.Rectangle 对象更改样式属性（填充和描边，见下文），但 Dash 中的标准 css 样式阻止应用它们。

我可以使用 JavaScript 轻松解决这个问题，但 Dash 是一个基于 React 的工具，所以我无法对 DOM 元素进行任何更改。

用于从回调函数创建多边形的代码：

    new_roi = dl.Rectangle(
        bounds=[[float(rec.bottom), float(rec.left)],
                [float(rec.top), float(rec.right)]],
        id=rec.name,
        className='added-polygon',
        fillColor='green',
        color='green'
    )

单击其中一个多边形时，我将 LayerGroup 子级 (map_features) 的多边形收集为状态。然后，我修改单击的多边形的样式和类名（位于 map_features 的索引位置 [-1] 处），并返回多边形，包括修改为 LayerGroup 输出的多边形。但这个方法行不通。

map_features修改：

map_features[positions[-1]]['props']['className'] = 'selected-polygon'
map_features[positions[-1]]['props']['stroke'] = 'green'
map_features[positions[-1]]['props']['fill'] = 'green'

有没有办法在单击地图多边形（动态生成的）后对其样式进行持久更改？

Answer 1

我刚刚找到了解决办法，就是给

pathOptions

指定各自的属性，不然不行。

    map_features[positions[-1]] = dl.Rectangle(
        bounds=[[float(south), float(west)],
                [float(north), float(east)]],
        id=roi_name,
        className='added-polygon',
        pathOptions={
            'fillColor': '#d45b6d',
            'color': '#d45b6d',
            'stroke-dasharray': '3, 3',
            'stroke-width': 1.5,
            'fill-opacity': 0.2,
            'stroke-opacity': 1
        }
    )