vue3中openlayers绘制多个Overlay

项目需求是要在地图上显示多个div，之前使用Overlay绘制单个显示正常，结果绘制多个的时候就显示一个，不过也解决了，下面我就把核心代码贴一下，如果有什么问题可以留言，我就是提供一个思路。
效果图

上面图片的信号塔是动态显示的，一般可以使用动态图片，但是我觉得动态图片达不到我想要的效果，所以改成了svg加css做出的动态效果图。

  <span v-for="(item, index) in locationList" :key="index">
    <img
    class="css_animation"
    ref="animationdiv"
    src="../../assets/Signaltower.svg"
    alt=""
    srcset=""
    :id="index"
   
  />
  </span>
  <style lang="less" scoped>
  .css_animation {
  height: 30px;
  width: 30px;
  display: none;
  animation: myfirst 3s ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes myfirst {
  0%,
  100% {
    opacity: 0.5;
    // transform: translateX(-100%); /* 从左侧开始隐藏 */
  }

  50% {
    opacity: 1;
    // transform: translateX(0); /* 在中间状态下居中显示 */
  }
}
    </style>

忽略我命名的不规范，这只是我模拟的假数据

<script setup>
const aaa=ref({ "payload": {
    "lat": 43.887798338,
    "lon": 125.3587389704,
    "radiu": 4000,
    "deviceId": null,
    "locationList": [
      {
        "lat": 43.887798338,
        "lng": 125.3587389704
      },
      {
        "lat": 43.877798338,
        "lng": 125.3587389704
      },
      {
        "lat": 43.879798338,
        "lng": 125.3587389704
      }
    ]
  }
})
const ysjdequipmentlist=(timeToNextHour)=>{
locationList.value=aaa.value.payload.locationList
   aaa.value.payload.locationList.forEach((val,i) => {
          nextTick().then(() => {
        
            initImage(
                animationdiv.value[i],
                {lat: val.lat,lng:val.lng},
                aaa.value.payload.radiu,
                timeToNextHour,
                isdeviceIdShow.value
            ); 
          });            
        
        });
       
    } 
</script>

地图核心代码

 /**
     * 创建地图中心点 
     * @point_div 信号塔容器
     * @value 经纬度
     * @range 半径
     * @timeToNextHour 如果有时间传入说明要更新了
     * @deviceIdEqit 设备id
     */
  
    function initImage(point_div, value, range, timeToNextHour,deviceIdEqit) {   
        if (point_div) {
            // 半径为0不渲染信号塔和圈
            if (range != '0') {
                point_div.style.display = 'block'
                let  point_overlay = new Overlay({
                    name:'Signaltowerlayer',
                    element: point_div,
                    positioning: "center-center",
                    position: [value.lng, value.lat],
                    id:'Signaltowerlayer'
                });
               
                imap.addOverlay(point_overlay);           
                console.log(imap.getOverlays().getArray(),'添加信号塔');
            }else if(range == '0'){
                var feature = new Feature({
                    geometry: new Point( [value.lng, value.lat]),
                });
                let iconStyle = new Style({
                    image: new Icon({
                        //图片地址
                        src: isImageKong,
                        //长宽缩放比
                        scale: [0.2, 0.2],
                        //锚点位置
                        anchor: [0.2, 0.2],
                        //给图片着色
                        // color: 'rgba(255, 0, 0,0.5)',
                        //旋转弧度
                        rotation: 0
                    }),
                });
                feature.setStyle(iconStyle);
                var layers = imap.getLayers();
                layers.forEach(element => {
                    if (element?.get('name') == 'Circlelayers') {
                        element.getSource().addFeature(feature);
                    }
                  });
            }
            imap.getView().setCenter([value.lng, value.lat]);//定位
          
        }
    }