使用 'react-leaflet' 新 useLeaflet() 挂钩的示例？

Question

我正在尝试使用挂钩获取对传单对象的引用，以便我可以查询不同事件（如 Map.getBoundaries()）的新地图边界。我是 reac-leaflet 的新手，这种方法可能是完全错误的，但这就是我现在得到的...

我想做的是获取每个 moveend 事件的地图边界，如果这有帮助的话...

Answer 1

处理程序：

const onMoveEnd = (event) => {
 const bounds = event.target.getBounds()
 console.log(bounds)
}   
    // _northEast: LatLng {lat: 47.51470804161579, lng: 19.071493148803714}
    // _southWest: ...

组件：

<Map onmoveend={onMoveEnd}></Map>

Answer 2

首先，您只能在 Map 元素内的组件中使用挂钩：

<Map>
  <YourComponent />
</Map

然后在您的组件中，您可以执行以下操作：

const YourComponent = () => {
  const { map } = useLeaflet();
  const [bounds, setBounds] = React.useState({});

  React.useEffect(() => {
    const eventHandler = event => {
      setBounds(event.target.getBounds());
      doSomethingElse();
    }
    map.on("moveend", eventHandler);

    return () => {
      map.off("moveend", eventHandler); // Remove event handler to avoid creating multiple handlers
    }
  }, [setBounds, map]);

  return {
    // Use bounds for whatever you need
    <div>Lat: {bounds.lat}; long: {bounds.lng}</div>
  }
}

使用 'react-leaflet' 新 useLeaflet() 挂钩的示例？

An example of using the 'react-leaflet' new useLeaflet() hook?

leaflet

reactjs

react-leaflet