如何用css3做openLayers3的闪烁效果_地图坐标点缩放闪烁css3特效

最近在做地图上的一个故障指示器，  要求有故障时，此指示器会呈现不同的展现样式， 用闪烁最好了！

但openLayers3中没有闪烁的效果，所以就借助CSS3的动画效果了，反正openLayers3也是使用了h5+css的，它们通用。

最终的效果是：

第一步：

在你的地图HTML文件中加一个div:

<!-- 故障指示器的闪烁 -->
<div id="css_animation"></div>

就这么一条哦！不要怀疑呢！

第二步：给这个div写css3的样式
<style>

/** 地图上的故障处理器显示效果*/
#css_animation{
    height:50px;
    width:50px;
    border-radius: 25px;
    background: rgba(255, 0, 0, 0.9);
    transform: scale(0);
    animation: myfirst 3s;
    animation-iteration-count: infinite;
}
@keyframes myfirst{
    to{
        transform: scale(2);
        background: rgba(0, 0, 0, 0);
    }
}

</style>

这两步做好后，你用chrom和360浏览器浏览应该有一个红色的扩散的效果，如果没有，你要换浏览器了。

如何把它弄到地图上去呢？只需要
 

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([114.04911, 30.32815833]);

就可以了。

解释这段代码：首先，var point_div = document.getElementById("css_animation");获得具有动画效果的HTML元素；然后将其赋予 overlay 的 element 参数，overlay 还有一个参数是 positioning: 'center-center'，表示 HTML 元素相对于 overlay 的定位点的方位，”center-center” 表示元素中心对准定位点中心；最后 map.addOverlay(point_overlay); 将 overlay 添加到地图中，此时的 overlay 是不可见的，最后一行：point_overlay.setPosition([11468382.41282299,3502038.887913635]);设置了 overlay 可见元素（也就是具有动画的元素）的位置，这样动画元素就设置到相应的点了。

这样，我们就实现了原来文章开头的效果。

学到了什么呢？ 学到了openLayers3地图与h5+css3相结合的办法：如果想把H5和CSS的效果与地图相结合，可以那么，可以先做好HTML元素的效果，然后，用地图上的什么东西，把它当成一个element加入进去，它就进入了地图了。呵呵！

我们把html的dom加到openlayers以后又需要删除，该怎么删除呢？

openlayers已经给我们提供好参数了，通过getOverlays()可以获取到map上的所有overlays 代码如下

map.getOverlays().clear();

 

此文来源于：https://blog.csdn.net/qingyafan/article/details/49848455的实践成功！