React-leaflet 如何重置样式

Question

我正在关注 Leaflet 的 Choropleth 教程
http://leafletjs.com/examples/choropleth.html 并使用反应传单。我设法在不对原始源代码进行任何修改的情况下设置样式并且它有效。

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

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

图层有一个 setStyle 属性。现在重置我遇到的问题。

我试图通过

访问它

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 属性

任何人都可以建议另一种在 react-leaflet 中重置样式的方法吗？

Answer 1

解决方法是访问具有resetStyle的geojson的leafletElement

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

Answer 2

react-leaflet-choropleth is a way to handle choropleth if you are not wanting to write it from scratch. It is based off of the 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)

React-leaflet 如何重置样式

React-leaflet how to resetStyle

leaflet

reactjs

react-leaflet