How to connect OpenLayers to PostGIS data?

Unfortunately you cannot connect a web page directly to a database because of security concerns, normally you need some middleware to join the two together.

So for your example and if you want to stick with Open Source software you could easily use GeoServer as your geographic server to serve your data from your PostGIS database to your OpenLayers HTML web page.

Why this is good is that GeoServer will serve the data in a standard way, OGC Web Map Server (WMS) or Web Feature Service (WFS) and both are understood by OpenLayers and many other APIs (ESRI ones, Leaflet etc) and other Desktop GIS software (ESRI, MapInfo, QGIS, uDig etc)

So I would look at the GeoServer documentation getting started which walks you through how to connect GeoServer to PostGIS and then serve the data.

http://docs.geoserver.org/stable/en/user/gettingstarted/index.html

If you are new to these types of things there is no better place to start than the OpenGeo tutorials

http://workshops.opengeo.org/

I would definitely stick with your data being in PostGIS if

a) you have a lot of data b) you want to run queries (like you do) and c) if lots of people are going to use your app

If you are going to run queries I would look at Web Processing Services (WPS) these are still "new" but these are supported in GeoServer.

If however you have a small amount of data and can pre-run the queries and then just use OpenLayers to display then you should stick to using GeoJSON from a flat file or even look at TopoJSON which is gaining alot of popularity with D3 javascript library - see here http://bost.ocks.org/mike/map/ Mike Bostock's tutorial is great.

Hope that helps

One way to connect the two would be with GeoJSON. Here is an example query of a PostGIS database:

SELECT population,ST_AsGeoJSON(geom) FROM censusblocks

Once you get your query results you can do something like this:

       var geojson_format = new OpenLayers.Format.GeoJSON();
       var vector_layer = new OpenLayers.Layer.Vector(); 
       map.addLayer(vector_layer);
       vector_layer.addFeatures(geojson_format.read(featurecollection));

Where featurecollection is your PostGIS query result;

Be advised though that if your GeoJSON is very complex there might be loading/rendering issues.

See the source this OpenLayers example for more info on this technique

I use PostGis together with Openlayers 3/4 without GeoServer. The way I choose is to get geojson from a Postgis-database via a function I call, which returns the data and styles it acording my settings.

In Javascript I define the data and styling => Javascript-function calls a php-script via GET to retrive data from Postgis => function styles the data to render in Openlayers 3. The whole sripts can be seen in Is there an easy way to use Postgis-geojson in Openlayers 3?

It seems that this way is not secure, because GET-Strings could be manipulated, but I use a call via https and the serverside php-script checks if a SESSION is set. So the scripts cannot be executed without beeing logged in. We use this in a very small group, but it might be not a good way in an environment, where many poeple are accessing the data.