react-leaflet v3 缩放侦听器

Question

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

我的目标是在缩放级别上实现标记缩放。在这种情况下 React-Leaflet: Scale markers after zooming

但是 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>
    )
}

react-leaflet v3 缩放侦听器

react-leaflet v3 zoom listener

javascript

leaflet

reactjs

react-leaflet