6

Leaflet の Choropleth チュートリアル
http://leafletjs.com/examples/choropleth.htmlに従い 、react-leaflet を使用しています。元のソース コードを変更せずに setStyle に成功し、動作しました。

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

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

レイヤーには setStyle プロパティがあります。今私が問題を抱えているresetStyleに。

でアクセスしてみました

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は、ゼロから書きたくない場合にコロプレスを処理する方法です。これは、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 に答える