2

通过 API 调用，我得到 GEOJSON data (points) 。我立即使用 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);
}

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

4

1 回答 1

3

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

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>

有道理？:)

于 2017-09-19T19:18:03.293 回答