Add animation example
This commit is contained in:
Tom Payne
@@ -0,0 +1,60 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||||
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||||
|
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
|
||||||
|
<link rel="stylesheet" href="examples.css" type="text/css">
|
||||||
|
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||||
|
<title>Animation example</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||||
|
<div class="navbar-inner">
|
||||||
|
<div class="container">
|
||||||
|
<a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
|
||||||
|
<ul class="nav pull-right">
|
||||||
|
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
|
||||||
|
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
|
||||||
|
<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-instanbul">Bounce to Instanbul</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="span4">
|
||||||
|
<h4 id="title">Animation example</h4>
|
||||||
|
<p id="shortdesc">Example animations.</p>
|
||||||
|
<div id="docs">
|
||||||
|
<p>See the <a href="animation.js" target="_blank">animation.js source</a> to see how this is done.</p>
|
||||||
|
</div>
|
||||||
|
<div id="tags">animation</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="loader.js?id=animation" type="text/javascript"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,122 @@
|
|||||||
|
goog.require('ol.Coordinate');
|
||||||
|
goog.require('ol.Map');
|
||||||
|
goog.require('ol.RendererHints');
|
||||||
|
goog.require('ol.View2D');
|
||||||
|
goog.require('ol.animation');
|
||||||
|
goog.require('ol.easing');
|
||||||
|
goog.require('ol.layer.TileLayer');
|
||||||
|
goog.require('ol.projection');
|
||||||
|
goog.require('ol.source.OpenStreetMap');
|
||||||
|
|
||||||
|
|
||||||
|
var london = ol.projection.transformWithCodes(
|
||||||
|
new ol.Coordinate(-0.12755, 51.507222), 'EPSG:4326', 'EPSG:3857');
|
||||||
|
var moscow = ol.projection.transformWithCodes(
|
||||||
|
new ol.Coordinate(37.6178, 55.7517), 'EPSG:4326', 'EPSG:3857');
|
||||||
|
var instanbul = ol.projection.transformWithCodes(
|
||||||
|
new ol.Coordinate(28.9744, 41.0128), 'EPSG:4326', 'EPSG:3857');
|
||||||
|
var rome = ol.projection.transformWithCodes(
|
||||||
|
new ol.Coordinate(12.5, 41.9), 'EPSG:4326', 'EPSG:3857');
|
||||||
|
var bern = ol.projection.transformWithCodes(
|
||||||
|
new ol.Coordinate(7.4458, 46.95), 'EPSG:4326', 'EPSG:3857');
|
||||||
|
|
||||||
|
var map = new ol.Map({
|
||||||
|
layers: [
|
||||||
|
new ol.layer.TileLayer({
|
||||||
|
source: new ol.source.OpenStreetMap()
|
||||||
|
})
|
||||||
|
],
|
||||||
|
renderers: ol.RendererHints.createFromQueryData(),
|
||||||
|
target: 'map',
|
||||||
|
view: new ol.View2D({
|
||||||
|
center: instanbul,
|
||||||
|
zoom: 6
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
var rotateLeft = document.getElementById('rotate-left');
|
||||||
|
rotateLeft.addEventListener('click', function() {
|
||||||
|
var rotateLeft = ol.animation.rotate({
|
||||||
|
duration: 2000,
|
||||||
|
rotation: -4 * Math.PI
|
||||||
|
});
|
||||||
|
map.addPreRenderFunction(rotateLeft);
|
||||||
|
}, false);
|
||||||
|
var rotateRight = document.getElementById('rotate-right');
|
||||||
|
rotateRight.addEventListener('click', function() {
|
||||||
|
var rotateRight = ol.animation.rotate({
|
||||||
|
duration: 2000,
|
||||||
|
rotation: 4 * Math.PI
|
||||||
|
});
|
||||||
|
map.addPreRenderFunction(rotateRight);
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
|
||||||
|
var panToLondon = document.getElementById('pan-to-london');
|
||||||
|
panToLondon.addEventListener('click', function() {
|
||||||
|
var pan = ol.animation.pan({
|
||||||
|
source: map.getView().getView2D().getCenter(),
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
map.addPreRenderFunction(pan);
|
||||||
|
map.getView().getView2D().setCenter(london);
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
var elasticToMoscow = document.getElementById('elastic-to-moscow');
|
||||||
|
elasticToMoscow.addEventListener('click', function() {
|
||||||
|
var pan = ol.animation.pan({
|
||||||
|
source: map.getView().getView2D().getCenter(),
|
||||||
|
duration: 2000,
|
||||||
|
easing: ol.easing.elastic
|
||||||
|
});
|
||||||
|
map.addPreRenderFunction(pan);
|
||||||
|
map.getView().getView2D().setCenter(moscow);
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
var bounceToInstanbul = document.getElementById('bounce-to-instanbul');
|
||||||
|
bounceToInstanbul.addEventListener('click', function() {
|
||||||
|
var pan = ol.animation.pan({
|
||||||
|
source: map.getView().getView2D().getCenter(),
|
||||||
|
duration: 2000,
|
||||||
|
easing: ol.easing.bounce
|
||||||
|
});
|
||||||
|
map.addPreRenderFunction(pan);
|
||||||
|
map.getView().getView2D().setCenter(instanbul);
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
var spinToRome = document.getElementById('spin-to-rome');
|
||||||
|
spinToRome.addEventListener('click', function() {
|
||||||
|
var duration = 2000;
|
||||||
|
var start = +new Date();
|
||||||
|
var pan = ol.animation.pan({
|
||||||
|
duration: duration,
|
||||||
|
source: map.getView().getView2D().getCenter(),
|
||||||
|
start: start
|
||||||
|
});
|
||||||
|
var rotate = ol.animation.rotate({
|
||||||
|
duration: duration,
|
||||||
|
rotation: 2 * Math.PI,
|
||||||
|
start: start
|
||||||
|
});
|
||||||
|
map.addPreRenderFunctions([pan, rotate]);
|
||||||
|
map.getView().getView2D().setCenter(rome);
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
var flyToBern = document.getElementById('fly-to-bern');
|
||||||
|
flyToBern.addEventListener('click', function() {
|
||||||
|
var duration = 2000;
|
||||||
|
var start = +new Date();
|
||||||
|
var pan = ol.animation.pan({
|
||||||
|
duration: duration,
|
||||||
|
source: map.getView().getView2D().getCenter(),
|
||||||
|
start: start
|
||||||
|
});
|
||||||
|
var bounce = ol.animation.bounce({
|
||||||
|
duration: duration,
|
||||||
|
resolution: 4 * map.getView().getView2D().getResolution(),
|
||||||
|
start: start
|
||||||
|
});
|
||||||
|
map.addPreRenderFunctions([pan, bounce]);
|
||||||
|
map.getView().getView2D().setCenter(bern);
|
||||||
|
}, false);
|
||||||
Reference in New Issue
Block a user