Vector layer from MapServer WFS not displaying in OpenLayers 6

Question

I want to display a WFS layer in GeoJSON format on my map via OpenLayers. All my layers in WMS appear, only the one in WFS does not appear. I did create a "WEB" block in the mapfile. And my layers are saved in a pgAdmin database (Postgres) with PostGIS.

MAP
    NAME carte_rando
    IMAGETYPE PNG
    EXTENT 428111 6164472 719547 6367853
    SIZE 1000 800
    IMAGECOLOR 255 255 255
    SHAPEPATH ./shapes

    PROJECTION
        "init=epsg:3857"
    END

    OUTPUTFORMAT
        NAME "geojson"
        DRIVER "OGR/GEOJSON"
        MIMETYPE "application/json;subtype=geojson"
        FORMATOPTION "STORAGE=stream"
        FORMATOPTION "FORM=SIMPLE"
    END

    WEB
        TEMPLATE "C:/ms4w/Apache/htdocs/site_web_rando.html"
        IMAGEPATH "./images/"
        IMAGEURL "/images/"
        METADATA
            "wms_title" "WMS_PDIPR_cd31" 
            "wms_onlineresource" "http://localhost/cgi-bin/mapserv?map=mapfile_rando.map&"
            "wms_srs"   "EPSG:3857"
            "wms_abstract" "Couches images WMS limites, routes, eau et sentier"
            "wms_enable_request" "*"
            "WMS_FEATURE_INFO_MIME_TYPE" "text/html"
            "wfs_title" "WFS_PDIPR_cd31"
            "wfs_version" "1.1.0"
            "wfs_onlineresource" "http://localhost/cgi-bin/mapserv?map=mapfile_rando.map&"
            "wfs_srs" "EPSG:3857"
            "wfs_abstract" "Couche signaletique en WFS"
            "wfs_enable_request" "*"
        END
    END

    TEMPLATEPATTERN "*"

    LAYER
        NAME signaletique
        TYPE point
        STATUS on
        EXTENT 428111 6164472 719547 6367853
        DATA signaletique


        METADATA
            "wfs_title" "signaletique"
            "wfs_srs" "EPSG:3857"
            "wfs_onlineresource" "http://localhost/cgi-bin/mapserv?map=mapfile_rando.map&"
            "gml_featureid"     "id"
            "wfs_enable_request" "*"
            "wfs_getfeature_formatlist" "GeoJSON"
        END

        CONNECTIONTYPE POSTGIS
        CONNECTION "host=localhost port=5432 dbname='PDIPR_cd31' user='xxxxx' password='xxxxxx'"
        DATA "geom FROM signaletique USING UNIQUE id"

        PROJECTION
            "init=epsg:2154"
        END 

        CLASS 
            NAME signaletique
            TEMPLATE site_web_rando.html
                STYLE
                    SYMBOL "square"
                    size 8
                    COLOR 70 130 180
                    OUTLINECOLOR 65 105 255
                END
            END
    END

END

With the following URL I have the GeoJSON data which is displayed and formatted correctly. I deduce that my WFS layer works.

http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/mapfile_rando.map&SERVICE=WFS&VERSION=1.1.0&REQUEST=GetFeature&TYPENAME=signaletique&outputformat=geojson

So I called my layer with the OpenLayers library:

<!-- Couche signaletique_sentier -->
            var signaletiqueSource = new ol.source.Vector({ //source signaletique WFS
                format: new ol.format.GeoJSON(),
                loader: function(extent) {
                    return 'http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/mapfile_rando.map&SERVICE=WFS&' +
                    'version=1.1.0&request=GetFeature&typename=signaletique&' +
                    'outputFormat=application/json&srsname=EPSG:3857&' +
                    'bbox=' + extent.join(',') + ',EPSG:3857';
                },
                strategy: ol.loadingstrategy.bbox,
            });

            var couchesignaletique = new ol.layer.Vector({ //Couche signaletique
                visible: true,
                source:signaletiqueSource,
                ratio:1,
            });

            var view = new ol.View({
                center: [130905, 5367021],
                projection:'EPSG:3857',
                zoom: 9.2,
            });


            var map = new ol.Map({
                layers: [raster, departements, communes, reseau_hydrographique, autoroutes,
                nationales, departementales, autres, traces_sentier, couchesignaletique, vector],
                target: 'map',
                view: view,
            }); 

But my layer does not appear. Yet I followed the instructions given in other forum responses similar to my problem. And I followed the instructions given with an example of OpenLayers:

https://openlayers.org/en/latest/examples/vector-wfs.html?q=wfs

At the beginning of my work, I displayed my layer in WMS Image and it worked perfectly. But I want to be able to extract the attribute data from my layer and be able to modify and then save them. When on my web page I do "Examine the element" no error appears.

I have the impression that there is no error, but there must be one.

Answer 1

I found the solution if it can help someone.

var signaletiqueSource = new ol.source.Vector({ //source signaletique WFS
                format: new ol.format.GeoJSON(),
                url:'http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/mapfile_rando.map&SERVICE=WFS&VERSION=1.1.0&REQUEST=GetFeature&TYPENAME=signaletique&outputformat=geojson',
                strategy: ol.loadingstrategy.bbox,
                projection: 'EPSG:3857',
            });

            var couchesignaletique = new ol.layer.Vector({ //Couche signaletique
                visible: true,
                source:signaletiqueSource,
                ratio:1,
            });

I don't know why it didn't work with the other solution. I think it was missing the "url" tag.

I hope this would help some beginners like me!

Answer 2

In your original code you should change loader: to url: as the function doesn't load features, it simply returns a url with bbox parameter

        var signaletiqueSource = new ol.source.Vector({ //source signaletique WFS
            format: new ol.format.GeoJSON(),
            url: function(extent) {
                return 'http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/mapfile_rando.map&SERVICE=WFS&' +
                'version=1.1.0&request=GetFeature&typename=signaletique&' +
                'outputFormat=application/json&srsname=EPSG:3857&' +
                'bbox=' + extent.join(',') + ',EPSG:3857';
            },
            strategy: ol.loadingstrategy.bbox,
        });

If you don't specify bbox in the url it is equivalent to using strategy all for every extent OpenLayers loads so you would need to change the strategy to ol.loadingstrategy.all to avoid unnecessary loads.