OpenLayers3 displaying Data in PostGIS

Environment for POSTGIS+GEOSERVER+OPENLAYERS3

First introduce the direct write good geojson for vector layer display example, refer to examples in geojson.html and icon.html , directly with the Geojson display vector layer

        var bsiconstyle = new Ol.style.Style ({/*icon style */image:new Ol.style.Icon (/** @type {Olx.style.IconO
        ptions} */({opacity:0.95, src: ' Data/bs2.png '})}); var bslayer = new Ol.layer.Vector ({/* icon layer */Source:new Ol.source.GeoJSON ({projection: ' EPSG : 3857 ', object: {"type": "Featurecollection", "Fe Atures ": [{" Type ":" Feature "," geometry ": {" type ":" Point "," coordinates ": [121.50, 31.22]}," Properties ": {"Name": "BS1"}, {"Type": "Feature", "geometry": {"type": "Point", "coordinates": [121.52, 31.10]}, "PR Operties ": {" name ":" BS2 "}}, {" Type ":" Feature "," geometry ": {" type ":" Point "," coordinates ": [121.38, 3 1.24]}, "Properties": {"name": "BS3"}}, {"Type": "Feature", "geometry": {"type": "Point", "Coordin
	   Ates ": [121.47, 31.29]}, "Properties": {"name": "BS4"}}, {"Type": "Feature", "geometry": {"type": "Point", "coordinates": [121.43, 31.
        }, "Properties": {"name": "BS5"}}]}), Style:bsiconstyle });

        var map = new ol. Map ({            target: ' map ',             Controls:ol.cont Rol.defaults (). Extend ([New Ol.control.ScaleLine ()/* scale */]),             layers: [  &N Bsp       New Ol.layer.Tile {              source:new Ol.source.OSM (), &NB Sp             extent:ol.proj.transformExtent ([120.50, 30.79, 122.50, 31.64], ' epsg:4326 ', ' EP sg:3857 ')//* Layer Render range */         },           Bslayer     &NBSP ;  ],             view:new ol. View ({                Center:ol.proj.transform ([121.50, 31.22], ' epsg:4326 ', ' EP sg:3857 '),                 Zoom:11,             &NB Sp   Minzoom:10 &NBSp
          })        });

The results appear as follows:

second, the data is present in PostGIS and then published to GeoServer and then displayed with OpenLayers3 1. Depositing data into PostGIS

Create PostGIS databases, create tables, and more see http://live.osgeo.org/zh/quickstart/postgis_quickstart.html

Because the OSM database was already in place (see the previously configured article), the table is created directly here.

(1) Table Spatial_ref_sys Storage of the legal space coordinate system, I here only the OSM 900913, so to insert epsg:4326, if some words will not be inserted, how to insert can be queried here to/HTTP spatialreference.org/ref/epsg/4326/, you can also query other coordinate systems here, click PostGIS spatial_ref_sys INSERT statement to get the INSERT statement:

INSERT into Spatial_ref_sys (Srid, Auth_name, Auth_srid, Proj4text, Srtext) VALUES (94326, ' epsg ', 4326, ' +proj=longlat + ELLPS=WGS84 +datum=wgs84 +no_defs ', ' geogcs[' WGs ", datum[" wgs_1984 ", spheroid[" WGS 84 ", 6378137,298.257223563, authority["EPSG", "7030"]],authority["EPSG", "6326"]],primem["Greenwich", 0,authority["EPSG", "8901"]],unit[" Degree ", 0.01745329251994328,authority[" EPSG "," 9122 "]],authority[" EPSG "," 4326 "]];

(2) Create a base station table that stores information about the data, the ID is the primary key, there is a name, and radius two attributes.

CREATE TABLE basestations (ID int4 primary key, name varchar (), RADIUS float8);

(3) Now add a space bar to store your geographic location. It's customary to call this column The_geom. It records why the data type (point, line, Polygon), has several dimensions (here is two-dimensional), and the spatial coordinate system. The epsg:4326 coordinate system is used here (the position shown in the openlayers using 900913 is incorrect, and 4326 is OK, since inserting the data is 4326 of the coordinate systems)

SELECT addgeometrycolumn (' basestations ', ' The_geom ', 94326, ' point ', 2);

(4) Inserting 5 data into the table

INSERT into basestations (ID, The_geom, name, radius) VALUES (1001,st_geomfromtext (' Point (121.50 31.22) ', 94326), ' Base Station 1001 ', 2500);
INSERT into basestations (ID, The_geom, name, radius) VALUES (1002,st_geomfromtext (' Point (121.52 31.10) ', 94326), ' Base Station 1002 ', ();
INSERT into basestations (ID, The_geom, name, radius) VALUES (1003,st_geomfromtext (' Point (121.38 31.24) ', 94326), ' Base Station 1003 ', 2800);
INSERT into basestations (ID, The_geom, name, radius) VALUES (1004,st_geomfromtext (' Point (121.47 31.29) ', 94326), ' Base Station 1004 ', ();
INSERT into basestations (ID, The_geom, name, radius) VALUES (1005,st_geomfromtext (' Point (121.43 31.21) ', 94326), ' Base Station 1005 ', 2800);

The database is complete here.

2. Publish to GeoServer

(1) and the previous release of the process is the same, do not say, but one thing to note, the release of the SRS to be set to 4326, cannot be 900913

(2) In order to enable openlayers to display in vector layer and use JSONP cross-domain, need to let GeoServer allow JSONP format, need to change the geoserver of Web. XML, my location is in D:\Program Files (x86) \ GeoServer 2.7.0\webapps\geoserver\web-inf\web.xml, to remove the original note here.

<!--Can be true or False (defaults to:false). -
<!--when True the JSONP (text/javascript) output format is enabled--

<context-param>
<param-name>ENABLE_JSONP</param-name>
<param-value>true</param-value>
</context-param>
3. Use OPENLAYERS3 display example to refer to vector-wfs.html

var bsiconstyle = new Ol.style.Style ({/*icon style */image:new Ol.style.Icon (/** @type {olx.style.IconOptions} */({
opacity:0.95, src: ' data/bs2.png ')});  var bssource = new Ol.source.ServerVector ({format:new Ol.format.GeoJSON (), loader:function (extent, resolution, projection) {var url = ' http://localhost:8080/geoserver/osmtest/ows?service=wfs& ' + ' VERSION=1.0.0&A mp;request=getfeature&typename=osmtest:basestations& ' + ' &outputformat=text/javascript&format_
        Options=callback:loadfeatures ' + ' &srsname=epsg:3857&bbox= ' + extent.join (', ') + ', epsg:3857 ';
    $.ajax ({url:url, DataType: ' Jsonp '}); }, Strategy:ol.loadingstrategy.createTile (new Ol.tilegrid.XYZ ({maxzoom:19})), projection: ' epsg:38
57 '});
var loadfeatures = function (response) {Bssource.addfeatures (Bssource.readfeatures (response));}; var bslayer = new Ol.layer.Vector ({source:bssource, style:bsiconstyle}); 

Before trying to use GML or Application/json Ouputformat, but all unsuccessful, do not know why others can succeed, and finally just implemented in this way.