jimpass
jimpass

Reputation: 353

Openlayers 3, WFS and QGIS server

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&amp;VERSION=1.0.0&amp;REQUEST=DescribeFeatureType&amp;TYPENAME=shop&amp;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.

Upvotes: 0

Views: 609

Answers (1)

spaceman
spaceman

Reputation: 31

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',
});

Upvotes: 1

Related Questions