No feature is added to VectorLayer while trying to add programmatically

Question

I'm trying to add some VectorLayers programmatically to my map after some data is fetched from the database and filesystem. The problem I'm facing is that although the data and VectorLayer are added to the map, the source features are not loaded. After everything runs, if I console.log(this.map.getLayers()) I can see the layer added there, but if I console.log(addedLayer.getSource().getFeatures()) the result is an empty array.

• OpenLayers v6.1.1

My code

this.storage.get("my_layers").then(layers => {
    if (layers) {
        let parsedLayers = JSON.parse(layers);

        // Loop through the layers
        for (let prop in parsedLayers) {
            let file_location = parsedLayers[prop]['file_location'];
            let filename = file_location.split('/').pop();

            let newVectorLayer = new VectorLayer({
                source: new VectorSource ({
                    format: new GeoJSON({dataProjection: 'EPSG:31982'})
                }),
                style: this.styleArea('rgba(11, 102, 35, 1)', 'rgba(0, 0, 0, 1)', 2), //Returns green with black border
                name: parsedLayers[prop]['layer_id'],
                visible: true
            });                 

            this.file.readAsText(this.file.externalDataDirectory + 'projects/' + this.projectId + '/layers/', filename)
            .then(layer_file => {               
                newVectorLayer.getSource().addFeatures(JSON.parse(layer_file));
                this.map.addLayer(newVectorLayer);
                console.log(newVectorLayer.getSource().getFeatures()); // Returns an empty array                        
            });             
        }
    }
});

this.storage, this.file and this.map is the map itself.

I also tried to add the features this way, as seen here, but got the same results:

newVectorLayer.getSource().getFormat().readFeatures(JSON.parse(layer_file));

I don't know if this is the best way to load a local file and add to source, so please let me know. First I tried with the built-in url option from VectorSource, but it uses a XHR loader that is blocked by CORS when trying to load from file://...

Answer 1

Solved the problem by creating a separate variable for the source format, as seen here:

...
let newVectorLayer = new VectorLayer({
    source: new VectorSource ({}),
    style: this.styleArea('rgba(11, 102, 35, 1)', 'rgba(0, 0, 0, 1)', 2), // Returns green with black border
    name: parsedLayers[prop]['layer_id'],
    visible: true
});                 

this.file.readAsText(this.file.externalDataDirectory + 'projects/' + this.projectId + '/layers/', filename).then(layer_file => {
    let format = new GeoJSON({
        featureProjection:"EPSG:3857",
        dataProjection:"EPSG:31982"
    });
    newVectorLayer.getSource().addFeatures(format.readFeatures(layer_file)); // Don't needed to parse here
    this.map.addLayer(newVectorLayer);          
});
...