stop feature loading in Vector source loader

[wshuail]

I write my own Vector source with bbox loading strategy and loader function, so the features can be loaded in batch. I found even when I go back to the previous page or navigate to other page, the features will keep loading.
How can I stop the feature loading when I navigate other page, or set the layer's visibility to be false.
Thanks

[ahocevar]

I cannot imagine how features would keep loading when you navigate to another page. Would you mind sharing a live example that shows your problem, along with a screencast that shows the requests continuing after you navigate away from the page?

[wshuail]

Hi @ahocevar Thanks for your reply.
A live example is too much from my end. Can I just share with you the key part of my code?

class WFSLayer extends VectorLayer<VectorSource> {
    private sublayers: WFSLayer[] = [];
    constructor(options: WFSLayerOptions) {
        const baseURL = options.baseURL;
        const typeName = options.typeName;
        const visible = options.visible !== undefined ? options.visible : false;
        const filter_key = options.filter_key;
        const filter_value = options.filter_value;

        let CQL = '';
        if (filter_key && filter_value) {
            CQL = `${filter_key}='${filter_value}'`;
        }
        const params: Parameters = {
            service: 'WFS',
            version: '2.0.0',
            request: 'GetFeature',
            typename: typeName,
            outputFormat: 'application/json',
            SRSName: 'EPSG:3857',
        };

        const source = new VectorSource({
            format: new GeoJSON(),
            strategy: bboxStrategy,
            loader: (extent, resolution, projection, success, failure) => {
                // params['bbox'] = extent.join(',') + ',' + projection.getCode();
                params['CQL_FILTER'] = "BBOX(shape," + extent.join(',') + ",'" + projection.getCode() + "')";
                if (CQL) {
                    params['CQL_FILTER'] += ' AND ' + CQL;
                }

                let loadedFeatures: any[] = [];
                let startIndex = 0;
                let count = 2000;
                function loadFeatures() {
                    params['startIndex'] = startIndex;
                    params['count'] = count;
                    console.log('params:', params);
                    let url = `${baseURL}?${new URLSearchParams(params).toString()}`;
                    console.log("url: ", url);
                    fetch(url,)
                        .then(response => {
                            if (!response.ok) {
                                throw new Error(`HTTP error! status: ${response.status}`);
                            }
                            return response.json();
                        })
                        .then(data => {
                            const features = new GeoJSON().readFeatures(data, {
                                // dataProjection: 'EPSG:4326',
                                // featureProjection: 'EPSG:3857'
                            });
                            if (features.length > 0) {
                                source.addFeatures(features);
                                loadedFeatures = loadedFeatures.concat(features);
                            }

                            if (features.length >= count) {
                                startIndex += count;
                                loadFeatures();
                            } else {
                                success(loadedFeatures);
                            }

                        })
                        .catch(error => {
                            console.error('Error loading features: ', error);
                            failure();
                        });
                }
                loadFeatures();
            }

        });

        super({
            source: source,
            visible: visible,
        })

    }
}

Then I use it just like a VectorLayer.
Generally I want to customize the VectorLayer for some features I need. Maybe I did it in a wrong way.
Any comment is helpful!

[ahocevar]

What you're trying to achieve is much easier and less error prone without custom loader logic - see this example: https://openlayers.org/en/latest/examples/vector-wfs.html