openlayers通过overlay html5 css3设置图标闪烁效果

openlayers通过overlay html5 css3设置图标闪烁效果

页面中添加div,最好在map容器中

<div id="css_animation"></div>

css文件中添加样式,一定要卸载css文件中,否则会报错

#css_animation {
    height: 30px;//图标高
    width: 30px;//图标高
    border-radius: 25px;//圆形
    background: rgb(255, 0, 0);//颜色 可以为rgba()透明度
    transform: scale(0.2);//变换初始大小
    animation: myfirst 2s;//变换速度
    animation-iteration-count:infinite;//重复闪烁
    z-index: 200;
}

@keyframes myfirst {
    to {
        transform: scale(0.8);//变换结束大小
        background: rgba(255, 0, 0,0);//结束时颜色
    }
}

map中添加overlay

 var point_div = document.getElementById("css_animation");
 var point_overlay = new ol.Overlay({//定义为全局变量
            element: point_div,
            positioning: 'center-center'
        });
 map.addOverlay(point_overlay);

设置闪烁位置

point_overlay.setPosition([12904227.7304252871, 5035631.757232161]);

取消闪烁

point_overlay.setPosition(undefined);