如何与反应传单进行界限

Jak*_* Hm 9 leaflet reactjs react-leaflet

我想获得当前地图的边界,以便我可以使用Overpass API搜索这些边界.

对于传单我知道方法只是map.getBounds(),但我不知道如何在react-leaflet中实现它.

class SimpleExample extends React.Component {
  constructor() {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
  }

  componentDidMount() {
    console.log(this.refs.map.getBounds())
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom} ref='map'>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
      </Map>
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

这就是我尝试过的.错误说这this.refs.map.getBounds不是一个功能.

Bra*_*don 10

试试this.refs.map.leafletElement.getBounds.

根据文件:

您可以使用此组件中的this.leafletElement直接访问由组件创建的Leaflet元素.此leaflet元素通常在componentWillMount()中创建,但Map组件除外,它只能在呈现容器后创建.

这是一种说法,它们将传单对象存储leafletElement为其组件对象的属性.

  • 在`componentDidMount`和`componentDidUpdate`中访问它 (2认同)