How can i use WFS in Openlayers 3 with mapserver and PostGis?

Question

I didn't find a documentation to display features ( vectors ) combining MapServer ( mapfile ) and PostgreSQL/PostGIS and OpenLayers 3 ?

Answer 1

The first step should be to enter your data in a PostGIS database. Then you have to connect MapServer to PostGIS and create layers for each of your tables or views in the PostGIS db. Finally you will have to load these layers in OpenLayers.

Answer 2

First. I am not very familiar with MapServer but according to it's documentation,

In order to enable MapServer to serve WFS, it MUST be compiled against certain libraries

Second, you have to configure a PostGIS connection in your MapServer, documentation for that here.

Third, you will have to create a mapfile to describe the layer to MapServer.

Once you have the end-point of your WFS resource like this example: demo.mapserver.org/cgi-bin/wfs?SERVICE=WFS&VERSION=1.0.0&REQUEST=getfeature&TYPENAME=continents&MAXFEATURES=1&OUTPUTFORMAT=gml2

Fourth. Example of adding a WFS layer in OL3: openlayers.org/en/v3.15.1/examples/vector-wfs.html?q=wfs

Offtopic:

I would rather use GeoServer, for WFS. docs.geoserver.org/2.8.3/user/

Once you publish a layer in GeoServer it's available in different formats out of the box as WMS(PNG, JPEG, GIF, TIFF, etc.), WFS(GML2/3), GeoJSON, KML, etc.

Answer 3

I recently setup a web mapping application with OL 3.15, calling a WFS layer published by mapserver 7.0, which uses PostGIS based data tables backend.

Here are the relevant parts of the mapfile:

CONNECTIONTYPE postgis
        CONNECTION "dbname=water host=127.0.0.1 port=5432 user=water_dba password=<your-db-password> "
        DATA "geom FROM meters_quality USING UNIQUE meter_num USING srid=2039"
        METADATA
                "wfs_title"     "Water Meters"
                "wfs_onlineresource" "<your-url-to-mapfile"
                "wfs_srs"       "EPSG:4326"
                "wfs_enable_request"    "*"
                "wfs_abstract"  "Water Meters"
                'ows_title' 'meters'
        END

And here is the OpenLayers 3.15 code:

var metersSource = new ol.source.Vector({
        format: new ol.format.WFS({
                featureNS: "http://mapserver.gis.umn.edu/mapserver",
                featureType: "meters",
                featurePrefix: "ms"
        }),

        loader: function(extent,resolution,projection) {
                var url = '<your-url-to-mapfile&>' +
                'service=WFS&request=GetFeature&typename=meters&srsname=EPSG:4326&' +
                'version=1.1.0&' + extent.join(',') +',EPSG:3857';

                $.ajax({ url: url }).done(function(resp) {
                        fWFS = new ol.format.WFS(),
                        metersSource.addFeatures(fWFS.readFeatures(resp));
                 });
        },
        strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({
                maxZoom: 19})),
});

var metersStyle = new ol.style.Style({
        image: new ol.style.Circle({
            radius: 6,
            fill: new ol.style.Fill({
                color: 'rgba(255,255,255,0.2)',
            }),
            stroke: new ol.style.Stroke({
                color: 'rgba(0,0,255,0.6)',
                width: 2,
            })
        })
});

var metersVector = new ol.layer.Vector ({
        source: metersSource,
            style: metersStyle,
});

Maybe that will be of some help.