React-Leafletを使用してGeoJsonデータを取得する

Question

マップ上で一定の半径を持つ円のGeoJsonデータを取得しようとしています。 GeoJsonデータオブジェクトをマップからどのように取得するのか分かりません。ドキュメントによると、FeatureGroupを使用すると助けになるはずですが、Reactで実装する方法を理解できません。 ありがとうございました！

import React, {Component} from 'react'; 
 
import Geosuggest from 'react-geosuggest'; 
 
import { Map, Marker, Popup, TileLayer, Circle, FeatureGroup } from 'react-leaflet'; 
 
import Slider from 'react-rangeslider'; 
 

 
class App extends React.Component { 
 

 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     lat: 18.572605, 
 
     lng: 73.878208, 
 
     zoom: 13, 
 
     value: 500 
 
    } 
 
    this.onSuggestSelect = this.onSuggestSelect.bind(this); 
 
    } 
 

 
    onSuggestSelect(suggest) { 
 
    console.log(suggest) 
 
    this.setState({ 
 
     lat: suggest.location.lat, 
 
     lng: suggest.location.lng, 
 
    }) 
 
    } 
 

 
    handleChangeStart =() => { 
 
    console.log('Change event started') 
 
    }; 
 

 
    handleChange = value => { 
 
    this.setState({ 
 
     value: value 
 
    }) 
 
    }; 
 

 
    handleChangeComplete =() => { 
 
    console.log('Change event completed') 
 
    }; 
 

 
    render() { 
 
    const position = [this.state.lat, this.state.lng]; 
 
    const { value } = this.state 
 
    return (
 
     <div> 
 
      <h1>Hello React :)</h1> 
 
      <Geosuggest 
 
      onSuggestSelect={this.onSuggestSelect} 
 
      /> 
 
      <div > 
 
      <Map style={{height: '600px', width: '500px'}} center={position} zoom={this.state.zoom}> 
 
       <TileLayer 
 
       attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
 
       url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
 
       /> 
 
       <Circle center={position} radius={value} color="#FF4E00" /> 
 

 

 
       <Marker position={position}> 
 
       <Popup> 
 
        <span>A pretty CSS3 popup. <br/> Easily customizable.</span> 
 
       </Popup> 
 
       </Marker> 
 
      </Map> 
 
      </div> 
 
      <div className='slider'> 
 
      <Slider 
 
       min={0} 
 
       max={1000} 
 
       value={value} 
 
       onChangeStart={this.handleChangeStart} 
 
       onChange={this.handleChange} 
 
       onChangeComplete={this.handleChangeComplete} 
 
      /> 
 
      <div className='value'>{value}</div> 
 
      </div> 
 
     </div> 
 

 
    ); 
 
    } 
 
} 
 
export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

あなたは単に、おそらくあなたは、このライブラリを使用することができ、円のためにGeoJSONを作成しようとしている場合は、次の解決のためのhttps://www.npmjs.com/package/circle-to-polygon