ol3 support

[WillieMaddox]

Hello,

I would like to use ol3 rather than ol2 to connect to tinyows. I saw the mapserver example for ol2, but has anyone had success using ol3 with tinyows?

Thanks,

[Jenselme]

Even if this question is over a year old, I am posting an answer for future reference (I wandered the same thing this week).

You can use it with OL3 with the code below. Just note that the updates of features won't work. It seems that OL3 only supports WFS-T 1.1.0 but TinyOWS only supports 1.0.0 (creation works though).

var formatWFS = new ol.format.WFS({
    gmlFormat: new ol.format.GML2({
        featureNS: 'http://www.tinyows.org/',
        featureType: [LAYER_NAME],
        srsName: EPSG,
        featurePrefix: 'test',
    }),
});

var formatGML = new ol.format.GML2({
    featureNS: 'http://www.tinyows.org/',
    featureType: [LAYER_NAME],
    srsName: EPSG,
    featurePrefix: 'test',
});

var xs = new XMLSerializer();

var sourceWFS = new ol.source.Vector({
    loader: function (extent) {
        $.ajax(WFS_SERVER, {
            type: 'GET',
            data: {
                service: 'WFS',
                version: '1.0.0',
                request: 'GetFeature',
                typename: LAYER_NAME,
                srsname: EPSG,
                bbox: `${extent.join(',')},${EPSG}`,
            }
        }).done(function (response) {
            console.log(response);
            console.log(formatWFS.readFeatures(response))
            sourceWFS.addFeatures(formatWFS.readFeatures(response));
        });
    },
    strategy: ol.loadingstrategy.bbox,
    projection: EPSG,
});

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

var interaction;

var interactionSelectPointerMove = new ol.interaction.Select({
    condition: ol.events.condition.pointerMove
});

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

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

var swissProjection = new ol.proj.Projection({
    code: 'EPSG:2056',
    // The extent is used to determine zoom level 0. Recommended values for a
    // projection's validity extent can be found at https://epsg.io/.
    extent: [2485869.5728, 1076443.1884, 2837076.5648, 1299941.7864],
    units: 'm'
});
ol.proj.addProjection(swissProjection);

var map = new ol.Map({
    target: 'map',
    controls: [],
    interactions: [
        interactionSelectPointerMove,
        new ol.interaction.MouseWheelZoom(),
        new ol.interaction.DragPan()
    ],
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM({
                url: 'https://cartodb-basemaps-{a-d}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png',
                opaque: false,
                attributions: []
            })
        }),
        layerWFS
    ],
    view: new ol.View({
        center: [2647793.7, 1216394.1],
        zoom: 0,
        projection: EPSG,
        extent: [2485869.5728, 1076443.1884, 2837076.5648, 1299941.7864],
    })
});

If you want to use WFS 1.1.0, you will have to change ol.format.GML2 into ol.format.GML:

var formatWFS = new ol.format.WFS();

var formatGML = new ol.format.GML({
    featureNS: 'http://www.tinyows.org/',
    featureType: [LAYER_NAME],
    srsName: EPSG,
    featurePrefix: 'test',
});

var xs = new XMLSerializer();

var sourceWFS = new ol.source.Vector({
    loader: function (extent) {
        $.ajax(WFS_SERVER, {
            type: 'GET',
            data: {
                service: 'WFS',
                version: '1.0.0',
                request: 'GetFeature',
                typename: LAYER_NAME,
                srsname: EPSG,
                bbox: `${extent.join(',')},${EPSG}`,
            }
        }).done(function (response) {
            console.log(response);
            console.log(formatWFS.readFeatures(response))
            sourceWFS.addFeatures(formatWFS.readFeatures(response));
        });
    },
    strategy: ol.loadingstrategy.bbox,
    projection: EPSG,
});

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

var swissProjection = new ol.proj.Projection({
    code: 'EPSG:2056',
    // The extent is used to determine zoom level 0. Recommended values for a
    // projection's validity extent can be found at https://epsg.io/.
    extent: [2485869.5728, 1076443.1884, 2837076.5648, 1299941.7864],
    units: 'm'
});
ol.proj.addProjection(swissProjection);

var map = new ol.Map({
    target: 'map',
    controls: [],
    interactions: [
        interactionSelectPointerMove,
        new ol.interaction.MouseWheelZoom(),
        new ol.interaction.DragPan()
    ],
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM({
                url: 'https://cartodb-basemaps-{a-d}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png',
                opaque: false,
                attributions: []
            })
        }),
        layerWFS
    ],
    view: new ol.View({
        center: [2647793.7, 1216394.1],
        zoom: 0,
        projection: EPSG,
        extent: [2485869.5728, 1076443.1884, 2837076.5648, 1299941.7864],
    })
});