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

使用React-Leaflet从地图中获取GeoJson数据

1 个答案: