How to use the ol/layer/Vector function in ol

const source = new VectorSource(defineSource(mapSource));

    // get the transforms for the layer
    if(mapSource.transforms) {
        source.on('addfeature', function(evt) {
            const f = evt.feature;
            f.setProperties(transformProperties(mapSource.transforms, f.getProperties()));
        });
    }

    const opts = {
        source,
        minResolution: mapSource.minresolution,
        maxResolution: mapSource.maxresolution,
    };
    const vector_layer = new VectorLayer(opts);
    applyStyle(vector_layer, mapSource);

    return vector_layer;
}

width: width/2
        })
      }),
      stroke: new ol_style_Stroke({
          color: blue,
          width: width
        })
    }),
  ];

  // Custom style
  if (options.sketchStyle) sketchStyle = options.sketchStyle instanceof Array ? options.sketchStyle : [options.sketchStyle];
  if (options.featureStyle) featureStyle = options.featureStyle instanceof Array ? options.featureStyle : [options.featureStyle];

  // Create a new overlay for the sketch
  this.overlayLayer_ = new ol_layer_Vector({
    source: new ol_source_Vector({
      useSpatialIndex: false
    }),
    name:'Split overlay',
    displayInLayerSwitcher: false,
    style: function(f) {
      if (f._sketch_) return sketchStyle;
      else return featureStyle;
    }
  });

};
ol_ext_inherits(ol_interaction_Split, ol_interaction_Interaction);

constructor(InteractiveMap) {
        this.InteractiveMap = InteractiveMap;
        this.map = InteractiveMap.map;
        this.source = new SourceVector({
            url: (source, extent, number, proj) => {
                return this.dataId ? `save/${this.dataId}.kml` : '';
            },
            format: new KML(),
        });

        this.layer = new LayerVector({
            title: 'Draw',
            source: this.source,
        });

        this.dataId = null;

        this.type = 'brush';

        this.draw = null; // global so we can remove it later

        this.rotate = null;

        this.modify = null;

        this.select = null;

wrapX: false
            })
        });
        var feature2 = new Feature(new Polygon([
            [
                [0, 0],
                [-15, 30],
                [-20, 0],
                [0, 0]
            ]
        ]));
        var polygonSource2 = new VectorSource({
            features: [feature2],
            wrapX: false
        });
        var vectorLayer2 = new VectorLayer({
            source: polygonSource2
        });
        const layers = new LayerGroup({
            layers: [vectorLayer1, new LayerGroup({
                layers: [vectorLayer, vectorLayer2]
            })]
        })
        map.addLayer(layers);

        setTimeout(() => {
            let pixel = map.getPixelFromCoordinate([-11, 7]);
            let count=0;
            map.forEachFeatureAtPixel(pixel,
                (feature, layer) => {
                    count++;
                    expect([feature, feature1, feature2]).toContain(feature);

stroke: new ol_style_Stroke({ color: white, width: width + 2 })
    }),
    new ol_style_Style({
      image: new ol_style_Circle({
        radius: width * 2,
        fill: new ol_style_Fill({ color: blue }),
        stroke: new ol_style_Stroke({ color: white, width: width / 2 })
      }),
      stroke: new ol_style_Stroke({ color: blue, width: width }),
      fill: new ol_style_Fill({
        color: [255, 255, 255, 0.5]
      })
    })
  ];

  this.overlay_ = new ol_layer_Vector({
    source: new ol_source_Vector({useSpatialIndex: false }),
    style: defaultStyle
  });

  this.geom_ = [];
  
};
ol_ext_inherits(ol_interaction_DrawTouch, ol_interaction_CenterTouch);

var createButtonLayer = function() {
    buttonLayer = new OlLayerVector({
      source: new OlSourceVector({
        wrapX: false
      }),
      style: buttonStyle
    });
    map.addLayer(buttonLayer);
  };

init () {
    if (!this.source_) {
      this.wktParser_ = new WKT()

      this.source_ = new VectorSource()
      this.layer_ = new VectorLayer({
        source: this.source_
      })
      this.map_.addLayer(this.layer_)

      this.nextId = 0
    }
  }

configureSelectionLayer() {
        const src_selection = new VectorSource();

        this.selectionLayer = new VectorLayer({
            source: src_selection,
        });

        applyStyleFunction(this.selectionLayer, {
            'version': 8,
            'layers': [
                {
                    'id': 'dummy',
                    'source': 'dummy-source',
                    'paint': this.props.selectionStyle,
                }
            ],
            'dummy-source': [
                {
                    'type': 'vector'
                }

var createGridLayer = function() {
    gridLayer = new OlLayerVector({
      source: new OlSourceVector({
        wrapX: false
      }),
      style: new OlStyleStyle({
        stroke: new OlStyleStroke({
          color: 'rgba(186, 180, 152, 0.6)',
          width: 1.5
        })
      })
    });
    map.addLayer(gridLayer);
  };

var createSwathLayer = function() {
    swathLayer = new OlLayerVector({
      source: new OlSourceVector({
        wrapX: false
      }),
      style: new OlStyleStyle({
        stroke: new OlStyleStroke({
          color: 'rgba(195, 189, 123, 0.75)',
          width: 2
        })
      })
    });
    map.addLayer(swathLayer);
  };