如何在考虑俯仰角(pitch)和方位角(bearing)时获取mapbox-gl地图视口边缘坐标？

I totally get your frustration—Mapbox's getBounds() method can be really misleading when you're working with a rotated or pitched map. Let's break down why it's misbehaving and how to fix it:

Why getBounds() Fails After Rotation #

The getBounds() method returns axis-aligned geographic bounds (a rectangle parallel to the equator and meridians). But when you rotate or pitch the map, the visible area is no longer a simple axis-aligned shape—it becomes a transformed polygon. getBounds() just gives you the smallest axis-aligned box that can contain that polygon, which is why the results look totally off after rotation.

The Correct Approach: Calculate Visible Corners #

To get accurate geographic coordinates for your map's visible viewport (even when rotated or pitched), you need to:

1. Grab the four corners of the map's screen container.
2. Convert each screen coordinate to a geographic coordinate using map.unproject().
3. Use these four points to define your actual visible bounds or polygon.

Code Implementation #

Here's how to modify your code to get precise viewport coordinates after rotation:

function getVisibleViewport(map) {
  const container = map.getContainer();
  const width = container.offsetWidth;
  const height = container.offsetHeight;
  
  // Get the four screen corners of the map container
  const corners = [
    map.unproject([0, 0]), // Top-left corner
    map.unproject([width, 0]), // Top-right corner
    map.unproject([width, height]), // Bottom-right corner
    map.unproject([0, height]) // Bottom-left corner
  ];
  
  // Create a bounds object from the corners (axis-aligned but accurate to visible area)
  const bounds = new mapboxgl.LngLatBounds();
  corners.forEach(corner => bounds.extend(corner));
  
  return {
    corners: corners, // Exact visible polygon corners
    bounds: bounds // Axis-aligned bounds covering the visible area
  };
}

// Use this function when clicking the map
map.on('click', () => {
  const viewport = getVisibleViewport(map);
  console.log('Visible corner coordinates:', viewport.corners);
  console.log('Accurate bounds:', viewport.bounds.toArray());
});

Key Notes #

• map.unproject() converts screen pixel coordinates (relative to the map container) to geographic LngLat objects, and it accounts for all map transformations—rotation, pitch, and zoom included.
• If you need the exact visible polygon (not just an axis-aligned box), use the corners array to draw shapes or run spatial calculations.
• The bounds object returned here is still axis-aligned, but it’s based on the actual visible edges of the map, so it’ll be far more accurate than the default getBounds() after rotation.

This should give you the correct viewport coordinates no matter how you adjust the map's pitch or bearing.

内容的提问来源于stack exchange，提问作者Rantiev