如何在React Leaflet中添加on-load事件处理程序？

Question

我需要关于react-leaflet的帮助，这与我的基于地图的应用有关。 我正在尝试添加一个on-load函数，在客户端登录到地图后执行该函数。 但是在react-leaflet中，没有onLoad函数。

现在我只有这个：

function CenterCoords() {
    const map = useMapEvents({
        // TODO resolve onload
        layeradd() {
            map.locate()
            console.log('loading')
        },
        locationfound(e: any) {
            map.flyTo(e.latlng, map.getZoom())
        },
    })
    return null
}

我只使用了layeradd，但是我不知道它的含义，而且react-leaflet文档中也没有关于它的leaflet处理函数的提示。如果我依赖于leaflet文档，load和loading似乎都不起作用。

- Beaumont

Answer 1

MapContainer 组件有一个 whenReady 属性，它是一个函数，在地图准备就绪时触发。它还有一个 whenCreated 属性，它是一个基于 Leaflet 的 L.map 实例的函数。但你可以随意使用它：

<MapContainer
  center={center}
  zoom={zoom}
  scrollWheelZoom={false}
  whenReady={() => {
    console.log("This function will fire once the map is created")
  }}
  whenCreated={(map) => {
    console.log("The underlying leaflet map instance:", map)
  }}>
    ...
</MapContainer>

load 和 loading 事件更适用于图层，例如瓷砖图层或图像图层。

- Seth Lutske

Answer 2

你可以使用 useEffect 在首次渲染后运行某些内容。在 useEffect 的第二个参数中传入一个空数组，可以使其仅运行一次。

React.useEffect(() => {
  myFunction();
}, []);

- MAL

Answer 3

你可以使用鼠标悬停来更改图层添加

- Elshandi Septiawan

---

当前提供的答案不够清楚。请进行编辑以添加更多细节，以帮助他人理解如何解决所提出的问题。您可以在帮助中心找到更多关于编写好答案的信息。 - Community