vue使用openlayers5本地上传geojson渲染出来点击出现弹框？

Question

map_click() {
  this.map.on("click", (e) => {
    var pixel = this.map.getEventPixel(e.originalEvent);
    console.log(pixel)
    var coordinate = e.coordinate;
    var feature = this.map.forEachFeatureAtPixel(pixel, (feature) => {return feature});
    console.log(feature)
    if(feature){
      console.log("获取到点击的要素" + "jingdu:" + coordinate[0]);  //其中lei是定义的属性
      // this.datas = feature.values_
      this.$refs.popup_content.innerHTML = '<code>' + feature.values_.id + '</code>';    //弹窗内容
      this.overlay.setPosition(coordinate);
    }else {
      this.overlay.setPosition(undefined);  // 如果没有点击坐标点，就隐藏弹窗
    }
  });
},

这个是点击矢量图层出现弹框的代码
下面一个一个绿色的小圆圈就是一个个的矢量图层

首次进入这个页面的时候，从本地获取到数据渲染出来
然后点击绿色的小圆点，获取不到上述代码里面的feature
这个时候把上面的console.log() 这个给注释掉
保存代码以后 不要刷新页面
从新渲染一次绿色的小圆点
这个时候点击就会出现

是那一步出错了呢？