反応リーフレットの境界を取得する方法

Question

現在のマップの境界を取得して、それらの境界をOverpass APIで検索できるようにしたいとします。

リーフレットの場合、メソッドは単にmap.getBounds（）ですが、リアクションリーフレットでそのメソッドを実装する方法はわかりません。

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> 
    ); 
    } 
} 

これは私が試みたものです。エラーはthis.refs.map.getBoundsは機能ではないと言います。

Answer 1

Try this.refs.map.leafletElement.getBoundsdocumentationによると

：

あなたは直接、このコンポーネントでthis.leafletElementを使用してコンポーネント が作成したリーフレットの要素にアクセスすることができます。このリーフレット要素 は通常、コンテナ がレンダリングされた後にのみ作成できるマップ コンポーネントを除いて、componentWillMount（）で作成されます。

これは、コンポーネントオブジェクトにleafletElementプロパティとしてリーフレットオブジェクトを格納すると言う意味のラウンドです。