Exponential coordinate notation in Open Layers GeoJson

Question

I'm trying to draw a line using Open Layers and I sight the example here - https://openlayers.org/en/latest/examples/geojson.html .

{
   'type': 'Feature',
   'geometry': {
   'type': 'LineString',
   'coordinates': [[4e6, -2e6], [8e6, 2e6]]
 }

The confusion here is that how is regular lat lon coordinates converted into this exponential notation. If I use regular lat lon, nothing is drawn on the map?

{
   'type': 'Feature',
   'geometry': {
   'type': 'LineString',
   'coordinates': [[42.12154, -20.14515], [80.7845241, 20.4545741]]
 }

How do I convert my coordinates to that exponential notation?

Is there a way to draw geojson in OL using the regular coordinate system?

Answer 1

These coordinates are not in lat-long but in 3857.

To use lat-long, you would need to change the Json declaration, by removing the CRS attribute

var geojsonObject = {
        'type': 'FeatureCollection',
        'crs': {
          'type': 'name',
          'properties': {
            'name': 'EPSG:3857'
          }
        }, ...

You can study this example and the accompanying GeoJson .

Answer 2

To use latitude/longitude in your GeoJSON, you need to add the correct projections to the GeoJSON format:

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

The OSM map tiles use EPSG:3857, the GeoJSON uses EPSG:4326 (which is the default).

proof of concept

code snippet:

 var styles = { 'LineString': new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'green', width: 2 }) }) }; var styleFunction = function(feature) { return styles[feature.getGeometry().getType()]; }; var geojsonObject = { 'type': 'FeatureCollection', 'features': [{ 'type': 'Feature', 'geometry': { 'type': 'LineString', 'coordinates': [[42.12154, -20.14515], [80.7845241, 20.4545741]] } }] }; var vectorSource = new ol.source.Vector({ // VectorSource({ features: (new ol.format.GeoJSON({ featureProjection: 'EPSG:3857', dataProjection: 'EPSG:4326' })).readFeatures(geojsonObject) }); var vectorLayer = new ol.layer.Vector({ // VectorLayer({ source: vectorSource, style: styleFunction }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ // TileLayer({ source: new ol.source.OSM() }), vectorLayer ], target: 'map', controls: ol.control.defaults({ // defaultControls({ attributionOptions: { collapsible: false } }), view: new ol.View({ center: [0, 0], zoom: 2 }) }); 

 html, body, .map { height: 100%; width: 100%; padding: 0px; margin: 0px; } 

 <link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css"> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script> <div id="map" class="map"></div>