1,创建逐渐淡化的动态线效果

1，创建一个面图层testlayer,设置图层对应的符号为testSty

2，在map的postcompose事件中动态改变系数ratio，这个ratio系数与testSty中线宽、颜色做关联。

3，在map的postcompose中时刻给testlayer重新设置符号

me.map.on("postcompose", function() {

            if (me.ratio < 1) {

            me.ratio += 0.02;

          }  else if (me.ratio >=1) {

            me.ratio =0.1;

          }
      testlayer.changed();
       //   testlayer.setStyle(testSty);   两个方法都可以重新渲染图层。

        });

var testSty = function(feature) {

          var g = feature.getGeometry();

          var c = g.getCoordinates();

          var styles = [

            new Style({

              fill: new Fill({

                color: "rgba(233,245,67,0.2)"

              }),

              zIndex: 1

            })

          ];

          styles.push(

            new Style({

              geometry: new LineString(c[0]),

              stroke: new Stroke({

                width: 40 * me.ratio,

                color: [255, 255, 0, 1-me.ratio]

              })

            }),

            new Style({

              geometry: new LineString(c[0]),

              stroke: new Stroke({ width: 4, color: "rgba(255,255,0,1)" })

            })

          );

          return styles;

        };

效果如下：

优化前

以上代码在chrome下没问题，但是在IE下会出现动画结束时会闪动，影响显示效果。对代码进行优化：

    if (me.ratio < 0.9) {

            me.ratio += 0.02;

          }  else if (me.ratio >=0.9) {

            me.ratio =0.1;

          }

优化后