如何使用 react-leaflet 获得界限 [英] How to get bounds with react-leaflet

问题描述

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

I want to get bounds of the current map so that I can search those bounds with the Overpass API.

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

For leaflet I know the method is just map.getBounds(), but I don't know how to implement that in 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 不是函数.

This is what I've tried. Error says that this.refs.map.getBounds isn't a function.

推荐答案

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

根据文档:

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

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 属性存储在其组件对象上.

which is a round about way of saying they store the leaflet object as leafletElement property on their component objects.

这篇关于如何使用 react-leaflet 获得界限的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！