1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.easing');
|
4 | goog.require('ol.layer.Tile');
|
5 | goog.require('ol.proj');
|
6 | goog.require('ol.source.OSM');
|
7 |
|
8 | var london = ol.proj.fromLonLat([-0.12755, 51.507222]);
|
9 | var moscow = ol.proj.fromLonLat([37.6178, 55.7517]);
|
10 | var istanbul = ol.proj.fromLonLat([28.9744, 41.0128]);
|
11 | var rome = ol.proj.fromLonLat([12.5, 41.9]);
|
12 | var bern = ol.proj.fromLonLat([7.4458, 46.95]);
|
13 |
|
14 | var view = new ol.View({
|
15 | center: istanbul,
|
16 | zoom: 6
|
17 | });
|
18 |
|
19 | var map = new ol.Map({
|
20 | target: 'map',
|
21 | layers: [
|
22 | new ol.layer.Tile({
|
23 | preload: 4,
|
24 | source: new ol.source.OSM()
|
25 | })
|
26 | ],
|
27 |
|
28 |
|
29 | loadTilesWhileAnimating: true,
|
30 | view: view
|
31 | });
|
32 |
|
33 |
|
34 | function bounce(t) {
|
35 | var s = 7.5625, p = 2.75, l;
|
36 | if (t < (1 / p)) {
|
37 | l = s * t * t;
|
38 | } else {
|
39 | if (t < (2 / p)) {
|
40 | t -= (1.5 / p);
|
41 | l = s * t * t + 0.75;
|
42 | } else {
|
43 | if (t < (2.5 / p)) {
|
44 | t -= (2.25 / p);
|
45 | l = s * t * t + 0.9375;
|
46 | } else {
|
47 | t -= (2.625 / p);
|
48 | l = s * t * t + 0.984375;
|
49 | }
|
50 | }
|
51 | }
|
52 | return l;
|
53 | }
|
54 |
|
55 |
|
56 | function elastic(t) {
|
57 | return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
|
58 | }
|
59 |
|
60 | function onClick(id, callback) {
|
61 | document.getElementById(id).addEventListener('click', callback);
|
62 | }
|
63 |
|
64 | onClick('rotate-left', function() {
|
65 | view.animate({
|
66 | rotation: view.getRotation() + Math.PI / 2
|
67 | });
|
68 | });
|
69 |
|
70 | onClick('rotate-right', function() {
|
71 | view.animate({
|
72 | rotation: view.getRotation() - Math.PI / 2
|
73 | });
|
74 | });
|
75 |
|
76 | onClick('rotate-around-rome', function() {
|
77 |
|
78 | var rotation = view.getRotation();
|
79 | view.animate({
|
80 | rotation: rotation + Math.PI,
|
81 | anchor: rome,
|
82 | easing: ol.easing.easeIn
|
83 | }, {
|
84 | rotation: rotation + 2 * Math.PI,
|
85 | anchor: rome,
|
86 | easing: ol.easing.easeOut
|
87 | });
|
88 | });
|
89 |
|
90 | onClick('pan-to-london', function() {
|
91 | view.animate({
|
92 | center: london,
|
93 | duration: 2000
|
94 | });
|
95 | });
|
96 |
|
97 | onClick('elastic-to-moscow', function() {
|
98 | view.animate({
|
99 | center: moscow,
|
100 | duration: 2000,
|
101 | easing: elastic
|
102 | });
|
103 | });
|
104 |
|
105 | onClick('bounce-to-istanbul', function() {
|
106 | view.animate({
|
107 | center: istanbul,
|
108 | duration: 2000,
|
109 | easing: bounce
|
110 | });
|
111 | });
|
112 |
|
113 | onClick('spin-to-rome', function() {
|
114 |
|
115 | var center = view.getCenter();
|
116 | view.animate({
|
117 | center: [
|
118 | center[0] + (rome[0] - center[0]) / 2,
|
119 | center[1] + (rome[1] - center[1]) / 2
|
120 | ],
|
121 | rotation: Math.PI,
|
122 | easing: ol.easing.easeIn
|
123 | }, {
|
124 | center: rome,
|
125 | rotation: 2 * Math.PI,
|
126 | easing: ol.easing.easeOut
|
127 | });
|
128 | });
|
129 |
|
130 | function flyTo(location, done) {
|
131 | var duration = 2000;
|
132 | var zoom = view.getZoom();
|
133 | var parts = 2;
|
134 | var called = false;
|
135 | function callback(complete) {
|
136 | --parts;
|
137 | if (called) {
|
138 | return;
|
139 | }
|
140 | if (parts === 0 || !complete) {
|
141 | called = true;
|
142 | done(complete);
|
143 | }
|
144 | }
|
145 | view.animate({
|
146 | center: location,
|
147 | duration: duration
|
148 | }, callback);
|
149 | view.animate({
|
150 | zoom: zoom - 1,
|
151 | duration: duration / 2
|
152 | }, {
|
153 | zoom: zoom,
|
154 | duration: duration / 2
|
155 | }, callback);
|
156 | }
|
157 |
|
158 | onClick('fly-to-bern', function() {
|
159 | flyTo(bern, function() {});
|
160 | });
|
161 |
|
162 | function tour() {
|
163 | var locations = [london, bern, rome, moscow, istanbul];
|
164 | var index = -1;
|
165 | function next(more) {
|
166 | if (more) {
|
167 | ++index;
|
168 | if (index < locations.length) {
|
169 | var delay = index === 0 ? 0 : 750;
|
170 | setTimeout(function() {
|
171 | flyTo(locations[index], next);
|
172 | }, delay);
|
173 | } else {
|
174 | alert('Tour complete');
|
175 | }
|
176 | } else {
|
177 | alert('Tour cancelled');
|
178 | }
|
179 | }
|
180 | next(true);
|
181 | }
|
182 |
|
183 | onClick('tour', tour);
|