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