简体   繁体   中英

React Leaflet Polygons not updating with properties

I am trying to draw a set of polygons on a map and then change the color according to an external event which updates a property of the MapContainer. In my example the property is "view". I can see that the property value is updated properly but the polygons are not re-rendered. It's a simple set of polygon without Tile (no geographical map, only the polygons). I tried both with color and fillColor, but nothing changes when I update "view". Should I somehow force a map refresh? If yes, how?

<MapContainer
        id="leaflet-map"        
        center={center}
        zoom={zoom}
      >
        {this.props.data.map((poly, index) => {          
          return (
            <Polygon
              key={`poly-${poly.id}`}
              color={poly.color[this.props.view]}
              fillColor={
                poly.color[this.props.view]
              }
              positions={poly.attributes.coordinates}              
            >              
            </Polygon>
          );
        })}
      </MapContainer>

OK, I found the answer. I hope this can help others. I have to modify pathOptions.color and pathOptions.fillColor and not directly color and fillColor. It works like this for me:

 <Polygon
              key={`poly-${poly.id}`}
              pathOptions={{  
                color: poly.color[this.props.view],
                fillColor: poly.color[this.props.view]
              }}
              positions={poly.attributes.coordinates}              
            >              
            </Polygon>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM