openlayers 展示gif的2种方案

openlayers官方API上是不支持gif的(ol.style.Icon)，但是在openlayers6，官网给出了一个使用gifler插件的方式来展示gif图标的效果（经测试，在openlayers4 openlayers5也是支持的），这种实现方案可以替换之前常用展示gif的方法，先使用html代码段加入gif图片，再用overlay渲染的方式，这种方式最大的问题是使用overlay渲染的会置顶于openlayers，而gifler渲染可以通过zIndex方式控制显示在想要展示的层级（不一定时最顶层），而且使用gifler可以把动画效果代码放在底层，可以优化代码逻辑。
具体demo见官网地址：
https://openlayers.org/en/latest/examples/animated-gif.html

使用overlay方式加载gif的例子

 let gifDiv = document.getElementById('marks');
        let lyr = new ol.Overlay({
            id: "overlay",
            position: [0, 0],//默认空
            positioning: 'center-bottom',
            element: gifDiv,//绑定上面添加的元素
            //stopEvent: false,
            offset: [-13.5, -40]//图片偏移量
        });
        encMap.encmap.addOverlay(lyr);
        var src = './assets/green.gif';//拼接图片地址
        document.getElementById('marks').style.backgroundImage = 'url(' + src + ')';
        lyr.setPosition([12970694.29785, 4743563.564]); //显示  
    }