web-dev-qa-db-ja.com

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

これは私が試したものです。エラーはthis.refs.map.getBoundsは関数ではありません。

reactjsleafletreact-leaflet
11
Jake Hm

this.refs.map.leafletElement.getBoundsをお試しください。

ドキュメント によると：

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

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

10
Brandon