ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #669 from twpayne/more-animations

Browse Source 
Minor changes to the animation example
This commit is contained in:
Tom Payne
2013-04-29 02:15:14 -07:00
parent 5bfef2805d 390cc17161
commit ca7081bde3
2 changed files with 38 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
examples/animation.html
View File

@@ -30,15 +30,20 @@
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<button id="rotate-left"><i class="icon-arrow-left"></i></button>
<button>Rotate</button>
<button id="rotate-right"><i class="icon-arrow-right"></i></button>
</div>
<button id="pan-to-london">Pan to London</button>
<button id="elastic-to-moscow">Elastic to Moscow</button>
<button id="bounce-to-istanbul">Bounce to Istanbul</button>
<button id="spin-to-rome">Spin to Rome</button>
<button id="fly-to-bern">Fly to Bern</button>
</div>
<div class="row-fluid">
<div class="span12">
<button id="rotate-left"><i class="icon-arrow-left"></i></button>
<button id="rotate-right"><i class="icon-arrow-right"></i></button>
<button id="pan-to-london">Pan to London</button>
<button id="elastic-to-moscow">Elastic to Moscow</button>
<button id="bounce-to-istanbul">Bounce to Istanbul</button>
<button id="spin-to-rome">Spin to Rome</button>
<button id="fly-to-bern">Fly to Bern</button>
<button id="spiral-to-madrid">Spiral to Madrid</button>
</div>
</div>
<div class="row-fluid">

26
examples/animation.js
View File

@@ -18,6 +18,8 @@ var rome = ol.projection.transform(
[12.5, 41.9], 'EPSG:4326', 'EPSG:3857');
var bern = ol.projection.transform(
[7.4458, 46.95], 'EPSG:4326', 'EPSG:3857');
var madrid = ol.projection.transform(
[-3.683333, 40.4], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View2D({
// the view's initial state
@@ -37,7 +39,6 @@ var map = new ol.Map({
view: view
});
var rotateLeft = document.getElementById('rotate-left');
rotateLeft.addEventListener('click', function() {
var rotateLeft = ol.animation.rotate({
@@ -123,3 +124,26 @@ flyToBern.addEventListener('click', function() {
map.addPreRenderFunctions([pan, bounce]);
view.setCenter(bern);
}, false);
var spiralToMadrid = document.getElementById('spiral-to-madrid');
spiralToMadrid.addEventListener('click', function() {
var duration = 2000;
var start = +new Date();
var pan = ol.animation.pan({
duration: duration,
source: view.getCenter(),
start: start
});
var bounce = ol.animation.bounce({
duration: duration,
resolution: 2 * view.getResolution(),
start: start
});
var rotate = ol.animation.rotate({
duration: duration,
rotation: -4 * Math.PI,
start: start
});
map.addPreRenderFunctions([pan, bounce, rotate]);
view.setCenter(madrid);
}, false);