How can I use WFS from Geoserver with OpenLayers 3?

Question

I have tried with different setups and formats, but no success.

With firebug, I can see that the json data is loaded, but nothing shows up on the map.

Have anyone experience with geoserver and wfs in openlayers 3?

var layer_ojd_vector = new ol.layer.Vector({
 source: new ol.source.Vector({
  parser: new ol.parser.GeoJSON(),
  url: http://SERVER:8080/geoserver/NS/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=NS:LAYER&maxFeatures=50&outputFormat=json
 }),
 style: new ol.style.Style({rules: [
  new ol.style.Rule({
   filter: 'geometryType("point")',
   symbolizers: [
     new ol.style.Shape({
       fillColor: '#013',
       size: 40
     })
   ]
 })
]})  
});

Answer 1

I've seen this answered quite a bit on here.

You must run the HTML file from a webserver and access by:

SERVER:8080/geoserver/index.html

or however yours is setup.

You can't simply double click the HTML file and view the WFS layer.

Answer 2

I agree with Kyle. Even a year later it took me a while to find good examples with explanation which can be easily reproduced.

I do like the examples from the 'the book of openlayers 3'. Unfortunately I do not have access to the book itself but I believe it to be well written judging from the examples.

This example is for ol 3.4

http://acanimal.github.io/thebookofopenlayers3/chapter03_07_query_wfs.html

I had some problems replicating the ol 3.5 vector-wfs master example from the openlayers examples page. These problems are probably fixed by now.

http://openlayers.org/en/master/examples/vector-wfs.html

I created three jsfiddle to demonstrate ol 3.5.0 calls via AJAX for ol.format.GeoJSON (JSON and JSONP) as well as ol.format.WFS.

WFS (CORS access has to enabled on the web server, e.g. for Apache Tomcat)

http://jsfiddle.net/goldrydigital/9d3jzpna/

JSON (CORS access has to enabled on the web server, e.g. for Apache Tomcat)

http://jsfiddle.net/goldrydigital/ucspgvx0/

JSONP (JSONP needs to be enabled in Geoserver)

http://jsfiddle.net/goldrydigital/08zzh9n9/

Answer 3

I think what you need is this:
REST configuration API reference
With REST you can call data between servers (or between e.g. Apache on port 80 and geoserver in port 8080 if it's the same server).