如何在缩放更改事件的反应传单中获取贴图对象

您需要添加对地图的引用:

<Map
  ref={(ref) => { this.map = ref; }}
  {...}
>
(...)
</Map>

然后您可以访问地图:

handleZoomstart = (map) => {
  console.log(this.map && this.map.leafletElement);
};

和当前缩放:

getMapZoom() {
   return this.map && this.map.leafletElement.getZoom();
}

也可以不使用参考来完成此操作。使用事件“onZoomEnd”。

此事件对象具有当前缩放状态的“\u zoom”属性。

e.target._zoom

我只是简单地解决了上述问题。React传单提供了一个很好的“onViewportChange”回调,可以捕获使用地图时的居中和缩放更改。

您需要三样东西,声明的“Viewport”对象,一个支持回调的函数 和回调。

const viewport = {
center: [49.32707, 19.10041],
zoom: 5,
};

const onViewportChanged = (viewport) => {
console.log(viewport);
};

return (

<Map viewport={viewport} onViewportChanged={onViewportChanged}></Map>)

顺致敬意,

解决方案对我不起作用。如果您使用react手册v3,您可以使用此手册。 注意,钩子useMapEvents需要从子组件“MapContainer”调用,这很重要!

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