利用postcompose事件做动画

前面的内置动画，几乎都是和地图浏览相关的，很多时候我们有更多的动画需求，在此向大家介绍另一种可以做出动画的方式。 那就是利用ol.Map的postcompose事件，这个事件在地图渲染时都会触发，而我们只要改变地图上的某个feature或者layer或者其他任何东西，就会触发重新渲染。 如果利用这个原理，我们不断的改变feature的样式，就会触发postcompose，在这个事件的监听器里再改变feature的样式，就又会触发postcompose，从而一直循环下去，出现动画效果。 比如像下面这样：

地图中间的小圆圈，不断的重复变大动画，代码如下：

<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(
              [104, 30], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
        })
    });

    var circle = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform(
              [104, 30], '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>

使用过Javascript做动画的同学可能会想，为什么弄的这么麻烦，直接用requestAnimationFrame不就行了？ 是的，我也这么认为，这个会比较简单，但如果你非要用OpenLayers 3的事件，也就可以照着上面的方式来实现动画了。