Openlayers之动画效果
1、新建一个html页面，引入ol.js和ol.css文件，然后在body中创建一个div标签，用来作为地图加载的容器，再创建6个Button按钮，分别执行6中不同的动画；
2、代码实现
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="../css/ol.css" rel="stylesheet" />
<script src="../lib/ol/ol.js"></script>
<style type="text/css">
#menu
{
position:absolute;
bottom :10px;
z-index:2000;
}
</style>
<script type="text/javascript">
window.onload = function () {
//实例化地图视图对象
var view = new ol.View({
center: [12950000, 4860000],
zoom:7
});
//实例化地图对象
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source:new ol.source.OSM()
})
],
loadTilesWhileAnimating: true,
view:view
});
//定义不同城市的地理位置坐标
var shenyang = ol.proj.fromLonLat([123.24, 41.50]);
var beijing = ol.proj.fromLonLat([116.28, 39.54]);
var shanghai = ol.proj.fromLonLat([121.29, 31.14]);
var wuhan = ol.proj.fromLonLat([114.21, 30.37]);
var guangzhou = ol.proj.fromLonLat([113.15, 23.08]);
var haikou = ol.proj.fromLonLat([110.20, 20.02]);
//旋转定位到沈阳
document.getElementById('rotate').onclick = function () {
//旋转动画
var rotate = ol.animation.rotate({
//动画持续时间
duration: 2000,
//地图旋转角度
rotation: -4*Math.PI
});
//在地图渲染之前执行旋转动画
map.beforeRender(rotate);
//设置视图中心点坐标为沈阳
view.setCenter(shenyang);
};
//弹性定位到北京
document.getElementById('elastic').onclick = function () {
//平移动画
var pan = ol.animation.pan({
//动画持续时间
duration: 2000,
//Todo easing:The easing function to use（官方API）参数表示要使用的easing方法
//自己定义的easing方法（elastic(t)）明明有一个参数t（Input between 0 and 1），可是此处为什么不用传参
//openlayers自带的一些动画效果函数如ol.easing.upAndDown、ol.easing.inAndOut等，感觉不太好，动画有些生硬
easing: elastic,
//The location to start panning from 从哪个位置开始进行平移
source:view.getCenter()
});
//在地图渲染之前执行平移动画
map.beforeRender(pan);
//设置视图中心点坐标为北京
view.setCenter(beijing);
};
//反弹定位到上海
document.getElementById('bounce').onclick = function () {
var pan = ol.animation.pan({
duration: 2000,
easing: bounce,
source: view.getCenter(),
});
map.beforeRender(pan);
view.setCenter(shanghai);
};
//自旋定位到武汉
document.getElementById('spin').onclick = function () {
var duration = 2000;
var start = +new Date();//开始时间，+new Date()将当前时间转化为毫秒数
var pan = ol.animation.pan({
duration: duration,
source: view.getCenter(),
//The start time of the animation 动画开始的时间
start:start
});
var rotate = ol.animation.rotate({
duration: duration,
rotation: 2 * Math.PI,
start:start
});
map.beforeRender(pan, rotate);
view.setCenter(wuhan);
};
//飞行定位到广州
document.getElementById('fly').onclick = 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,
//The resolution to start the bounce from 开始反弹动画时的地图分辨率
resolution: 4 * view.getResolution(),
start:start
});
map.beforeRender(pan, bounce);
view.setCenter(guangzhou);
};
//螺旋定位到海口
document.getElementById('spiral').onclick = 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.beforeRender(pan, bounce, rotate);
view.setCenter(haikou);
};
};
//弹性值
function elastic(t) {
return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
}
//反弹值
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;
}
</script>
</head>
<body>
<div id="map">
<div id="menu">
<button id="rotate">旋转定位到沈阳</button>
<button id="elastic">弹性定位到北京</button>
<button id="bounce">反弹定位到上海</button>
<button id="spin">自旋定位到武汉</button>
<button id="fly">飞行定位到广州</button>
<button id="spiral">螺旋定位到海口</button>
</div>
</div>
</body>
</html>
3、结果展示
转载自：https://blog.csdn.net/SmileCoffin/article/details/54972630
