如何解决Leaflet React 在功能组件中获取地图实例
我想在地图外有一个按钮,将视图更改为另一个坐标。
有没有办法让 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='© <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
解决方法
您需要使用一个包含您的按钮的组件。要获取地图实例,请使用 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>;
}
,
您需要访问地图元素(来自地图组件,它是容器而不是 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>
</>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。