如何使用react-leaflet限制

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

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

根据文档：

您可以使用此组件中的this.leafletElement直接访问该组件创建的Leaflet元素。该传单元素通常在componentWillMount（）中创建，但Map组件除外，在Map组件中，只有在渲染容器之后才能创建它。

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

以上是 如何使用react-leaflet限制 的全部内容， 来源链接： utcz.com/qa/403944.html

回到顶部