6

我正在关注 Leaflet 的 Choropleth 教程
http://leafletjs.com/examples/choropleth.html 并使用 react-leaflet。我设法在没有对原始源代码进行任何修改的情况下设置样式并且它可以工作。

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 样式的方法吗？

4

2 回答 2

7

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

resetHighlight(e) {
    this.refs.geojson.leafletElement.resetStyle(e.target);
}
于 2016-08-18T20:31:28.940 回答
1

如果您不想从头开始编写，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)
于 2016-08-19T15:32:23.443 回答