[GIS] OpenLayers re-projection of vector source GeoJSON

coordinate systemgeojsonopenlayers

OpenLayers insists on drawing them over null island, what am I getting wrong?

            new ol.layer.Vector({
                title: 'vector',
                visible: true,
                source: new ol.source.Vector({
                    format: new ol.format.GeoJSON({
                        defaultDataProjection: 'EPSG:27700',
                        featureProjection: 'EPSG:3857'
                    }),
                    url: function(extent) {
                        return url;
                    },
                    strategy: ol.loadingstrategy.bbox,
                    crossOrigin: 'anonymous'
                }),
                style: new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: '#ff9900',
                        width: 1
                    })
                })
            })

Best Answer

Your code does not include a definition for EPSG:27700.

The definition for EPSG:27700 is not known to OpenLayers by default. In OL4, the definition can be set with new ol.proj.Projection(options), but it is not clear to me how to store this new Projection with OL4 (please comment). Another way of setting the definition is using proj4js (both OL3 and OL4). First you need to include proj4js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js" type="text/javascript"></script>

Then in your javascript, define the projection:

British National Grid (EPSG:27700):

proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
          '+x_0=400000 +y_0=-100000 +ellps=airy ' +
          '+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
          '+units=m +no_defs');

Or (for reference) Dutch Rijksdriehoeksstelsel (EPSG:28992):

proj4.defs("EPSG:28992","+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +towgs84=565.417,50.3319,465.552,-0.398957,0.343988,-1.8774,4.0725 +units=m +no_defs");

Now you can read and reproject the GeoJSON: OL4:

var vectorSource = new ol.source.Vector({
        features: (new ol.format.GeoJSON({
            defaultDataProjection: 'EPSG:27700',
            featureProjection: 'EPSG:3857'
        })).readFeatures(geojsonObject)
      });

or OL3 (?):

var vectorSource = new ol.source.Vector({
            format: new ol.format.GeoJSON({
                        defaultDataProjection: 'EPSG:27700',
                        featureProjection: 'EPSG:3857'
            }).readFeatures(geojsonObject);
Related Question