javascript - react-leaflet v3 缩放监听器

Question

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

我的目标是达到缩放级别的标记。在这种情况下类似React-Leaflet: 缩放标记后缩放

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

标签： javascriptreactjsleafletreact-leaflet

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