React-Leaflet изменяет цвет фигуры GEOJSON путем изменения состояния

Через вызов 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);
}

Затем это запускает действие, которое затем запускает редуктор, который вносит соответствующие изменения в состояние (то есть заставляет значение ползунка состояния изменяться на значение в ползунке, которое только что изменил пользователь.


reactjs javascript leaflet react-leaflet
person 39fredy    schedule 19.09.2017    source источник
comment
Если вы опубликуете код, я, вероятно, смогу вам помочь. Может быть, компонент, который содержит компонент карты-листовки?   -  person maxwell    schedule 19.09.2017
comment
@maxwell Я добавил соответствующий код :) Заранее спасибо!   -  person 39fredy    schedule 19.09.2017

Ответы (1)


arrow_upward
3
arrow_downward

Просмотрите эти две ссылки, чтобы получить некоторый контекст для решения, которое я придумал:

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>

Есть смысл? :)

person maxwell    schedule 19.09.2017
comment
Будет ли это повторно отображать все, что изменяется sliderValue? - person 39fredy; 19.09.2017
comment
да, изменение состояния sliderValue вызовет повторный рендеринг - person maxwell; 19.09.2017
comment
Хм, да, мне будет любопытно. изменение состояния действительно вызовет повторный рендеринг, но эта двухуровневая функция может быть вызвана только на componentDidMount или что-то в этом роде .. - person maxwell; 19.09.2017
comment
Хорошо, после просмотра документации я думаю, что знаю, как вам это нужно. Редактирование моего поста - ч / о одна секунда - person maxwell; 19.09.2017
comment
Необязательно делать значение стиля функцией, вы можете просто отправить объект. - person Evan Siroky; 20.09.2017
comment
@EvanSiroky, что ты имеешь в виду? - person 39fredy; 22.09.2017
comment
@ 39fredy Вам помог этот ответ? Если да, не могли бы вы нажать эту кнопку и отметить как ответ, спасибо! - person maxwell; 22.09.2017
comment
@Maxwell Я пытаюсь реализовать это, как мы говорим. - person 39fredy; 22.09.2017