1

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?

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.