- 通过
view.animate设置图层视图位置(默认动画)
- 通过
view.animate({anchor,easing})设置自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<title>View Animation</title>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
<style>
.map {
width: 100%;
height:400px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<button id="rotate-left" title="Rotate clockwise">↻</button>
<button id="rotate-right" title="Rotate counterclockwise">↺</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="rotate-around-rome">Rotate around Rome</button>
<button id="tour">Take a tour</button>
<script src="index.js"></script>
</body>
</html>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {easeIn, easeOut} from 'ol/easing';
import TileLayer from 'ol/layer/Tile';
import {fromLonLat} from 'ol/proj';
import OSM from 'ol/source/OSM';
//从EPSG:4326 经纬度坐标转化为EPSG:3857平面坐标系坐标
var london = fromLonLat([-0.12755, 51.507222]);
var moscow = fromLonLat([37.6178, 55.7517]);
var istanbul = fromLonLat([28.9744, 41.0128]);
var rome = fromLonLat([12.5, 41.9]);
var bern = fromLonLat([7.4458, 46.95]);
var view = new View({
center: istanbul,
zoom: 6
});
var map = new Map({
target: 'map',
layers: [
new TileLayer({
preload: 4,
source: new OSM()
})
],
view: view
});
// A bounce easing method (from https://github.com/DmitryBaranovskiy/raphael).
function bounce(t) {
var s = 7.5625;
var p = 2.75;
var 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;
}
// An elastic easing method (from https://github.com/DmitryBaranovskiy/raphael).
function elastic(t) {
return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
}
function onClick(id, callback) {
document.getElementById(id).addEventListener('click', callback);
}
//逆时针90°
onClick('rotate-left', function() {
view.animate({
rotation: view.getRotation() + Math.PI / 2
});
});
//顺时针90°
onClick('rotate-right', function() {
view.animate({
rotation: view.getRotation() - Math.PI / 2
});
});
//旋转漫游
onClick('rotate-around-rome', function() {
// 旋转漫游以最短曲线进行，所以动画分为两块
var rotation = view.getRotation();
view.animate({
rotation: rotation + Math.PI,
anchor: rome,
easing: easeIn
}, {
rotation: rotation + 2 * Math.PI,
anchor: rome,
easing: easeOut
});
});
onClick('pan-to-london', function() {
view.animate({
center: london,
duration: 2000
});
});
//弹跳1
onClick('elastic-to-moscow', function() {
view.animate({
center: moscow,
duration: 2000,
easing: elastic
});
});
//弹跳2
onClick('bounce-to-istanbul', function() {
view.animate({
center: istanbul,
duration: 2000,
easing: bounce
});
});
//旋转
onClick('spin-to-rome', function() {
// 旋转以最短曲线进行，所以动画分为两块
var center = view.getCenter();
view.animate({
center: [
center[0] + (rome[0] - center[0]) / 2,
center[1] + (rome[1] - center[1]) / 2
],
rotation: Math.PI,
easing: easeIn
}, {
center: rome,
rotation: 2 * Math.PI,
easing: easeOut
});
});
function flyTo(location, done) {
var duration = 2000;
var zoom = view.getZoom();
var parts = 2;
var called = false;
function callback(complete) {
--parts;
if (called) {
return;
}
if (parts === 0 || !complete) {
called = true;
done(complete);
}
}
view.animate({
center: location,
duration: duration
}, callback);
view.animate({
zoom: zoom - 1,
duration: duration / 2
}, {
zoom: zoom,
duration: duration / 2
}, callback);
}
onClick('fly-to-bern', function() {
flyTo(bern, function() {});
});
function tour() {
var locations = [london, bern, rome, moscow, istanbul];
var index = -1;
function next(more) {
if (more) {
++index;
if (index < locations.length) {
var delay = index === 0 ? 0 : 750;
setTimeout(function() {
flyTo(locations[index], next);
}, delay);
} else {
alert('Tour complete');
}
} else {
alert('Tour cancelled');
}
}
next(true);
}
onClick('tour', tour);
网友评论