javascript Leaflet React在函数组件中获取map示例

lmvvr0a8 于 2023-05-16 发布在 Java

关注(0)|答案(4)|浏览(149)

我想有一个按钮以外的Map，改变了看法，以另一个坐标。
有没有办法让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

JavaScript

来源：https://stackoverflow.com/questions/65394203/leaflet-react-get-map-instance-in-functional-component

4条答案

按热度按时间

ajsxfq5m1#

您需要使用一个组件，其中将包括您的按钮内。使用MapContainer的whenCreated prop来获取map示例。我认为mapRef在最新版本中不再有效。
MapContainer：

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

Demo

赞(0）回复(0）举报 2023-05-16

qhhrdooz2#

whenCreated在4.0中已经不存在了，但是有ref：
MapContainer：

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>

赞(0）回复(0）举报 2023-05-16

bvhaajcl3#

你需要访问map元素（从map组件，它是容器，而不是MapContainer），这是一个非常简单的例子：

export default function MapComponent() {
    const [mapCenter,setMapCenter] = useState([13.1538432,30.2154278])
    let [zoom,setZoomLevel] = useState(15)
    let [tile,setTile] = useState('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png')
    
    let mapRef = useRef();

    const fly=()=>{
        mapRef.current.leafletElement.flyTo([14,30],15)
    }

    return (
    <>
        <button onClick={fly}>Click</button>
        <Map center={mapCenter} zoom={zoom} ref={mapRef} style={{width:'100%',height:'100%'}}>
            <TileLayer url={tile}/>
        </Map>
    </>  
    )
}

赞(0）回复(0）举报 2023-05-16

uyhoqukh4#

适用于3.x和4.x：

另一种方法是使用useMap钩子，它存在于3.x和4.x中。为了在父组件中使用它，您只需要添加一个子组件，例如。MapController下面。

const MapController = () => {
  const map = useMap();

  // do something with map, in a useEffect hook, for example.

  return <></>;
};

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

赞(0）回复(0）举报 2023-05-16

我来回答

javascript Leaflet React在函数组件中获取map示例

4条答案

相关问题

热门标签

最新问答