[GIS] Openlayers coordinates changed to and from PostGIS

openlayers

I am using PostgreSQL 9.5.9, PostGIS 2.3.2, Openlayers 4.1.0, Geoserver 2.12.0. I am trying to save a polygon that was drawn in Openlayers into my PostGIS database, and then display that same polygon in Openlayers on a different page once saved. My Geoserver's polygon layer has a native srs of EPSG:4326, my Openlayer's Vector source srsname is EPSG:4326, the polygon is saved into my PostGis with a SRID of 4326. When I save the polygon and then try and show it in a Vector Layer in Openlayers the coordinates of the polygon are changed, and do not show on the map. Let me give you an example.

For creating the polygon I use a Vector source, a Draw interaction, and a GeoJson writer console out the results

var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var source = new ol.source.Vector({wrapX: false});

var vector = new ol.layer.Vector({
    id: 'polygon',
    source: source,
});
var layers = [raster, vector];

var latLong = ol.proj.fromLonLat([-99.624, 38.6855]);

var map = new ol.Map({
    layers: layers,
    target: 'map',
    view: new ol.View({
        center: latLong,
        zoom: 3
    })
});

var writer = new ol.format.GeoJSON();

draw = new ol.interaction.Draw({
    source: source,
    type: ("Polygon")
});
map.addInteraction(draw);

// From an onclick event
var geojsonStr = writer.writeFeatures(source.getFeatures());
console.log(data_obj);

I created a polygon that was a triangle next to Oklahoma City. The console.log output is the following:

{
    "type":"FeatureCollection",
    "features":[
        {
            "type":"Feature",
            "geometry":
                {
                    "type":"Polygon",
                    "coordinates":
                        [
                            [
                                [-10938204.082583297,4266407.778893127],
                                [-10968167.397671087,4213207.6072066445],
                                [-10892341.865612192,4215653.59211177],
                                [-10938204.082583297,4266407.778893127]
                            ]
                        ]
                },
            "properties":null
        }
    ]
}

Once I have the coordinates I then save the polygon in my PostGIS database with the following:

update "polygons" 
set "polygonGeomrty" = ST_GeomFromText('POLYGON((-10938204.082583297 4266407.778893127,-10968167.397671087 4213207.6072066445,-10892341.865612192 4215653.59211177,-10938204.082583297 4266407.778893127))', 4326) 
where "id" = 1

By using PGAdmin I can tell there have been changes updated to the polygon's row with id = 1.

In another page I try and display the polygon with the following:

var source = new ol.source.Vector({
                                    format: new ol.format.GeoJSON(),
                                    url: 'http://192.168.10.15:8080/geoserver/wfs?service=WFS&' +
                                    'version=2.0.0&request=GetFeature&typename=test:polygons&' +
                                    'outputFormat=application/json&srsname=EPSG:4326'
                                });

var layers = [
    new ol.layer.Tile({
        source: new ol.source.OSM()
    }),
    new ol.layer.Vector({
        source: source
    })
];

var latLong = ol.proj.fromLonLat([-99.624, 38.6855]);

var map = new ol.Map({
    layers: layers,
    target: 'map',
    view: new ol.View({
        center: latLong,
        zoom: 3
    })
});

var geojsonStr = writer.writeFeatures(source.getFeatures());

console.log(geojsonStr);

The result from the console.log is the following:

{
    "type":"FeatureCollection",
    "features":[
        {
            "type":"Feature",
            "id":"polygons.1",
            "geometry":{
                "type":"Polygon",
                "coordinates":[
                    [
                        [-1217635308666.079,6070149.041708249],
                        [-1220970809644.1304,null],
                        [-1212529950026.2046,7093282.5080803875],
                        [-1217635308666.079,6070149.041708249]
                    ]
                ]
            },
            "properties":{
                "project_id":1,
                "county_id":457,
                ...
            }
        }
    ]
}

As you can tell this set of coordinates is different from the first set of coordinates. The polygon does not display on the map, probably because the second coordinates are off the map.

How do I get the same coordinates, that were saved into PostGis, back to Openlayers?

Best Answer

You are not specifying any projection, so the default one is used as per the doc

OpenLayers is capable of dealing with most projections. If you do not explicitly set one, your map is going to use our default which is the Web Mercator projection (EPSG:3857).

Similarly, you are converting your coordinates from lat-long to 3857 via the command ol.proj.fromLonLat.

The coordinates of the polygons are not in lat-long but indeed in 3857. You can convert them back to lat-long before saving them

change 

var geojsonStr = writer.writeFeatures(source.getFeatures());

to 

 var geojsonStr = writer.writeFeatures(source.getFeatures(), {
      dataProjection: 'EPSG:4326',
      featureProjection: 'EPSG:3857'
    });
Related Question