Integrating WFS as gml in OL5

Question

I try to visualize a WFS (from MapServer) in OL5.

The WFS works well (I can implement it without any problems in QGIS). Also a request like:

http://blablabla/mapserv?service=WFS&version=1.1.0&request=GetFeature&typename=Flurstueckepunkt&srsname=EPSG:25832&bbox=411554,5791886,411677,5792008 gives me a nice gml-Output in epsg: 25832.

I try to implement it in OpenLayers like:

var vectorSource = new VectorSource({
        format: new WFS(), 
        loader: function(extent, resolution, projection) {
        var url = 'http://blablabla/mapserv?service=WFS&version=1.1.0&request=GetFeature&typename=ms:Flurstueckepunkt&srsname=EPSG:25832&bbox=412200,5791337,413600,5791800,EPSG:25832'
          fetch(url).then(function(response) {
            return response.text();
          }).then(function(text) {
            var features = vectorSource.getFormat().readFeatures(text);

            // Add parsed features to vectorSource
            vectorSource.addFeatures(features);
          }).catch(function(error) {
            alert(error.message);
          })
        }
      });

    var WFSLayer =new VectorLayer(
    {   
        source: vectorSource,
               projection: 'EPSG:25832',
        style: new Style({     fill: new Fill({ color: 'yellow'  })
    })
      });


      var view = new View({
           center: [rechtswert,hochwert],
        zoom: mzoom,
        projection: 'EPSG:25832'
      });
      var map = new Map({

        layers: [osm,wmsLayer2,WFSLayer],
        target: 'map',
        view: view
      });

...but the WFS-Layer is not shown at all.

Via the Mozialle-Debugger I can see, that the wfs-request workes, but nothing is visualized? Has anybody an idea what is wrong here?

score 0 · Answer 1 · answered Jan 03 '20 at 14:12

Allright, I got it. As the WFS ist delivering points the visualisation-style is important.

It workes now with:

var vectorSource = new Vector({
  format: new GML3(),
  loader: function(extent) {
  var url = 'http://blablalbvlAn/cgi-bin/mapserv?service=WFS&version=1.1.0&request=GetFeature&typename=ms:Flurstueckepunkt&srsname=EPSG:25832&' +
  'bbox='+ extent.join(',') +',EPSG:25832';

     var xhr = new XMLHttpRequest();
     xhr.open('GET', url);
     var onError = function() {
       vectorSource.removeLoadedExtent(extent);
     }
     xhr.onerror = onError;
     xhr.onload = function() {
       if (xhr.status == 200) {
         vectorSource.addFeatures(
             vectorSource.getFormat().readFeatures(xhr.responseText));
                var features3 = vectorSource.getFeatures();
       } else {
         onError();
       }
     }
     xhr.send();
   },
   strategy: bbox
 });




    var WFSLayer =new VectorLayer(
    {   
        source: vectorSource,
        style:  new Style({
    image: new CircleStyle({
      radius: 5,
      fill: new Fill({
        color: 'orange'
      })
    })
      })
      });

Integrating WFS as gml in OL5

1 Answers1