From 9edd195103e4c426dc5b9b5fa4b522d66a210b22 Mon Sep 17 00:00:00 2001 From: Brad Dwyer Date: Thu, 1 Sep 2016 15:11:11 -0500 Subject: [PATCH 1/3] Rework Camera#easeTo to address problems with pitch --- debug/linear-ease.html | 138 +++++++++++++++++++++++++++++++++++++++++ js/ui/camera.js | 43 +++++++++++-- 2 files changed, 177 insertions(+), 4 deletions(-) create mode 100644 debug/linear-ease.html diff --git a/debug/linear-ease.html b/debug/linear-ease.html new file mode 100644 index 00000000000..acdc90c6608 --- /dev/null +++ b/debug/linear-ease.html @@ -0,0 +1,138 @@ + + + + Mapbox GL JS debug page + + + + + + + + +
+ + + + + +
+ + diff --git a/js/ui/camera.js b/js/ui/camera.js index d9a02de6530..b33d181e55c 100644 --- a/js/ui/camera.js +++ b/js/ui/camera.js @@ -6,6 +6,7 @@ var browser = require('../util/browser'); var LngLat = require('../geo/lng_lat'); var LngLatBounds = require('../geo/lng_lat_bounds'); var Point = require('point-geometry'); +var Transform = require('../geo/transform'); /** * Options common to {@link Map#jumpTo}, {@link Map#easeTo}, and {@link Map#flyTo}, @@ -408,13 +409,27 @@ util.extend(Camera.prototype, /** @lends Map.prototype */{ 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, toLngLat, - toPoint; + 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); @@ -427,8 +442,6 @@ util.extend(Camera.prototype, /** @lends Map.prototype */{ toLngLat = tr.pointLocation(toPoint); } - var fromPoint = tr.locationPoint(toLngLat); - if (options.animate === false) options.duration = 0; this.zooming = (zoom !== startZoom); @@ -442,11 +455,31 @@ util.extend(Camera.prototype, /** @lends Map.prototype */{ 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) { @@ -457,7 +490,9 @@ util.extend(Camera.prototype, /** @lends Map.prototype */{ 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) { From e19dd98a90eea65b61535fdca0d3d7f845062413 Mon Sep 17 00:00:00 2001 From: Brad Dwyer Date: Thu, 1 Sep 2016 16:44:02 -0500 Subject: [PATCH 2/3] Remove linear-ease debug page --- debug/linear-ease.html | 138 ----------------------------------------- 1 file changed, 138 deletions(-) delete mode 100644 debug/linear-ease.html diff --git a/debug/linear-ease.html b/debug/linear-ease.html deleted file mode 100644 index acdc90c6608..00000000000 --- a/debug/linear-ease.html +++ /dev/null @@ -1,138 +0,0 @@ - - - - Mapbox GL JS debug page - - - - - - - - -
- - - - - -
- - From 1ebf24f61a12cb1b34304a5626fff4f9a4e31c2b Mon Sep 17 00:00:00 2001 From: Brad Dwyer Date: Wed, 14 Sep 2016 10:26:57 -0500 Subject: [PATCH 3/3] Fix comment --- js/ui/camera.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/ui/camera.js b/js/ui/camera.js index b33d181e55c..06ac91feab5 100644 --- a/js/ui/camera.js +++ b/js/ui/camera.js @@ -429,7 +429,7 @@ util.extend(Camera.prototype, /** @lends Map.prototype */{ 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 + endTransform.pitch = 0; // fixes #3119 by pretending the map is not pitched; use endTransform.pitch = pitch to revert to the old behavior if ('center' in options) { toLngLat = LngLat.convert(options.center);