Question

我正在关注Leaflet的Choropleth教程 http://leafletjs.com/examples/choropleth.html 并使用反应传单。我设法setStyle没有对原始源代码进行任何修改，但它确实有效。

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

任何人都可以提出另一种在反应传单中重置样式的方法吗？

Answer 1

解决方案是访问具有resetStyle

的geojson的leaflet元素

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

Answer 2

react-leaflet-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)

React-leaflet如何重置样式

2 个答案: