Style vector with OpenLayers 3

Question

I'm trying to add a WFS/vector layer with OpenLayers 3. So far I've tried

var vectorSource = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: function(extent) {

        var newExt = ol.proj.transformExtent(extent,'EPSG:3857','EPSG:25832');
      return 'http://localhost:8080/geoserver/wfs?service=WFS&' +
          'version=1.1.0&request=GetFeature&typename=postgre:polygon_test&' +
          'outputFormat=application/json&srsname=EPSG:25832&' +
          'bbox=' + newExt.join(',') + ',EPSG:25832';
    },
    strategy: ol.loadingstrategy.bbox
  });

  var vector = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'black'
        }),
        stroke: new ol.style.Stroke({
            color: 'blue',
            width: 2
        })
    })
  });

var map = new ol.Map({
target: 'map1',
layers: [
    osmLayer,
    vector
],
view: new ol.View({
center: ol.proj.fromLonLat([10.09, 56.45]),
    maxExtent: new ol.extent.boundingExtent(384015, 5846682, 516991, 5931295),
    zoom: 15
    })
});

If I debug the page with Chrome and look at the network tab I get a reasonable GeoJSON response but nothing is displayed. What am I missing?

I found the reason for the problem. First of all I've missed projection in the format definition. I looks like this now:

format: new ol.format.GeoJSON({defaultDataProjection:'EPSG:25832'})

Furthermore GeoServer adds this:

"crs" : {"type" : "name","properties" : {"name" : "urn:ogc:def:crs:EPSG::25832"}}

at the end of the GeoJSON data. If I download the GeoJSON data and put it in a file on the server and strips the crs-part, the features are added to the map.

Either I need to stop GeoServer from adding CRS to the output or I have to configure OpenLayers to accept it.

Any suggestions?

Answer 1

After much googling and debugging OpenLayers the solution is as simple as adding this line to my code:

proj4.defs('urn:ogc:def:crs:EPSG::25832', proj4.defs('EPSG:25832'));

The first few lines of my code looks like this now

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://openlayers.org/en/v3.19.1/build/ol-debug.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js"></script>
<script src="http://epsg.io/25832.js"></script>
<script type="text/javascript">

window.onload = function() 
{
    proj4.defs('urn:ogc:def:crs:EPSG::25832', proj4.defs('EPSG:25832'));
    var euref89z32proj = ol.proj.get('EPSG:25832');