如何解决如何将视口聚焦到底部而不是中心
我目前正在使用 react-map-gl 包来创建我的应用程序。 在文档中,这段代码侧重于纬度:37.7577, 经度:-122.4376 缩放:8 在我视野的中心。但是,我希望纬度:37.7577,经度:-122.4376 的焦点成为我视图的底部。我有什么想法可以做到这一点吗?
function Map() {
const [viewport,setViewport] = useState({
width: 400,height: 400,latitude: 37.7577,longitude: -122.4376,zoom: 8
});
return (
<ReactMapGL
{...viewport}
onViewportChange={nextViewport => setViewport(nextViewport)}
/>
);
}
解决方法
一种选择是确定边界的北点并通过 Map.panTo
function 重新居中地图:
const bounds = map.getBounds(); //get map bounds
const newCenter = { lng: map.getCenter().lng,lat: bounds.getNorth() };
map.panTo(newCenter);
示例
function Map() {
const [viewport,setViewport] = React.useState({
latitude: 37.7577,longitude: -122.4376,zoom: 8,});
function mapLoaded(e) {
const map = e.target;
const bounds = map.getBounds(); //get map bounds
const newCenter = { lng: map.getCenter().lng,lat: bounds.getNorth() };
map.panTo(newCenter);
}
return (
<ReactMapGL
onLoad={mapLoaded}
mapboxApiAccessToken={MAPBOX_TOKEN}
{...viewport}
width="100vw"
height="100vh"
onViewportChange={(nextViewport) => setViewport(nextViewport)}
/>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。