Display WFS layer in ol3

Question

I'm working with geoserver and openlayers 3, i have a hosted layer in geoserver that i want display using ol3 as a wfs layer. it doesn't show any errors, but i dont get the map. it works with wms, but not wfs. I'm using wamp server to host my application.

Please can anyone help me to fix that? This is my code :

var v=new ol.layer.Vector({
       source: new ol.source.Vector({
            format: new ol.format.WFS({
                version: '1.1.0',
                url: 'http://localhost:8080/geoserver/wfs',
                featurePrefix: 'opengeo', 
                featureType: 'comgeo', 
                featureNS: 'http://localhost:8080/opengeo', 
                geometryName: 'geom'
            })
        })  
});
var map = new ol.Map({
    target: 'map-id',
    layers: [v],
    view: new ol.View({
        projection: 'EPSG:4326',

        center: [0, 0],
        zoom: 1
    })     
});

i read in forums that i need to set proxy, i did that and my proxy works fine, but i dont know how to it use in my code (Openlayers.ProxyHost). When i use firebug, under network/images tab, i can see wms requests, but not for wfs. Thanks in advance.

gis newbie gis newbie · Accepted Answer · 2015-05-24T03:40:19

Finally, I solved my problem, so I want to share the solution with you.

First thing there were some mistakes in my previous code, this the right way to set a wfs layer :

var u = "http://localhost/geoserver/wfs?&service=wfs&version=1.1.0&request=GetFeature&typeNames=opengeo:comgeo";
var v = new ol.layer.Vector({
    title: 'comgeo',
           source: new ol.source.Vector({
                url: '/cgi-bin/proxy.cgi?url='+ encodeURIComponent(u),

                format: new ol.format.WFS({

                })
           })   
});

u is the wfs request, the paramvalue opengeo is the workspace in geoserver, and comgeo is the layer.

You need to escape this url by using encodeURIComponent function, so you don't get the famous error like :

Could not determine geoserver request from http request

The first part of my url /cgi-bin/proxy.cgi?url= is that because you need a proxy if your application is running from another location (I'm using wamp to host mine).

To get your proxy working try this tutorial: set proxy

Use the proxy like in my code, this

OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";

is not available in ol3.

Display WFS layer in ol3

2 Answers