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

Question

我正在使用 react-leaflet 来显示非地理地图。我还添加了一些缩放更改事件。 (onZoomEnd())

我想知道如何访问地图对象或地图组件并获取当前缩放级别。或者其他地图道具？

  <Map
                center={this.getCalculatedCenterFromState()}
                zoom={this.getCalculatedZoomFromState()}
                minZoom={this.getCalculatedMinZoomFromState()}
                maxZoom={2}
                onZoomEnd={this.mapService.handleZoomstart(/* map.object */)}


               >
</Map

我需要在处理程序方法中访问地图对象

handleZoomstart = (map) => {
        // TODO handle move event
    };

Answer 1

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

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

然后就可以访问地图了：

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

和当前缩放：

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

Answer 2

这也可以不使用 refs 来完成。使用事件 'onZoomEnd'。

此事件对象具有“_zoom”属性，这是当前缩放状态。

e.target._zoom

Answer 3

我刚刚很简单地解决了上面的问题。 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>)

此致

Answer 4

下面的解决方案对我不起作用。如果你使用 react-leaflet 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>
    )
}

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

How to get Map object in react-leaflet on zoom change event

javascript

leaflet

reactjs

react-leaflet