Skip to content

Commit 69b0824

Browse files
joswinterjoswinter
committed
Reworked easeTo to fix wrong direction bug
Continues on changes in mapbox#3130 pull request
1 parent 10315c0 commit 69b0824

File tree

2 files changed

+115
-6
lines changed

2 files changed

+115
-6
lines changed

‎debug/vertical.html

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset='utf-8' />
5+
<title></title>
6+
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
7+
<link rel='stylesheet' href='/dist/mapbox-gl.css' />
8+
<script src='/dist/mapbox-gl-dev.js'></script>
9+
<script src='/debug/access_token_generated.js'></script>
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.min.js"></script>
11+
<style>
12+
body { margin:0; padding:0; }
13+
#map { position:absolute; top:0; bottom:0; width:100%; }
14+
</style>
15+
</head>
16+
<body>
17+
18+
<style type='text/css'>
19+
#info {
20+
display: block;
21+
position: relative;
22+
margin: 0px auto;
23+
width: 50%;
24+
padding: 10px;
25+
border: none;
26+
border-radius: 3px;
27+
font-size: 12px;
28+
text-align: center;
29+
color: #222;
30+
background: #fff;
31+
}
32+
</style>
33+
<div id='map'></div>
34+
<pre id='info'></pre>
35+
<script>
36+
var map = new mapboxgl.Map({
37+
container: 'map', // container id
38+
style: 'mapbox://styles/mapbox/streets-v9',//'mapbox://styles/gisfeedback/ciwmwq2gb00fa2ppabho4z39c/', //stylesheet location
39+
center: [144.9, -37.83],
40+
zoom: 15,
41+
minZoom: 1,
42+
pitch: 45
43+
});
44+
45+
var posNo = 0;
46+
var positions = [
47+
[144.9, -37.83, 15],
48+
[144.9, -37.87, 15]
49+
];
50+
function moveCamera() {
51+
var pos = positions[posNo];
52+
posNo = (posNo + 1) % positions.length;
53+
map.easeTo({
54+
center: [pos[0], pos[1]],
55+
zoom: pos[2],
56+
duration: 2000
57+
});
58+
}
59+
map.on('moveend', _ => setTimeout(moveCamera, 2000));
60+
map.on('load', _ => setTimeout(moveCamera, 2000));
61+
62+
var max = 0;
63+
var min = -100;
64+
65+
window.setInterval(function(){
66+
lat = Math.round(map.transform._center.lat * 10000) / 10000;
67+
max = Math.min(max, lat);
68+
min = Math.max(min, lat);
69+
document.getElementById('info').innerHTML =
70+
'latitude: ' + JSON.stringify(lat) + '<br />' +
71+
'max: ' + JSON.stringify(max) + '<br />' +
72+
'min: ' + JSON.stringify(min);
73+
}, 5);
74+
</script>
75+
</body>
76+
</html>

‎src/ui/camera.js

+39-6
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const LngLat = require('../geo/lng_lat');
77
const LngLatBounds = require('../geo/lng_lat_bounds');
88
const Point = require('point-geometry');
99
const Evented = require('../util/evented');
10+
const Transform = require('../geo/transform');
1011

1112
/**
1213
* Options common to {@link Map#jumpTo}, {@link Map#easeTo}, and {@link Map#flyTo},
@@ -492,13 +493,26 @@ class Camera extends Evented {
492493
startZoom = this.getZoom(),
493494
startBearing = this.getBearing(),
494495
startPitch = this.getPitch(),
496+
startCenter = tr.center,
495497

496498
zoom = 'zoom' in options ? +options.zoom : startZoom,
497499
bearing = 'bearing' in options ? this._normalizeBearing(options.bearing, startBearing) : startBearing,
498500
pitch = 'pitch' in options ? +options.pitch : startPitch;
499501

500-
let toLngLat,
501-
toPoint;
502+
let toLngLat,
503+
toPoint,
504+
offsetLocation,
505+
toLocation,
506+
fromLocation,
507+
endTransform;
508+
509+
// Setup a Transform representing the state of the map at the end of the transition
510+
endTransform = new Transform();
511+
endTransform.center = tr.center;
512+
endTransform.resize(tr.width, tr.height);
513+
endTransform.zoom = zoom;
514+
endTransform.bearing = bearing;
515+
endTransform.pitch = 0; // fixes #3119 by pretending the map is not pitched; use pitch = 0 to revert to the old behavior
502516

503517
if ('center' in options) {
504518
toLngLat = LngLat.convert(options.center);
@@ -511,8 +525,6 @@ class Camera extends Evented {
511525
toLngLat = tr.pointLocation(toPoint);
512526
}
513527

514-
const fromPoint = tr.locationPoint(toLngLat);
515-
516528
if (options.animate === false) options.duration = 0;
517529

518530
this.zooming = (zoom !== startZoom);
@@ -531,11 +543,30 @@ class Camera extends Evented {
531543
this.fire('zoomstart', eventData);
532544
}
533545

546+
offsetLocation = endTransform.pointLocation(toPoint);
547+
fromLocation = endTransform.pointLocation(endTransform.centerPoint);
548+
549+
toLocation = LngLat.convert([
550+
toLngLat.lng - (offsetLocation.lng - fromLocation.lng),
551+
toLngLat.lat - (offsetLocation.lat - fromLocation.lat)
552+
]);
553+
534554
clearTimeout(this._onEaseEnd);
535555

536556
this._ease(function (k) {
557+
// When zooming we need to scale our lat/lon interpolation because the distances change over the course of the transition
558+
var k2 = k,
559+
deltaZoom = zoom - startZoom,
560+
totalDistanceExpansion = Math.pow(0.5, deltaZoom) - 1,
561+
currentDelta,
562+
currentDistanceExpansion;
563+
537564
if (this.zooming) {
538565
tr.zoom = interpolate(startZoom, zoom, k);
566+
currentDelta = tr.zoom - startZoom;
567+
currentDistanceExpansion = Math.pow(0.5, currentDelta) - 1;
568+
569+
k2 = currentDistanceExpansion / totalDistanceExpansion;
539570
}
540571

541572
if (this.rotating) {
@@ -545,8 +576,10 @@ class Camera extends Evented {
545576
if (this.pitching) {
546577
tr.pitch = interpolate(startPitch, pitch, k);
547578
}
548-
549-
tr.setLocationAtPoint(toLngLat, fromPoint.add(toPoint.sub(fromPoint)._mult(k)));
579+
580+
var lng = interpolate(startCenter.lng, toLocation.lng, k2);
581+
var lat = interpolate(startCenter.lat, toLocation.lat, k2);
582+
tr.center = LngLat.convert([lng, lat]);
550583

551584
this.fire('move', eventData);
552585
if (this.zooming) {

0 commit comments

Comments
 (0)