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

if (isDCDataExist) {
      layers.push(featuresLayer)
    }

    const map = new Map({
      target: this.refs.mapContainer,
      layers,
      view: new View({
        projection: 'EPSG:4326',
        center: [114.2029, 22.3844],
        zoom: 13,
      }),
    })

    this.featureOverlay = new VectorLayer({
      source: new VectorSource(),
      map: map,
      style: function(feature) {
        highlightStyle.getText().setText(`${feature.getProperties().CNAME}`)
        return highlightStyle
      },
    })

    if (isDCDataExist) {
      // Fit to feature
      const features = this.featureSource.getFeatures()
      for (let i = 0; i < features.length; i++) {
        if (features[i].getProperties().CACODE === code) {
          const extent = features[i].getGeometry().getExtent()
          map.getView().fit(extent, {
            size: map.getSize(),
            padding: [10, 10, 10, 10],

let drawInteraction = new Ol_Interaction_Draw({
                    source: mapLayer.getSource(),
                    type: olGeometryType,
                    geometryFunction: geometryFunction,
                    style: drawStyle,
                    wrapX: true,
                    ...userDrawOptions,
                    ...additionalDrawOptions
                });

                if (appConfig.DEFAULT_MAP_EXTENT) {
                    // Override creation of overlay_ so we can pass in an extent
                    // since OL doesn't let you do this via options
                    drawInteraction.overlay_ = new Ol_Layer_Vector({
                        extent: appConfig.DEFAULT_MAP_EXTENT,
                        source: new Ol_Source_Vector({
                            useSpatialIndex: false,
                            wrapX: true
                        }),
                        style: drawStyle
                    });
                }

                // Set callback
                drawInteraction.on("drawend", event => {
                    if (typeof onDrawEnd === "function") {
                        // store type of feature and id for later reference
                        let geometry = this.retrieveGeometryFromEvent(event, geometryType);
                        event.feature.set("interactionType", interactionType);
                        event.feature.setId(geometry.id);
                        onDrawEnd(geometry, event);
                    }

});
                    } else {
                        feature = new Feature({
                            geometry: this.createOLGeometry(geometry.geometry ? geometry.geometry : {...geometry, ...geometry.properties, center })
                        });
                    }
                    feature.setProperties(f.properties);
                    this.drawSource.addFeature(feature);
                }
            }
        });

        // TODO CHECK THIS WITH FeatureCollection
        if (features.length === 0 && (options.editEnabled || options.drawEnabled)) {
            if (options.transformToFeatureCollection) {
                this.drawSource = new VectorSource({
                    features: (new GeoJSON()).readFeatures(
                        {
                            type: "FeatureCollection", features: []
                        })
                });
                this.drawLayer.setSource(this.drawSource);
            } else {
                feature = new Feature({
                    geometry: this.createOLGeometry({type: drawMethod, coordinates: null})
                });
                this.drawSource.addFeature(feature);
            }
        } else {
            if (features[0] && features[0].type === "GeometryCollection" ) {
                // HERE IT ENTERS WITH EDIT
                this.drawSource = new VectorSource({

});

	// Features added / remove
	this.added_ = [];
	this.removed_ = [];

	// Source to split
	if (options.features)
	{	this.source_ = new ol_source_Vector({ features: options.features });
	}
	else 
	{	this.source_ = options.source ? options.source : new ol_source_Vector({ features: new ol_Collection() });
	}
	var trigger = this.triggerSource;
	if (options.triggerFeatures)
	{	trigger = new ol_source_Vector({ features: options.triggerFeatures });
	}

	if (trigger)
	{	trigger.on("addfeature", this.onAddFeature.bind(this));
		trigger.on("changefeature", this.onChangeFeature.bind(this));
		trigger.on("removefeature", this.onRemoveFeature.bind(this));
	}
	else
	{	this.source_.on("addfeature", this.onAddFeature.bind(this));
		this.source_.on("changefeature", this.onChangeFeature.bind(this));
		this.source_.on("removefeature", this.onRemoveFeature.bind(this));
	}

	// Split tolerance between the calculated intersection and the geometry
	this.tolerance_ = options.tolerance || 1e-10;

createVectorKMLSource(layer, options) {
        // customize the layer url if needed
        if (
            typeof options.url !== "undefined" &&
            typeof layer.getIn(["urlFunctions", appStrings.MAP_LIB_2D]) !== "undefined"
        ) {
            let urlFunction = this.tileHandler.getUrlFunction(
                layer.getIn(["urlFunctions", appStrings.MAP_LIB_2D])
            );
            options.url = urlFunction({
                layer: layer,
                url: options.url
            });
        }

        return new Ol_Source_Vector({
            url: options.url,
            format: new Ol_Format_KML()
        });
    }

)
      }
      // todo initialize without interactions and provide vl-interaction-default component
      if (this.defaultInteractions instanceof Collection) {
        this._interactionsCollection = this.defaultInteractions
      } else if (this.defaultInteractions !== false) {
        this._interactionsCollection = createDefaultInteractions(
          isPlainObject(this.defaultInteractions)
            ? this.defaultInteractions
            : undefined,
        )
      }
      this._interactionsCollection.forEach(interaction => initializeInteraction(interaction))
      // prepare default overlay
      this._featuresOverlay = new VectorLayer({
        source: new VectorSource({
          features: this.$featuresCollection,
          wrapX: this.wrapX,
        }),
      })

      this::defineServices()
    },
  }

]));
        var vectorLayer1 = new VectorLayer({
            source: new VectorSource({
                features: [feature1],
                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;

var ol_graph_Vector = function (options){
  options = options || {};
  
  ol_Object.call (this, options);

  this.edges = options.source || new ol_source_Vector({ useSpatialIndex: true });
  this.edges.on('changefeature', this.changeEdge.bind(this));
  this.edges.on('addfeature', this.addEdge.bind(this));
  this.edges.on('removefeature', this.removeEdge.bind(this));
}
ol_ext_inherits (ol_graph_Vector, ol_Object);

let onMapChangeMobile = () => {
      if (map.get('mobile')) {
        this.centerOnPopup_ = false
      } else {
        this.centerOnPopup_ = this.centerOnPopupInitial_
      }
    }

    if (this.getMap()) {
      this.getMap().un('change:mobile', onMapChangeMobile)
      unByKey(this.listenerKey_)
    }

    this.map_ = map
    if (map) {
      this.utilitySource_ = new VectorSource()
      this.utilityLayer_ = new VectorLayer({
        visible: false,
        source: this.utilitySource_
      })
      map.addLayer(this.utilityLayer_)

      this.layers_ = []

      let interaction = new MapEventInteraction({ type: 'singleclick' })
      interaction.on('mapevent', e => this.handleClickEvent(e))

      map.addDefaultInteraction('singleclick', interaction)

      let hoverInteraction = new MapEventInteraction({ type: 'pointermove' })
      hoverInteraction.on('mapevent', e => this.handlePointerMoveEvent(e))

const format = formats[i];
                    try {
                        features = format.readFeatures(result, {
                            featureProjection: projection
                        });
                    } catch (e) {

                    }
                    if (features && features.length > 0) {
                        loadedType = format.type;
                        bLoaded = true;
                        break;
                    }
                }
                if (bLoaded) {
                    const source = new olSourceVector();
                    const layer = new olVectorLayer({
                        source: source
                    });
                    source.addFeatures(features);
                    layer.set(LayerProperty.LAYER_NAME, layerName);
                    layer.set(LayerProperty.LAYER_TYPE, loadedType);
                    layer.set(LayerProperty.IS_EXTERNAL, true)
                    layer.set(LayerProperty.IS_GROUP, false);
                    that.addLayer(layerName, layer);
                    callback(getLayerInfo(layer, true));
                } else {
                    callback(new Error(tr("ADD_LOCAL_FILE_LAYER_FAILURE", locale)));
                }
            } else {
                callback(new Error(tr("ADD_LOCAL_FILE_LAYER_FAILURE_NOT_TEXT", locale)));
            }