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：

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

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

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形状颜色

1 个答案: