如何将视口聚焦到底部而不是中心

问题描述

我目前正在使用 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)}
    />
  );
}