添加带图标的点

addPoints(coordinates) {
    const that = this;
    that.featuresArr.length = 0;
    // 设置图层
    var vectorSource = new ol.source.Vector({});//Source
    that.pointLayer = new ol.layer.Vector({
      id: 'yuchuang',
      source: vectorSource,
     });
    // 添加图层
    that.mymap.map.addLayer(that.pointLayer);
    // 循环添加feature
    for (let i = 0; i < coordinates.length; i++) {
        // 创建feature，一个feature就是一个点坐标信息
        let feature = new ol.Feature({
          geometry: new ol.geom.Point([coordinates[i].Lon, coordinates[i].Lat]),
          name: "point_data",
          values:coordinates[i],
        });
        
        var styleIcon = new Style({
          // 设置图片效果
            image: new Icon({
                src: require("../../../../assets/fishingBolt2.png"),
                anchor: [0.5, 1],
                scale:0.03
            }),
            text: new ol.style.Text({
              //垂直文本偏移量（以像素为单位）。正值将使文本向下移动。
              offsetY: 10,
              //对齐方式
              textAlign: 'center',
              //文本基线
              textBaseline: 'middle',
              //字体样式
              font: 'normal 12px 微软雅黑',
              //文本内容
              text: coordinates[i].Shipname,
              //填充样式
              //文本填充样式（即文字颜色）
              fill: new ol.style.Fill({color: '#c4c4c4'}),
          }),
        });
        feature.setStyle(styleIcon);
        that.featuresArr.push(feature);
    };
    // that.featuresArr.forEach(item => {
    //   console.log("asd:",item.get('values'));
    // })
    // 批量添加feature
    that.pointLayer.getSource().addFeatures(that.featuresArr);
},