Реакт-листовка как resetStyle

Question

Я слежу за учебником Chopopleth Leaflet
http://leafletjs.com/examples/choropleth.html и с помощью реактивного листовки. Мне удалось установитьStyle без каких-либо изменений из исходного исходного кода, и он работает.

highlightFeature(e) { 
    var layer = e.target; 

    layer.setStyle({ 
     weight: 5, 
     color: '#666', 
     dashArray: '', 
     fillOpacity: 0.7 
    }); 
} 

Слой имеет свойство setStyle. Теперь, чтобы resetStyle, что у меня есть propblems.

Я пытался получить к нему доступ с

resetHighlight(e) { this.refs.geojson.resetStyle(e.target); }

, имея GeoJSON

<GeoJson 
     ref="geojson" 
     data={this.state.data} 
     style={this.getStyle.bind(this)} 
     onEachFeature={this.onEachFeature.bind(this)} 
     /> 

, но он не имеет resetStyle свойство

Любой желающий может предложить другой способ переустановки стиль в реакционной листочке?

Answer 1

Решение было получить доступ к leafletElement из GeoJSON, который имеет resetStyle

resetHighlight(e) { 
    this.refs.geojson.leafletElement.resetStyle(e.target); 
} 

Answer 2

react-leaflet-choropleth способ справиться choropleth, если вы не желая, чтобы написать его с нуля. Он основан на плагине leaflet-choropleth

import Choropleth from 'react-leaflet-choropleth' 
import { Map } from 'react-leaflet' 

const style = { 
    fillColor: '#F28F3B', //default color filll 
    weight: 2, //normal styling 
    opacity: 1, 
    color: 'white', 
    dashArray: '3', 
    fillOpacity: 0.5 
} 

const map = (geojson) => (
    <Map> 
    <Choropleth 
     data={{type: 'FeatureCollection', features: geojson} /*feature collection or array*/} 
     valueProperty={(feature) => feature.properties.value /*value for choropleth*/} 
     visible={(feature) => feature.id !== active.id  /*use choropleth color?*/} 
     scale={['#b3cde0', '#011f4b']       /*color range*/} 
     steps={7            /*how many different colors to use?*/} 
     mode={'e'            /*use equadistance mode, others include kmeans and quantile*/} 
     style={style} 
     onEachFeature={(feature, layer) => layer.bindPopup(feature.properties.label)} 
     ref={(el) => this.choropleth = el.leafletElement  /*get the geojson's layer container*/} 
    /> 
    </Map> 
) 
ReactDom.render(<map geojson={...} />, document.body)