通过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);
}
}