1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107
|
<!doctype html>
<html>
<head>
<title>Animation Examples</title>
<link rel="stylesheet" href="../assets/ol4/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/sample.css" type="text/css" />
<script src="../assets/ol4/js/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<button onclick="rotateLeft();">rl</button>
<button onclick="rotateRight();">rr</button>
<button onclick="doBounce(london);">Bounce To London</button>
<button onclick="doBounce(rome);">Bounce To Rome</button>
<button onclick="doPan(london);">Pan To London</button>
<button onclick="doPan(rome);">Pan To Rome</button>
<button onclick="doRotate();">Rotate</button>
<button onclick="doZoom(-1);">Zoom Out</button>
<button onclick="doZoom(1);">Zoom In</button>
<script>
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
var rome = ol.proj.transform([12.5, 41.9], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
center: london,
zoom: 6
});
var map = new ol.Map({
target: 'map',
layers: [layer],
view: view
});
function rotateLeft() {
view.animate({
rotation: view.getRotation() + Math.PI / 2
});
}
function rotateRight () {
view.animate({
rotation: view.getRotation() - Math.PI / 2
});
}
function bounce(t) {
var s = 7.5625, p = 2.75, l;
if (t < (1 / p)) {
l = s * t * t;
} else {
if (t < (2 / p)) {
t -= (1.5 / p);
l = s * t * t + 0.75;
} else {
if (t < (2.5 / p)) {
t -= (2.25 / p);
l = s * t * t + 0.9375;
} else {
t -= (2.625 / p);
l = s * t * t + 0.984375;
}
}
}
return l;
}
function doBounce(l) {
view.animate({
center: l,
duration: 2000,
easing: bounce
});
}
function doPan(l) {
view.animate({
center: l,
duration: 2000
});
}
function doRotate() {
view.animate({
rotation: view.getRotation() + Math.PI * 2
});
}
function doZoom(v) {
if (v == 1)
view.animate({
zoom: view.getZoom() + 1
});
if (v == -1)
view.animate({
zoom: view.getZoom() -1
});
}
</script>
</body>
</html> |
Partager