0

I'm having trouble rendering my WFS features in projection EPSG:4326, the below code works when I switch projection to EPSG:3857 (and change the center), it works fine. I've checked the response from the server and its coming back as EPSG:4326 format. The projection in my Geoserver for this layer is EPSG:4326. Am I missing a setting somewhere in the openlayer code?

import WFS from 'ol/format/WFS';
import GML from 'ol/format/GML';
import Tile from 'ol/layer/Tile';
import Vector from 'ol/layer/Vector';
import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
import Select from 'ol/interaction/Select';
import DragPan from 'ol/interaction/DragPan';
import Modify from 'ol/interaction/Modify';
import {Draw} from 'ol/interaction';
import VectorSource from 'ol/source/Vector';

import MouseWheelZoom from 'ol/interaction/MouseWheelZoom';
import {click, pointerMove, altKeyOnly} from 'ol/events/condition.js';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import Snap from 'ol/interaction/Snap';
import {Map, View, Feature} from 'ol';
import OSM from 'ol/source/OSM';
import {fromLonLat} from 'ol/proj';


var formatWFS = new WFS( {
}
);

var formatGML = new GML({
    featureNS: 'http://wamp-dev/us',
    featureType: 'crop_other',
    srsName: 'EPSG:4326'
});

var xs = new XMLSerializer();

var sourceWFS = new VectorSource({
    loader: function (extent) {
        $.ajax('http://192.168.5.106:91/ows', {
            type: 'GET',
            data: {
                service: 'WFS',
                version: '1.1.0',
                request: 'GetFeature',
                typename: 'US:crop_other',
                srsname: 'EPSG:4326',
                bbox: extent.join(',') + ',EPSG:4326'
            }
        }).done(function (response) {
            console.log(response);
            sourceWFS.addFeatures(formatWFS.readFeatures(response, 
                {dataProjection: 'EPSG:4326', featureProjection:EPSG:4326'})
        );
        });
    },
    strategy: bboxStrategy
});

var layerWFS = new Vector({
    source: sourceWFS
});

var interaction;

var interactionSelectPointerMove = new Select({
    condition: pointerMove
});

var interactionSelect = new Select({
    style: new Style({
        stroke: new Stroke({
            color: '#FF2828'
        })
    })
});

var interactionSnap = new Snap({
    source: layerWFS.getSource()
});

var map = new Map({
    target: 'map',
    controls: [],
    interactions: [
        interactionSelectPointerMove,
        new MouseWheelZoom(),
        new DragPan()
    ],
    layers: [
        new Tile({
            source: new OSM({
                url: 'https://cartodb-basemaps-{a-d}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png',
                opaque: false,
                attributions: []
            })
        }),
        layerWFS
    ],
    view: new View({
        projection: 'EPSG:4326',
        center: [-119.934411,36.627444],
        //center: [-13350873.59,4401244.07],
        zoom: 15
    })
});
1

When using a vectorSource, OL will transform from Data Projection (4326 by default) to View Projection (3857 by default). When providing a list of features (ex, from WFS/GeoJSON parser), one must set the data and feature projection explicitly.

Change

sourceWFS.addFeatures(formatWFS.readFeatures(response));

to

sourceWFS.addFeatures(format.readFeatures(response,
    {dataProjection: 'EPSG:4326',
    featureProjection: 'EPSG:4326'});
  • Thank you, I thought this would work but didn't, I've updated the code block in my question to reflect this. – JoelB Sep 27 '18 at 0:32
1

Found the problem. In the WFS request I'm setting the property of the srs to 'srsname' not 'srs'. After changing that it works.

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.