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

Question

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

Answer 1

一种选择是确定边界的北点并通过 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)}
    />
  );
}

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

How to focus viewport to the bottom instead of the center

mapbox

reactjs

react-map-gl