最近在做地圖上的一個故障指示器，  要求有故障時，此指示器會呈現不同的展現樣式， 用閃爍最好了！

但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]);

這樣，我們就實現了原來文章開頭的效果。

學到了什麼呢？ 學到了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的實踐成功！