Fix bearing for non-mercator projections (#10781)

src/geo/transform.js

@@ -266,11 +266,33 @@ class Transform {
         return new Point(this.width, this.height);
     }
 
+    // calculates the angle between a vector pointing north in
+    // Mercator and a vector pointing north in the projection
+    // and converts the angle from radians to degrees
+    _getBearingOffset(lngLat?: LngLat): number {
+        if (this.projection.name === 'mercator') return 0;
+        const {lng, lat} = lngLat || this.center;
+        const north = {lng, lat: lat + 0.0001};
+        const projectedCenter = this.projection.project(lng, lat);
+        const projectedNorth = this.projection.project(north.lng, north.lat);
+        const northVector = {x: projectedNorth.x - projectedCenter.x, y: projectedNorth.y - projectedCenter.y};
+        return (Math.atan2(northVector.x, northVector.y) * 180 / Math.PI) + 180;
+    }
+
     get bearing(): number {
-        return -this.angle / Math.PI * 180;
+        return wrap(this._getBearingOffset() + this.rotation, -180, 180);
     }
+
     set bearing(bearing: number) {
-        const b = -wrap(bearing, -180, 180) * Math.PI / 180;
+        this.rotation = bearing - this._getBearingOffset();
+    }
+
+    get rotation(): number {
+        return -this.angle / Math.PI * 180;
+    }
+
+    set rotation(rotation: number) {
+        const b = -rotation * Math.PI / 180;
         if (this.angle === b) return;
         this._unmodified = false;
         this.angle = b;
@@ -873,7 +895,8 @@ class Transform {
 
                     if (!minmax) { minmax = {min: minRange, max: maxRange}; }
 
-                    const cornerFar = furthestTileCorner(this.bearing);
+                    // ensure that we want `this.rotation` instead of `this.bearing` here
+                    const cornerFar = furthestTileCorner(this.rotation);
 
                     const farX = cornerFar[0] * EXTENT;
                     const farY = cornerFar[1] * EXTENT;

src/ui/camera.js

@@ -341,7 +341,9 @@ class Camera extends Evented {
      * @returns The map's current bearing.
      * @see [Navigate the map with game-like controls](https://www.mapbox.com/mapbox-gl-js/example/game-controls/)
      */
-    getBearing(): number { return this.transform.bearing; }
+    getBearing(): number {
+        return this.transform.bearing;
+    }
 
     /**
      * Sets the map's bearing (rotation). The bearing is the compass direction that is "up"; for example, a bearing

test/ignores.json

@@ -13,6 +13,7 @@
   "render-tests/map-mode/static": "https://github.com/mapbox/mapbox-gl-js/issues/5649",
   "render-tests/map-mode/tile": "skip - mapbox-gl-js does not support tile-mode",
   "render-tests/map-mode/tile-avoid-edges": "skip - mapbox-gl-js does not support tile-mode",
+  "render-tests/map-projections/albers-usa": "skip - temporarily skip until non-tiled regions are handled properly",
   "render-tests/mixed-zoom/z10-z11": "current behavior conflicts with https://github.com/mapbox/mapbox-gl-js/pull/6803. can be fixed when https://github.com/mapbox/api-maps/issues/1480 is done",
   "render-tests/projection/axonometric": "axonometric rendering in gl-js tbd",
   "render-tests/projection/axonometric-multiple": "axonometric rendering in gl-js tbd",