openlayer 點擊標記點

我用的版本是"openlayers" :  "^4.6.5" ,首先在Feature設置ID,便於獲取這個標記點的信息  iconFeature.set("Id",item.id)

           if(this.PointsLayer.length){
              console.log("you")
              this.PointsLayer.forEach(item=>{
                 this.OLMap.removeLayer(item)
              })
            }
            // let iconFeatures=[]  // 保存所有的點Feature
            this.allOnlinePersonInfo.forEach(item=>{
                // console.log(item)
                let PointsLayer = new ol.layer.Vector({
                  source: new ol.source.Vector(),
                });              
                let iconFeature = new ol.Feature({ 
                    geometry: new ol.geom.Point(   //繪製圖形（點）
                      item.position,
                    )
                }); 
                iconFeature.setStyle(         
                    new ol.style.Style({
                      image: new ol.style.Icon({
                          // scale:0.5,
                          //控制標註圖片和文字之間的距離
                          // anchor: [0.2, 1],
                          //標註樣式的起點位置
                          anchorOrigin: 'top-right',
                          //X方向單位：分數
                          anchorXUnits: 'fraction',
                          //Y方向單位：像素
                          anchorYUnits: 'pixels',
                          //偏移起點位置的方向
                          offsetOrigin: 'top-right',
                          //透明度
                          opacity: 1,
                          //圖片路徑
                          src:require("@/assets/imgs/xujianPerson.png")
                      
                      }),
                      //文本樣式
                      text: new ol.style.Text({
                        textAlign: "center", //對齊方式
                        textBaseline: "middle", //文本基線
                        font: "normal 12px 微軟雅黑", //字體樣式
                        text: item.label, //文本內容
                        offsetY: 20, // Y軸偏置
                        offsetX:40,
                        fill: new ol.style.Fill({
                          //填充樣式
                          color: "#333",
                        }),
                        backgroundStroke:new ol.style.Stroke({color: '#ffcc33', width:1}),
                        backgroundFill: new ol.style.Fill({
                          // 填充背景
                          color: "#FFF",
                        }),
                        padding: [2, 5, 2, 5],
                      }),                      

                    },
                    )
                  ); 
                  // iconFeature.setId(item.id); // 這種設置無效
                  iconFeature.set("Id",item.id)
                  PointsLayer.getSource().addFeature(iconFeature)  
                  this.OLMap.addLayer(PointsLayer) 
                  this.PointsLayer.push(PointsLayer)
                  console.log(this.PointsLayer)
     
            })  

 點擊的時候獲取ID 

          this.OLMap = new ol.Map({
          view: new ol.View({
            projection: "EPSG:4326", // 經緯度       
            center: center,        
            zoom: zoom || 8,
            minZoom: 6, 
            maxZoom: 18,
          }),
          target: "OLMap",
          layers: [tileLayer],
        });
      this.getSitePointInfoList();  
      this.showPersonMarker()
      this.OLMap.on("singleclick", (evt) => {
        console.log("hi");
        let arr = [];
        let id = "";
        var pixel = this.OLMap.getEventPixel(evt.originalEvent);
        var feature = this.OLMap.forEachFeatureAtPixel(
          evt.pixel,
          function (feature, layer) {
            id = feature.get("Id");
            arr.push(id);
          }
        );
        id = arr[0];
        this.olMarkerClick(id);