首先在less文件中创建动画,将动画绑定到类上:
@keyframes scale{
0% {
transform: scale(0);
// background-color: rgba(255, 255, 255, 0);
}
50% {
transform: scale(0.5);
// background-color: RGBA(29, 221, 146, 0.3);
}
70% {
// background-color: RGBA(29, 221, 146, 0.3);
}
100% {
transform: scale(1);
// background-color: RGBA(40, 223, 152, 0.1);
// opacity: 0.0;
}
}
.classScale{
animation: scale 2s linear infinite normal;
}
在创建覆盖物的方法内根据传入数据type不同决定是否出现光圈效果:
const option = {
position: point,
offset: new BMap.Size(-50, -50),
};
const valueLabel = new BMap.Label(`<div class=${item.type === 'car' ? style.classScale : ''} style='width:100px;height:100px;border:1px solid RGBA(40, 223, 152, 0.1);background-color:RGBA(40, 223, 152, 0.1);border-radius:50%;'></div>`, option);
valueLabel.setStyle({
border: 'none',
backgroundColor: 'RGBA(0,0,0,0)',
});
map.addOverlay(valueLabel);
头部要将less文件以下面的方式引入:
import style from '../../styles/views/Sensing.less';