openlaleyrs实现动态样式

参考超图的案列，利用postrender事件监听重复触发方法，在方法中重设vectorContext的样式来实现。
官方示例：超图-动画要素图

官方对每个加入的feature都单独创建了postrender事件监听，然后在动画结束后销毁，但是如果要做循环播放的动画，事件就不能被销毁。随之而来的问题就是feature越多监听也越多，浏览器就会卡。
因此将代码逻辑简化，只设置了一个监听，方法中直接改变所有的要素样式。
改动代码如下：

        var source = new ol.source.Vector({
            wrapX: false
        });
        var fs = []
        source.on('addfeature', function (e) {
            //把添加的feature都放入一个数组中，之后循环对数组中的要素做动态效果，
            //当然也可以从layer的source中去features，直接对全部要素做效果
            fs.push(e.feature)
        });
        var vector = new ol.layer.Vector({
            source: source
        });
        var r = 0
        var isAdd = true
        function flashAll(event){
            // var duration = 3000;
            // var start = new Date().getTime();
            // var frameState = event.frameState;
            // var elapsed = frameState.time - start;
            // var elapsedRatio = elapsed / duration;
            //使用全局变量r来控制半径很灵活，当然也可以用event.frameState.time来根据时间计算出一个值
            var elapsedRatio = r;
            if(isAdd){r=r+0.01}else{r=r-0.01}
            if(r>=1 || r<=0)isAdd=!isAdd
            for (var i=0 ;i<fs.length;i++){
                var feature = fs[i];
                // ol6 废除了 event.vectorContext 接口，通过 ol.render.getVectorContext 来获取 vectorContext
                var vectorContext = new ol.render.getVectorContext(event);
                var flashGeom = feature.getGeometry().clone();
                //easing类的方法把输入的0到1的数字转换为渐进曲线上的新值，使得连续变化的数字有渐进效果
                var radius = ol.easing.inAndOut(elapsedRatio) * 25 + 5;
                var opacity = ol.easing.inAndOut(1 - elapsedRatio);
                var style = new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: radius,
                        stroke: new ol.style.Stroke({
                            color: 'rgba(255, 0, 0, ' + (opacity*0.5+0.5) + ')',
                            width: 0.25 + opacity
                });
                vectorContext.setStyle(style);
                vectorContext.drawGeometry(flashGeom);
            //重要，让postrender事件不断触发来不断地重绘要素style，从而实现动态变化的效果
            map.render();
        vector.on('postrender', flashAll);
        map.addLayer(vector);
        //这个方法是原案例中为图层添加随机feature的
        window.setInterval(addRandomFeature, 1000);
记录一下原理，之后配合style就可以做各种效果了。
      image: new Icon({
        crossOrigin: "anonymous",
        src: require(`@/assets/partsManagement/选中.png`),
        anchor: [0.5, 1],
        scale: 1
				地图上经常需要标出标注，标注点击之后要有相应的变化来达到一定的效果。此实例即在地图上添加图片标注，点击标注，更换标注图片，再点击其他标注，上一个标注恢复原来的标注图片。     /*初始化地图*/
      var map;
      function initmap(){          
          map= new ol.Map({
            layers: lay
				概述：前面的文章中，讲述了Arcgis for js中聚类分析与展示，在本文，讲述如何在Openlayers2中聚类分析的实现。实现效果：实现：主要分为：1、点的聚类；2、聚类点随着地图缩放的更新；3、聚类点的详细。1、点的聚类与更新            var style = new OpenLayers.Style({
                pointRadius: "${ra...
				import "ol/ol.css";
import { Map, View } from "ol";
import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
import GeoJSON from "ol/format/GeoJSON";
import { Fill, Stroke, Styl.
				文章目录1. 写在前面1.1 实现方式一1.2 实现方式二1.3 实现方式三2. 效果图3. 核心代码4. 完整代码
1. 写在前面
实现点的闪烁效果可以有很多种，下面列举几个常见的实现方式：
1.1 实现方式一
可以使用overlay去实现，overlay原理就是创建一个div，通过css样式去控制闪烁（如：如何用css3做openLayers3的闪烁效果），想要遍历实现的话，就创建多个overlay的div。这种也是网上百度出来最多的一种。
1.2 实现方式二
使用openlayers3 的postco