angular - Openlayers wont show features in a layer when using loader

Question

So I've got this going on: loadingstrategy bbox, so the loader fetches features when i pan og zoom around. But the issue is that even though i get the features from the http request, it somehow doesn't gets displayed.

The logic i have:

       source = new VectorSource({

            loader: (extent, resolution, projection) => {
                let url ='api_url'
                let xhr = new XMLHttpRequest();
                xhr.open('GET', url);
                let onError = () => {
                    source.removeLoadedExtent(extent);
                    console.log('error');
                };
                xhr.onerror = onError;
                xhr.onload = () => {
                    if (xhr.status === 200) {
                        let features = new GeoJSON({
                            featureProjection: 'EPSG:32633',
                        }).readFeatures(xhr.responseText);
                        source.addFeatures(features);
                        source.changed();
                        console.log(
                            this.Map.getLayers().getArray(),
                            (this.Map.getLayers()
                                .getArray()
                                .find(
                                    (l) => l.get('name') === 'propertyLayer'
                                ) as VectorLayer)
                                .getSource()
                                .getFeatures()
                        );
                    } else {
                        console.log('error');
                    }
                };
                xhr.send();
            },
            strategy: bbox,
            format: new GeoJSON({
                featureProjection: GetProjection('EPSG:32633'),
                dataProjection: GetProjection('EPSG:32633'),
            }),
        });
        const styles = [
            new Style({
                stroke: new Stroke({
                    color: 'blue',
                    width: 3,
                }),
                fill: new Fill({
                    color: 'rgba(0, 0, 255, 0.1)',
                }),
            }),
            new Style({
                image: new CircleStyle({
                    radius: 6,
                    fill: new Fill({
                       color: '#3399CC',
                    }),
                    stroke: new Stroke({
                       color: '#fff',
                       width: 2,
                    }),
                }),
            }),
        ];
        let vLayer = new VectorLayer({
        source: source,
        style: styles,
        });
        this.Map.addLayer(vLayer);

The console.log I have inside of the onload function displays alot of features, so I know its getting fetched. The first log is listing out the layers in arrayformat. And the layer that gets the features is the last one, could it be something with the other layers having a higher z-index value? or that i may need to refresh/redraw the layer that gets all the features added?

question from:https://stackoverflow.com/questions/65881198/openlayers-wont-show-features-in-a-layer-when-using-loader

Answer 1

Instead of

                    let features = new GeoJSON({
                        featureProjection: 'EPSG:32633',
                    }).readFeatures(xhr.responseText);

either include the dataProjection as well, or if both projections are the same don't specify either.