如何使用 react-leaflet 获得界限

Question

我想获取当前地图的边界，以便我可以使用 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 不是函数。

Answer 1

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

根据documentation：

您可以直接访问组件创建的 Leaflet 元素 在此组件中使用 this.leafletElement。这个传单元素 通常在 componentWillMount() 中创建，除了 Map 只有在容器被创建后才能创建的组件 渲染。

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