react+百度地图 覆盖物出现动态光圈效果

首先在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';