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.

• mapserving: Please also be careful to follow the proper MS4W settings for IMAGEURL and IMAGEPATH (I designed MS4W so that it comes out-of-the-box ready with those already configured). Likely you will face this grief later down the road without those properly set: see my recent answer here for more details: gis.stackexchange.com/questions/361400/…

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.