OpenLayers学习笔记高级篇（三、地图动画）

在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="回到原点-不带动画" onclick="backNoAnim()">
	<input type="button" value="回到原点-带动画" onclick="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发布服务和一些地图的增删改查操作的讲解，大家加油！