利用postcompose事件做动画

前面的内置动画,几乎都是和地图浏览相关的,很多时候我们有更多的动画需求,在此向大家介绍另一种可以做出动画的方式。 那就是利用ol.Mappostcompose事件,这个事件在地图渲染时都会触发,而我们只要改变地图上的某个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的事件,也就可以照着上面的方式来实现动画了。