Reworked easeTo to fix wrong direction bug

Continues on changes in mapbox#3130 pull request
delftswa2017 · Feb 17, 2017 · 69b0824 · 69b0824
1 parent 10315c0
commit 69b0824
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 6 deletions.
diff --git a/debug/vertical.html b/debug/vertical.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8' />
+    <title></title>
+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+    <link rel='stylesheet' href='/dist/mapbox-gl.css' />
+    <script src='/dist/mapbox-gl-dev.js'></script>
+    <script src='/debug/access_token_generated.js'></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.min.js"></script>
+    <style>
+        body { margin:0; padding:0; }
+        #map { position:absolute; top:0; bottom:0; width:100%; }
+    </style>
+</head>
+<body>
+
+<style type='text/css'>
+    #info {
+        display: block;
+        position: relative;
+        margin: 0px auto;
+        width: 50%;
+        padding: 10px;
+        border: none;
+        border-radius: 3px;
+        font-size: 12px;
+        text-align: center;
+        color: #222;
+        background: #fff;
+    }
+</style>
+<div id='map'></div>
+<pre id='info'></pre>
+<script>
+    var map = new mapboxgl.Map({
+        container: 'map', // container id
+        style: 'mapbox://styles/mapbox/streets-v9',//'mapbox://styles/gisfeedback/ciwmwq2gb00fa2ppabho4z39c/', //stylesheet location
+        center: [144.9, -37.83],
+        zoom: 15,
+        minZoom: 1,
+        pitch: 45
+    });
+
+    var posNo = 0;
+    var positions = [
+        [144.9, -37.83, 15],
+        [144.9, -37.87, 15]
+    ];
+    function moveCamera() {
+        var pos = positions[posNo];
+        posNo = (posNo + 1) % positions.length;
+        map.easeTo({
+            center: [pos[0], pos[1]],
+            zoom: pos[2],
+            duration: 2000
+        });
+    }
+    map.on('moveend', _ => setTimeout(moveCamera, 2000));
+    map.on('load', _ => setTimeout(moveCamera, 2000));
+
+    var max = 0;
+    var min = -100;
+
+    window.setInterval(function(){
+        lat = Math.round(map.transform._center.lat * 10000) / 10000;
+        max = Math.min(max, lat);
+        min = Math.max(min, lat);
+        document.getElementById('info').innerHTML =
+            'latitude: ' + JSON.stringify(lat) + '<br />' +
+            'max: ' + JSON.stringify(max) + '<br />' +
+            'min: ' + JSON.stringify(min);
+    }, 5);
+</script>
+</body>
+</html>
diff --git a/src/ui/camera.js b/src/ui/camera.js
@@ -7,6 +7,7 @@ const LngLat = require('../geo/lng_lat');
 const LngLatBounds = require('../geo/lng_lat_bounds');
 const Point = require('point-geometry');
 const Evented = require('../util/evented');
+const Transform = require('../geo/transform');
 
 /**
  * Options common to {@link Map#jumpTo}, {@link Map#easeTo}, and {@link Map#flyTo},
@@ -492,13 +493,26 @@ class Camera extends Evented {
             startZoom = this.getZoom(),
             startBearing = this.getBearing(),
             startPitch = this.getPitch(),
+            startCenter = tr.center,
 
             zoom = 'zoom' in options ? +options.zoom : startZoom,
             bearing = 'bearing' in options ? this._normalizeBearing(options.bearing, startBearing) : startBearing,
             pitch = 'pitch' in options ? +options.pitch : startPitch;
 
-        let toLngLat,
-            toPoint;
+        let toLngLat, 
+            toPoint,
+            offsetLocation,
+            toLocation,
+            fromLocation,
+            endTransform;
+
+        // Setup a Transform representing the state of the map at the end of the transition
+        endTransform = new Transform();
+        endTransform.center = tr.center;
+        endTransform.resize(tr.width, tr.height);
+        endTransform.zoom = zoom;
+        endTransform.bearing = bearing;
+        endTransform.pitch = 0; // fixes #3119 by pretending the map is not pitched; use pitch = 0 to revert to the old behavior
 
         if ('center' in options) {
             toLngLat = LngLat.convert(options.center);
@@ -511,8 +525,6 @@ class Camera extends Evented {
             toLngLat = tr.pointLocation(toPoint);
         }
 
-        const fromPoint = tr.locationPoint(toLngLat);
-
         if (options.animate === false) options.duration = 0;
 
         this.zooming = (zoom !== startZoom);
@@ -531,11 +543,30 @@ class Camera extends Evented {
             this.fire('zoomstart', eventData);
         }
 
+        offsetLocation = endTransform.pointLocation(toPoint);
+        fromLocation = endTransform.pointLocation(endTransform.centerPoint);
+
+        toLocation = LngLat.convert([
+            toLngLat.lng - (offsetLocation.lng - fromLocation.lng),
+            toLngLat.lat - (offsetLocation.lat - fromLocation.lat)
+        ]);
+
         clearTimeout(this._onEaseEnd);
 
         this._ease(function (k) {
+            // When zooming we need to scale our lat/lon interpolation because the distances change over the course of the transition
+            var k2 = k,
+                deltaZoom = zoom - startZoom,
+                totalDistanceExpansion = Math.pow(0.5, deltaZoom) - 1,
+                currentDelta,
+                currentDistanceExpansion;
+
             if (this.zooming) {
                 tr.zoom = interpolate(startZoom, zoom, k);
+                currentDelta = tr.zoom - startZoom;
+                currentDistanceExpansion = Math.pow(0.5, currentDelta) - 1;
+
+                k2 = currentDistanceExpansion / totalDistanceExpansion;
             }
 
             if (this.rotating) {
@@ -545,8 +576,10 @@ class Camera extends Evented {
             if (this.pitching) {
                 tr.pitch = interpolate(startPitch, pitch, k);
             }
-
-            tr.setLocationAtPoint(toLngLat, fromPoint.add(toPoint.sub(fromPoint)._mult(k)));
+
+            var lng = interpolate(startCenter.lng, toLocation.lng, k2);
+            var lat = interpolate(startCenter.lat, toLocation.lat, k2);
+            tr.center = LngLat.convert([lng, lat]);
 
             this.fire('move', eventData);
             if (this.zooming) {