React-leaflet v3 缩放监听器

Question

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

我的目标是在缩放级别上实现标记缩放。像本例中的React-Leaflet：缩放后的​​刻度标记

但是v3中的react-leaflet没有MapContainer的onZoomChange事件。所以我无法获得缩放 DivIcon 的缩放更新

Answer 1

找到了react-leaflet v3中提供的useMapEvents钩子的解决方案：
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>
    )
}