使用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