React-Leaflet 通过状态变化改变 GEOJSON 形状颜色

Question

通过 API 调用，我获得了 GEOJSON 数据（点）。我立即使用 circleMaker 在传单地图中显示该数据，并将它们全部显示为一种颜色。然后，我为用户提供滑动滑块的选项（触发动作，负载为滑块 value/location）。我想要做的是改变一些圆圈的颜色（即那些属性低于滑块值的圆圈）。在不重新渲染所有圆圈的情况下如何做到这一点？

示例：（所有圆圈均为绿色且滑块值为 0，然后我将滑块更改为 4，所有圆圈的值（我从 GEOJSON 功能中获得）低于4（滑块值）颜色变为红色，其余不变

示例代码：我有一个 GEOJSON 组件：

 <GeoJSON
  key={_.uniqueId()}
  data= {this.props.countrySelected.geojson}
  pointToLayer={this.pointToLayer.bind(this)}
  ></GeoJSON>

^ 数据是一个 GEOJSON 对象，所有点都具有 "score"

的特征

这里是pointToLayer:

pointToLayer = (feature, latlng) => {
return L.circleMarker(latlng, {
  color: '#228B22',
  fillColor: '#228B22',
  fillOpacity: .6,
  radius: 3
}).bindPopup(popUpString(feature.properties)); 
}

在另一个组件中，我有一个每次更改时都会调用 handleChange 的滑块：

handleChange = (value) => {
this.props.sliderChanged(value);
}

然后这会触发一个动作，然后触发一个 reducer 对状态进行适当的更改（即它使状态滑块值更改为用户刚刚更改的滑块中的值。

Answer 1

查看这两个链接以获得我提出的解决方案的一些上下文：

https://github.com/PaulLeCam/react-leaflet/issues/382

http://leafletjs.com/reference-1.2.0.html#geojson

您将需要创建一个这样的 renderGeojson 函数，每次重新渲染时都会重新计算该函数：

function renderCountries(countryGeoJson, sliderValue) {
  return countryGeoJson.map(country => {
    let style = () => { color: 'defaultColor' };

    if (country.score < sliderValue ) {
      style = () => { color: 'red' };
    } else if ( country.score > slidervalue ) {
      style = () => { color: 'green' };

    return (
      <GeoJSON key={field.id} data={field.geoJson} style={style} />
    );
  });
}

现在，该函数将在组件中的实际 render 函数中调用，每次滑块值更改时都会调用该函数。

伪代码但类似于：

<Map>
   { renderCountries( this.props.countrySelected.geojson, this.state.sliderValue ) }
</Map>

有道理吗？ :)

React-Leaflet 通过状态变化改变 GEOJSON 形状颜色

React-Leaflet change GEOJSON shape color by state change

javascript

leaflet

reactjs

react-leaflet