使用overlay實現地圖預警閃爍動畫

 通過feature獲取座標點實現overlay

var pointsFeatures = mapObj.getFeatures('points1Layer');
console.log(pointsFeatures);
for (var i = 0; i < pointsFeatures.length; i++) {
  var point_div = document.createElement('div');
  point_div.className = "css_animation";
  point_overlay = new ol.Overlay({
    element: point_div,
    positioning: 'center-center',
    stopEvent: false,
  });
  map.addOverlay(point_overlay);
  point_overlay.setPosition(pointsFeatures[i].getGeometry().getCoordinates());
}

 css部分

.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;
  z-index: -1;
}

@keyframes myfirst {
  to {
    transform: scale(2);
    background: rgba(0, 0, 0, 0);
  }
}