openlayers 顯示閃爍的圖標點

  

思路：需要在html代碼生成N個要閃爍的點通過遍歷生成html代碼 ，然後再通過座標定位點到相應的位置

$("#map").append("<div id='css_animation" + i + "' ><span class='pulse-icon1' style='background-color: #d0639c;z-index:9999999'><span class='item' style='box-shadow: 0 0 5px 2px #2f8'></span></span><div>");

 

                    var point_div = document.getElementById("css_animation" + i);

                    var point_overlay = new ol.Overlay({

                        element: point_div,

                        positioning: 'center-center'

                    });

                    map.addOverlay(point_overlay);

                    point_overlay.setPosition(p);

 

樣式文件

.pulse-icon1 {

1. display: inline-block;
2. width: 15px;
3. height: 15px;
4. border-radius: 100%;
5. background-color: red;
6. z-index: 999999;
7. position: relative;
8. box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);

}

.item {

1. box-shadow: 0 0 6px 2px #2f8;
2. animation: pulsate 1s ease-out;
3. animation-iteration-count: infinite;
4. animation-delay: 1.1s;
5. -webkit-border-radius: 100%;
6. border-radius: 100%;
7. height: 300%;
8. width: 300%;
9. animation: pulsate 2s infinite;
10. position: absolute;
11. margin: -100% 0 0 -100%;

}

 

效果