如何在縮放更改事件的反應傳單中獲取 Map object

Question

我正在使用 react-leaflet 來顯示非地理 map。我還添加了一些縮放更改事件。 ( onZoomEnd() )

我想知道如何訪問 map object 或 map 組件並獲取當前縮放級別。 或者其他地圖道具？

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


               >
</Map

我需要在處理程序方法中訪問 map object

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

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

Answer 3

這也可以不使用 refs 來完成。 使用事件“onZoomEnd”。

此事件對象具有 '_zoom' 屬性，即當前縮放狀態。

e.target._zoom

Answer 4

我剛剛很簡單地解決了上述問題。 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>)

最好的問候