React原生地图获取左上角和右下角的纬度和经度

import React, { useState } from 'react';
import ReactMapGL, { NavigationControl } from 'react-map-gl';

const Map = () => {
  const [viewport, setViewport] = useState({
    width: '100%',
    height: '400px',
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 10
  });

  const handleViewportChange = (newViewport) => {
    setViewport(newViewport);
    // 获取左上角和右下角的经纬度
    const { latitude, longitude, zoom, width, height } = newViewport;
    const topLeft = {
      latitude: latitude + height / 2 / zoom,
      longitude: longitude - width / 2 / zoom
    };
    const bottomRight = {
      latitude: latitude - height / 2 / zoom,
      longitude: longitude + width / 2 / zoom
    };
    console.log('左上角经纬度:', topLeft);
    console.log('右下角经纬度:', bottomRight);
  };

  return (
    <ReactMapGL
      {...viewport}
      onViewportChange={handleViewportChange}
      mapboxApiAccessToken={YOUR_MAPBOX_ACCESS_TOKEN}
    >
      <NavigationControl showCompass={false} />
    </ReactMapGL>
  );
};

export default Map;