Блог

В настоящее время я использую пакет 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 функции:

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