Leaflet React 在功能组件中获取地图实例

Question

我想在地图外有一个按钮，将视图更改为另一个坐标。

有没有办法让 mapContainer 实例调用它们的函数？或者我该如何实现该功能？

我试图通过使用 ref 来获取它，但它不起作用。这是我当前的代码

const zoom = 13;

function Map({ regionCoord, regionName }) {

    const mapRef = useRef();

    function handleFlyToClick() {
      // This don't work
      // const map = mapRef.current.leafletElement 
      // map.flyTo(regionCoord, zoom)
    }

 return (   
        <React.Fragment>
            <Grid container >
                <Grid item xs={10}>
                    {regionCoord && <MapContainer
                        ref={mapRef}                     
                        center={[50,50]} 
                        zoom={zoom}                    
                        >
                        <TileLayer
                            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                        />            
   
                        <Marker position={regionCoord}>
                          <Popup>{regionName}</Popup>
                        </Marker>        
                    </MapContainer>}                               
                </Grid>
                <Grid item xs={2}>
                    <button onClick={handleFlyToClick}>Fly To</button>
                </Grid>
            </Grid>
        </React.Fragment>  
    )
    
}

export default Map

我正在使用 react-leaflet v3

Answer 1

您需要使用一个组件，其中将包含您的按钮。要利用地图实例使用whenCreated的道具MapContainer。我认为mapRef最新版本不再有效。

地图容器：

 const [map, setMap] = useState(null);

 <MapContainer
      center={[50, 50]}
      zoom={zoom}
      style={{ height: "90vh" }}
      whenCreated={setMap}
  >
...

</MapContainer>
<FlyToButton />  // use the button here outside of the MapContainer

....

使用按钮及其事件创建组件

function FlyToButton() {
  const onClick = () => map.flyTo(regionCoord, zoom);
    
  return <button onClick={onClick}>Add marker on click</button>;
}

演示

Answer 2

whenCreated4.0 上不再存在，但有ref：

地图容器：

const [map, setMap] = useState<Map|null>(null);

 <MapContainer
      center={[50, 50]}
      zoom={zoom}
      style={{ height: "90vh" }}
      ref={setMap}
  >
   <div> 
     ... do whatever you want with `map`
   </div
</MapContainer>