Wrap to world zero when crossing the antimeridian (#4451)

Fixes #2071

src/geo/transform.js

@@ -231,6 +231,9 @@ class Transform {
     setLocationAtPoint(lnglat, point) {
         const translate = this.pointCoordinate(point)._sub(this.pointCoordinate(this.centerPoint));
         this.center = this.coordinateLocation(this.locationCoordinate(lnglat)._sub(translate));
+        if (this._renderWorldCopies) {
+            this.center = this.center.wrap();
+        }
     }
 
     /**

src/ui/camera.js

@@ -769,6 +769,9 @@ class Camera extends Evented {
             const scale = 1 / w(s);
             tr.zoom = startZoom + tr.scaleZoom(scale);
             tr.center = tr.unproject(from.add(to.sub(from).mult(us)).mult(scale));
+            if (tr.renderWorldCopies) {
+                tr.center = tr.center.wrap();
+            }
 
             if (this.rotating) {
                 tr.bearing = interpolate(startBearing, bearing, k);

test/unit/ui/camera.test.js

@@ -1046,6 +1046,24 @@ test('camera', (t) => {
             camera.flyTo({ center: [170, 0], duration: 10 });
         });
 
+        t.test('jumps back to world 0 when crossing the antimeridian', (t) => {
+            const camera = createCamera();
+            camera.setCenter([-170, 0]);
+
+            let leftWorld0 = false;
+
+            camera.on('move', () => {
+                leftWorld0 = leftWorld0 || (camera.getCenter().lng < -180);
+            });
+
+            camera.on('moveend', () => {
+                t.false(leftWorld0);
+                t.end();
+            });
+
+            camera.flyTo({ center: [170, 0], duration: 10 });
+        });
+
         t.test('peaks at the specified zoom level', (t) => {
             const camera = createCamera({zoom: 20});
             const minZoom = 1;