Openlayers 3, WFS and QGIS server - server

Question

I'm in trouble since few days to display WFS data from QGIS server via Openlayers 3. At first, i should like to add that my WFS source can be imported via my QGIS client locally, so the problem might not be there.
I lean on this openlayers3 tutorial
My WFS request return xml format when JSON is expected:
<wfs:FeatureCollection xmlns:wfs="http://www.opengis.net/wfs" xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml" xmlns:ows="http://www.opengis.net/ows" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:qgs="http://www.qgis.org/gml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd http://www.qgis.org/gml http://127.0.0.1/cgi-bin/puits/qgis_mapserv.fcgi?SERVICE=WFS&VERSION=1.0.0&REQUEST=DescribeFeatureType&TYPENAME=shop&OUTPUTFORMAT=XMLSCHEMA"><gml:boundedBy>
<gml:Box srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">-1.88447014,47.51687346 8.32306573,49.2124249</gml:coordinates>
</gml:Box>
</gml:boundedBy>
<gml:featureMember>
<qgs:shop fid="shop.114">
<gml:boundedBy>
<gml:Box srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">7.42144102,48.04324565 7.42144102,48.04324565</gml:coordinates>
</gml:Box>
</gml:boundedBy>
<qgs:geometry>
<gml:Point srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">7.42144102,48.04324565</gml:coordinates>
</gml:Point>
</qgs:geometry>
<qgs:id>114</qgs:id>
<qgs:basin_id>0</qgs:basin_id>
<qgs:land_area_id>0</qgs:land_area_id>
<qgs:field_id>7</qgs:field_id>
<qgs:country_id>81</qgs:country_id>
<qgs:existence_kind_id>1</qgs:existence_kind_id>
<qgs:lahee_class_id>0</qgs:lahee_class_id>
<qgs:well_status_id>0</qgs:well_status_id>
<qgs:operator_id>0</qgs:operator_id>
<qgs:name>ALS-11</qgs:name>
<qgs:uwi>"UWI200040"</qgs:uwi>
<qgs:spuddate></qgs:spuddate>
<qgs:source></qgs:source>
<qgs:surfacelatitude>48.0359</qgs:surfacelatitude>
<qgs:surfacelongitude>7.4544</qgs:surfacelongitude>
<qgs:coordrefsys>"WGS84"</qgs:coordrefsys>
<qgs:epsgcode>0</qgs:epsgcode>
<qgs:remarks>"Test de chargement massif"</qgs:remarks>
<qgs:version>1</qgs:version>
<qgs:updated>2016-05-09T16:49:21</qgs:updated>
<qgs:created>2016-04-08T11:07:34</qgs:created>
<qgs:createdby>Benoit Gotab</qgs:createdby>
<qgs:updatedby>cedric valentini</qgs:updatedby>
</qgs:shop>
</gml:featureMember>
<gml:featureMember>
<qgs:shop fid="shop.115">
<gml:boundedBy>
<gml:Box srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">7.10572988,47.68677159 7.10572988,47.68677159</gml:coordinates>
</gml:Box>
</gml:boundedBy>
<qgs:geometry>
<gml:Point srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">7.10572988,47.68677159</gml:coordinates>
</gml:Point>
</qgs:geometry>
<qgs:id>115</qgs:id>
<qgs:basin_id>0</qgs:basin_id>
<qgs:land_area_id>0</qgs:land_area_id>
<qgs:field_id>7</qgs:field_id>
<qgs:country_id>81</qgs:country_id>
<qgs:existence_kind_id>1</qgs:existence_kind_id>
<qgs:lahee_class_id>0</qgs:lahee_class_id>
<qgs:well_status_id>0</qgs:well_status_id>
<qgs:operator_id>0</qgs:operator_id>
<qgs:name>ALS-3</qgs:name>
<qgs:uwi>"UWI200026"</qgs:uwi>
<qgs:spuddate></qgs:spuddate>
<qgs:source></qgs:source>
<qgs:surfacelatitude>47.781</qgs:surfacelatitude>
<qgs:surfacelongitude>7.2101</qgs:surfacelongitude>
<qgs:coordrefsys>"WGS84"</qgs:coordrefsys>
<qgs:epsgcode>0</qgs:epsgcode>
<qgs:remarks>"Test de chargement massif"</qgs:remarks>
<qgs:version>1</qgs:version>
<qgs:updated>2016-05-09T16:49:58</qgs:updated>
<qgs:created>2016-04-08T11:07:34</qgs:created>
<qgs:createdby>Benoit Gotab</qgs:createdby>
<qgs:updatedby>cedric valentini</qgs:updatedby>
</qgs:shop>
</gml:featureMember>
<gml:featureMember>
<qgs:shop fid="shop.121">
<gml:boundedBy>
<gml:Box srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">8.32306572,47.51687347 8.32306572,47.51687347</gml:coordinates>
</gml:Box>
</gml:boundedBy>
<qgs:geometry>
<gml:Point srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">8.32306572,47.51687347</gml:coordinates>
</gml:Point>
</qgs:geometry>
<qgs:id>121</qgs:id>
<qgs:basin_id>0</qgs:basin_id>
<qgs:land_area_id>0</qgs:land_area_id>
<qgs:field_id>7</qgs:field_id>
<qgs:country_id>81</qgs:country_id>
<qgs:existence_kind_id>1</qgs:existence_kind_id>
<qgs:lahee_class_id>0</qgs:lahee_class_id>
<qgs:well_status_id>0</qgs:well_status_id>
<qgs:operator_id>0</qgs:operator_id>
<qgs:name>ALS-9</qgs:name>
<qgs:uwi>"UWI200036"</qgs:uwi>
<qgs:spuddate></qgs:spuddate>
<qgs:source></qgs:source>
<qgs:surfacelatitude>47.787</qgs:surfacelatitude>
<qgs:surfacelongitude>7.2107</qgs:surfacelongitude>
<qgs:coordrefsys>"WGS84"</qgs:coordrefsys>
<qgs:epsgcode>0</qgs:epsgcode>
<qgs:remarks>"Test de chargement massif"</qgs:remarks>
<qgs:version>1</qgs:version>
<qgs:updated>2016-05-09T16:55:16</qgs:updated>
<qgs:created>2016-04-08T11:07:34</qgs:created>
<qgs:createdby>Benoit Gotab</qgs:createdby>
<qgs:updatedby>cedric valentini</qgs:updatedby>
</qgs:shop>
</gml:featureMember>
<gml:featureMember>
<qgs:shop fid="shop.116">
<gml:boundedBy>
<gml:Box srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">7.2102,47.77646298 7.2102,47.77646298</gml:coordinates>
</gml:Box>
</gml:boundedBy>
<qgs:geometry>
<gml:Point srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">7.2102,47.77646298</gml:coordinates>
</gml:Point>
</qgs:geometry>
<qgs:id>116</qgs:id>
<qgs:basin_id>0</qgs:basin_id>
<qgs:land_area_id>0</qgs:land_area_id>
<qgs:field_id>7</qgs:field_id>
<qgs:country_id>81</qgs:country_id>
<qgs:existence_kind_id>1</qgs:existence_kind_id>
<qgs:lahee_class_id>0</qgs:lahee_class_id>
<qgs:well_status_id>0</qgs:well_status_id>
<qgs:operator_id>0</qgs:operator_id>
<qgs:name>ALS-4</qgs:name>
<qgs:uwi>"UWI200027"</qgs:uwi>
<qgs:spuddate></qgs:spuddate>
<qgs:source></qgs:source>
<qgs:surfacelatitude>47.782</qgs:surfacelatitude>
<qgs:surfacelongitude>7.2102</qgs:surfacelongitude>
<qgs:coordrefsys>"WGS84"</qgs:coordrefsys>
<qgs:epsgcode>0</qgs:epsgcode>
<qgs:remarks>"Test de chargement massif"</qgs:remarks>
<qgs:version>1</qgs:version>
<qgs:updated>2016-05-09T16:54:39</qgs:updated>
<qgs:created>2016-04-08T11:07:34</qgs:created>
<qgs:createdby>Benoit Gotab</qgs:createdby>
<qgs:updatedby>cedric valentini</qgs:updatedby>
</qgs:shop>
</gml:featureMember>
<gml:featureMember>
<qgs:shop fid="shop.117">
<gml:boundedBy>
<gml:Box srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">7.21579316,47.79407206 7.21579316,47.79407206</gml:coordinates>
</gml:Box>
</gml:boundedBy>
<qgs:geometry>
<gml:Point srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">7.21579316,47.79407206</gml:coordinates>
</gml:Point>
</qgs:geometry>
<qgs:id>117</qgs:id>
<qgs:basin_id>0</qgs:basin_id>
<qgs:land_area_id>0</qgs:land_area_id>
<qgs:field_id>7</qgs:field_id>
<qgs:country_id>81</qgs:country_id>
<qgs:existence_kind_id>1</qgs:existence_kind_id>
<qgs:lahee_class_id>0</qgs:lahee_class_id>
<qgs:well_status_id>0</qgs:well_status_id>
<qgs:operator_id>0</qgs:operator_id>
<qgs:name>ALS-5</qgs:name>
<qgs:uwi>"UWI200028"</qgs:uwi>
<qgs:spuddate></qgs:spuddate>
<qgs:source></qgs:source>
<qgs:surfacelatitude>47.783</qgs:surfacelatitude>
<qgs:surfacelongitude>7.2103</qgs:surfacelongitude>
<qgs:coordrefsys>"WGS84"</qgs:coordrefsys>
<qgs:epsgcode>0</qgs:epsgcode>
<qgs:remarks>"Test de chargement massif"</qgs:remarks>
<qgs:version>1</qgs:version>
<qgs:updated>2016-05-09T16:54:46</qgs:updated>
<qgs:created>2016-04-08T11:07:34</qgs:created>
<qgs:createdby>Benoit Gotab</qgs:createdby>
<qgs:updatedby>cedric valentini</qgs:updatedby>
</qgs:shop>
</gml:featureMember>
<gml:featureMember>
<qgs:shop fid="shop.118">
<gml:boundedBy>
<gml:Box srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">7.21863975,47.77477166 7.21863975,47.77477166</gml:coordinates>
</gml:Box>
</gml:boundedBy>
<qgs:geometry>
<gml:Point srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">7.21863975,47.77477166</gml:coordinates>
</gml:Point>
</qgs:geometry>
<qgs:id>118</qgs:id>
<qgs:basin_id>0</qgs:basin_id>
<qgs:land_area_id>0</qgs:land_area_id>
<qgs:field_id>7</qgs:field_id>
<qgs:country_id>81</qgs:country_id>
<qgs:existence_kind_id>1</qgs:existence_kind_id>
<qgs:lahee_class_id>0</qgs:lahee_class_id>
<qgs:well_status_id>0</qgs:well_status_id>
<qgs:operator_id>0</qgs:operator_id>
<qgs:name>ALS-6</qgs:name>
<qgs:uwi>"UWI200029"</qgs:uwi>
<qgs:spuddate></qgs:spuddate>
<qgs:source></qgs:source>
<qgs:surfacelatitude>47.784</qgs:surfacelatitude>
<qgs:surfacelongitude>7.2104</qgs:surfacelongitude>
<qgs:coordrefsys>"WGS84"</qgs:coordrefsys>
<qgs:epsgcode>0</qgs:epsgcode>
<qgs:remarks>"Test de chargement massif"</qgs:remarks>
<qgs:version>1</qgs:version>
<qgs:updated>2016-05-09T16:54:53</qgs:updated>
<qgs:created>2016-04-08T11:07:34</qgs:created>
<qgs:createdby>Benoit Gotab</qgs:createdby>
<qgs:updatedby>cedric valentini</qgs:updatedby>
</qgs:shop>
</gml:featureMember>
<gml:featureMember>
<qgs:shop fid="shop.120">
<gml:boundedBy>
<gml:Box srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">7.33968936,47.63075245 7.33968936,47.63075245</gml:coordinates>
</gml:Box>
</gml:boundedBy>
<qgs:geometry>
<gml:Point srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">7.33968936,47.63075245</gml:coordinates>
</gml:Point>
</qgs:geometry>
<qgs:id>120</qgs:id>
<qgs:basin_id>0</qgs:basin_id>
<qgs:land_area_id>0</qgs:land_area_id>
<qgs:field_id>7</qgs:field_id>
<qgs:country_id>81</qgs:country_id>
<qgs:existence_kind_id>1</qgs:existence_kind_id>
<qgs:lahee_class_id>0</qgs:lahee_class_id>
<qgs:well_status_id>0</qgs:well_status_id>
<qgs:operator_id>0</qgs:operator_id>
<qgs:name>ALS-8</qgs:name>
<qgs:uwi>"UWI200035"</qgs:uwi>
<qgs:spuddate></qgs:spuddate>
<qgs:source></qgs:source>
<qgs:surfacelatitude>47.786</qgs:surfacelatitude>
<qgs:surfacelongitude>7.2106</qgs:surfacelongitude>
<qgs:coordrefsys>"WGS84"</qgs:coordrefsys>
<qgs:epsgcode>0</qgs:epsgcode>
<qgs:remarks>"Test de chargement massif"</qgs:remarks>
<qgs:version>1</qgs:version>
<qgs:updated>2016-05-09T16:55:08</qgs:updated>
<qgs:created>2016-04-08T11:07:34</qgs:created>
<qgs:createdby>Benoit Gotab</qgs:createdby>
<qgs:updatedby>cedric valentini</qgs:updatedby>
</qgs:shop>
</gml:featureMember>
<gml:featureMember>
<qgs:shop fid="shop.82">
<gml:boundedBy>
<gml:Box srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">-1.23429613,49.21242489 -1.23429613,49.21242489</gml:coordinates>
</gml:Box>
</gml:boundedBy>
<qgs:geometry>
<gml:Point srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">-1.23429613,49.21242489</gml:coordinates>
</gml:Point>
</qgs:geometry>
<qgs:id>82</qgs:id>
<qgs:basin_id>4</qgs:basin_id>
<qgs:land_area_id>3</qgs:land_area_id>
<qgs:field_id>14</qgs:field_id>
<qgs:country_id>81</qgs:country_id>
<qgs:existence_kind_id>1</qgs:existence_kind_id>
<qgs:lahee_class_id>0</qgs:lahee_class_id>
<qgs:well_status_id>8</qgs:well_status_id>
<qgs:operator_id>103</qgs:operator_id>
<qgs:name>VN-31</qgs:name>
<qgs:uwi></qgs:uwi>
<qgs:spuddate></qgs:spuddate>
<qgs:source></qgs:source>
<qgs:surfacelatitude>-3</qgs:surfacelatitude>
<qgs:surfacelongitude>43</qgs:surfacelongitude>
<qgs:coordrefsys></qgs:coordrefsys>
<qgs:epsgcode>0</qgs:epsgcode>
<qgs:remarks></qgs:remarks>
<qgs:version>1</qgs:version>
<qgs:updated>2016-05-09T16:56:04</qgs:updated>
<qgs:created>2014-05-15T13:35:44</qgs:created>
<qgs:createdby>Christelle CVA</qgs:createdby>
<qgs:updatedby>cedric valentini</qgs:updatedby>
</qgs:shop>
</gml:featureMember>
<gml:featureMember>
<qgs:shop fid="shop.119">
<gml:boundedBy>
<gml:Box srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">-1.88447013,48.45450102 -1.88447013,48.45450102</gml:coordinates>
</gml:Box>
</gml:boundedBy>
<qgs:geometry>
<gml:Point srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">-1.88447013,48.45450102</gml:coordinates>
</gml:Point>
</qgs:geometry>
<qgs:id>119</qgs:id>
<qgs:basin_id>0</qgs:basin_id>
<qgs:land_area_id>0</qgs:land_area_id>
<qgs:field_id>7</qgs:field_id>
<qgs:country_id>81</qgs:country_id>
<qgs:existence_kind_id>1</qgs:existence_kind_id>
<qgs:lahee_class_id>0</qgs:lahee_class_id>
<qgs:well_status_id>0</qgs:well_status_id>
<qgs:operator_id>0</qgs:operator_id>
<qgs:name>ALS-7</qgs:name>
<qgs:uwi>"UWI200030"</qgs:uwi>
<qgs:spuddate></qgs:spuddate>
<qgs:source></qgs:source>
<qgs:surfacelatitude>47.785</qgs:surfacelatitude>
<qgs:surfacelongitude>7.2105</qgs:surfacelongitude>
<qgs:coordrefsys>"WGS84"</qgs:coordrefsys>
<qgs:epsgcode>0</qgs:epsgcode>
<qgs:remarks>"Test de chargement massif"</qgs:remarks>
<qgs:version>1</qgs:version>
<qgs:updated>2016-05-09T16:55:00</qgs:updated>
<qgs:created>2016-04-08T11:07:34</qgs:created>
<qgs:createdby>Benoit Gotab</qgs:createdby>
<qgs:updatedby>cedric valentini</qgs:updatedby>
</qgs:shop>
</gml:featureMember>
<gml:featureMember>
<qgs:shop fid="shop.122">
<gml:boundedBy>
<gml:Box srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">0.17109837,48.48336965 0.17109837,48.48336965</gml:coordinates>
</gml:Box>
</gml:boundedBy>
<qgs:geometry>
<gml:Point srsName="EPSG:4326">
<gml:coordinates cs="," ts=" ">0.17109837,48.48336965</gml:coordinates>
</gml:Point>
</qgs:geometry>
<qgs:id>122</qgs:id>
<qgs:basin_id>0</qgs:basin_id>
<qgs:land_area_id>0</qgs:land_area_id>
<qgs:field_id>7</qgs:field_id>
<qgs:country_id>81</qgs:country_id>
<qgs:existence_kind_id>1</qgs:existence_kind_id>
<qgs:lahee_class_id>0</qgs:lahee_class_id>
<qgs:well_status_id>0</qgs:well_status_id>
<qgs:operator_id>0</qgs:operator_id>
<qgs:name>ALS-10</qgs:name>
<qgs:uwi>"UWI200038"</qgs:uwi>
<qgs:spuddate></qgs:spuddate>
<qgs:source></qgs:source>
<qgs:surfacelatitude>48.2364</qgs:surfacelatitude>
<qgs:surfacelongitude>7.1092</qgs:surfacelongitude>
<qgs:coordrefsys>"WGS84"</qgs:coordrefsys>
<qgs:epsgcode>0</qgs:epsgcode>
<qgs:remarks>"Test de chargement massif"</qgs:remarks>
<qgs:version>1</qgs:version>
<qgs:updated>2016-05-09T16:55:25</qgs:updated>
<qgs:created>2016-04-08T11:07:34</qgs:created>
<qgs:createdby>Benoit Gotab</qgs:createdby>
<qgs:updatedby>cedric valentini</qgs:updatedby>
</qgs:shop>
</gml:featureMember>
</wfs:FeatureCollection>
And the source of my HTML is :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://openlayers.org/en/v3.17.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var vectorSource = new ol.source.Vector();
var vector = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 255, 1.0)',
width: 2
})
})
});
var map = new ol.Map({
layers: [vector],
target: document.getElementById('map'),
view: new ol.View({
center: [0, 0],
maxZoom: 19,
zoom: 6
})
});
var featureRequest = new ol.format.WFS().writeGetFeature({
srsName: 'EPSG:4326',
featureNS: 'http://127.0.0.1',
featureTypes: ['shop'],
outputFormat: 'application/json',
});
fetch('http://127.0.0.1/cgi-bin/puits/qgis_mapserv.fcgi?SERVICE=WFS', {
method: 'POST',
body: new XMLSerializer().serializeToString(featureRequest)
}).then(function(response) {
return response.json();
}).then(function(json) {
var features = new ol.format.GeoJSON().readFeatures(json);
vectorSource.addFeatures(features);
map.getView().fit(vectorSource.getExtent(), /** #type {ol.Size} */ (map.getSize()));
});
</script>
</body>
</html>
If someone can help me...;-)
Many thanks.

Answer 1

Change the outputFormat in your Javascript from application/json to GeoJSON:
var featureRequest = new ol.format.WFS().writeGetFeature({
srsName: 'EPSG:4326',
featureNS: 'http://127.0.0.1',
featureTypes: ['shop'],
outputFormat: 'GeoJSON',
});