在OpenLayers 3中，動畫是隨處可見的，比如平移地圖時，地圖移動會有慣性，停止移動後，還會繼續沿着之前的方向移動一會。 比如下面這個demo地圖具有回到原始點的功能，一個是有動畫效果的，一個是沒有動畫效果的。我們先寫出來然後做一個直接的視覺對比：
1、地圖有無動畫的對比：
<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta content=always name=referrer>
<title>地圖動畫</title>
<link href="css/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 100%"></div>
<!--增加兩個按鈕，一個演示不帶動畫，一個演示帶動畫-->
<input type="button" value="回到原點-不帶動畫" οnclick="backNoAnim()">
<input type="button" value="回到原點-帶動畫" οnclick="backWithAnim()">
<script type="text/javascript">
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: ol.proj.transform(
[120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'),
zoom: 12
})
});
// 不帶動畫的實現
function backNoAnim() {
map.getView().setCenter(ol.proj.transform([120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'));
}
// 帶動畫的實現
function backWithAnim() {
// 這是openlayers5的動畫加載方式
map.getView().animate({
center: ol.proj.transform(
[120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'),
zoom: 12
})
//這是openlayers3的動畫加載方式
// var pan = ol.view.animate.pan({
// duration: 2000,
// source: (map.getView().getCenter())
// });
// // 注意： 使用beforeRender來添加
// map.beforeRender(pan);
// // 然後纔是重新設置地圖中心點到原來的位置
// map.getView().setCenter(ol.proj.transform([120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'));
}
</script>
</body>
</html>
大家可以運行代碼體驗一下！
2、利用postcompose事件做動畫
ol.Map的postcompose事件，這個事件在地圖渲染時都會觸發，而我們只要改變地圖上的某個feature或者layer或者其他任何東西，就會觸發重新渲染。 如果利用這個原理，我們不斷的改變feature的樣式，就會觸發postcompose，在這個事件的監聽器裏再改變feature的樣式，就又會觸發postcompose，從而一隻循環下去，出現動畫效果。
<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta content=always name=referrer>
<title>postcompose動畫</title>
<link href="css/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 100%"></div>
<script type="text/javascript">
var layer = new ol.layer.Vector({
source: new ol.source.Vector()
})
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
layer
],
target: 'map',
view: new ol.View({
center: ol.proj.transform(
[120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});
var circle = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform(
[120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'))
});
circle.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: 0,
stroke: new ol.style.Stroke({
color: 'red',
size: 1
})
})
}));
layer.getSource().addFeature(circle);
// 關鍵的地方在此：監聽postcompose事件，在裏面重新設置circle的樣式
var radius = 0;
map.on('postcompose', function(){
// 增大半徑，最大20
radius++;
radius = radius % 20;
// 設置樣式
circle.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: radius,
stroke: new ol.style.Stroke({
color: 'red',
size: 1
})
})
}));
})
</script>
</body>
</html>
運行看一下效果：
大家運行以後會發現有一個feature是一直閃動的。
好了，關於動畫就給大家講解到這兒了，其實API中還有很多動畫效果，大家可以去查閱API然後多動手試試！
下一節我們將進行實際項目中Geoserver發佈服務和一些地圖的增刪改查操作的講解，大家加油！