如何使用 react-leaflet 获取边界

Question

我想获取当前地图的边界，以便我可以使用立交桥搜索这些边界 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 不是一个函数。

Answer 1

尝试this.refs.map.leafletElement.getBounds。

根据 documentation:

You can directly access the Leaflet element created by a component using this.leafletElement in this component. This leaflet element is usually created in componentWillMount(), except for the Map component where it can only be created after the container is rendered.

这是一种说法，他们将传单对象存储为 leafletElement 属性在其组件对象上。

如何使用 react-leaflet 获取边界

How to get bounds with react-leaflet

leaflet

reactjs

react-leaflet