反应-传单v3变焦监听器

Question

我正在尝试订阅缩放更改事件，但无法获得每次缩放更改的更新。

我的目标是达到缩放级别的标记。类似于本例中的React-Leaflet: Scale markers after zooming

但是v3中的“反应传单”并没有为MapContainer提供onZoomChange事件。所以我无法获得缩放我的DivIcon的缩放更新

Answer 1

找到了useMapEvents钩子的解决方案，在react传单v3中提供了：

https://react-leaflet.js.org/docs/api-map#usemapevents

import {useMapEvents} from "react-leaflet";
import {useState} from "react";

function MyComponent() {
    const [zoomLevel, setZoomLevel] = useState(5); // initial zoom level provided for MapContainer
    
    const mapEvents = useMapEvents({
        zoomend: () => {
            setZoomLevel(mapEvents.getZoom());
        },
    });

    console.log(zoomLevel);

    return null
}

function MyMapComponent() {
    return (
        <MapContainer center={[50.5, 30.5]} zoom={5}>
            <MyComponent />
        </MapContainer>
    )
}