反应叶子通过状态变化改变geojson形状颜色

Question

通过API调用，我获得了Geojson数据（点）。我立即使用CircleMaker在传单图中显示该数据，并将其显示为一种颜色。然后，我为用户提供滑动滑块的选项（触发有效载荷是滑块值/位置的操作）。我想做的是更改某些圆圈的颜色（即那些具有比滑块值低的属性的人）。在不重新汇发所有圆圈的情况下，我该怎么做？

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

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

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

^数据是一个具有所有要点的geojson对象

这是Pointtolayer：

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

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

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

然后，这触发了一个动作，然后触发一个减速器，该简化器对状态进行了足够的更改（即，它使状态滑块值更改为用户刚刚更改的滑块中的值。

查看这两个链接以获取我想出的解决方案的某些上下文：

https://github.com/paullecam/reeact-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函数中调用，该函数每次都会更改Slider值。

伪代码，但类似：

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

有意义吗？：）