Problem with openlayers and coordinates

1

I have a problem with the openlayers library and it reads the coordinates backwards from my geojson .

My geojson has for example: [-5.67063958389914,43.52764170586536]

And openlayers read them like this: [43.52764170586536, -5.67063958389914]

I enclose a fragment of geojson , which is inside a file js.

<!DOCTYPE html>
<html>

<head>
  <title>GeoJSON</title>
  <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
  <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
  <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
</head>

<body>
  <div id="map" class="map"></div>
  <script>
      var geojsonObject = {
      "type": "FeatureCollection",
      "crs": {
        "type": "name",
        "properties": {
          "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        }
      },

      "features": [{
        "type": "Feature",
        "properties": {
          "OBJECTID": 1,
          "FID_1": 0,
          "Count_": 8,
          "USO": "R",
          "texto": "RESIDENCIAL",
          "BEZ": "0",
          "HA": 20,
          "superficie": 2390,
          "TOTAL_POBL": 301,
          "Shape_Leng": 0.005202,
          "Shape_Area": 0.000000
        },
        "geometry": {
          "type": "MultiPolygon",
          "coordinates": [
            [
              [
                [-5.671425477999947, 43.527459368000052],
                [-5.671255150999969, 43.527438501000063],
                [-5.671258686999977, 43.527423292000037],
                [-5.671197820999964, 43.52741805200003],
                [-5.671204413999931, 43.527388005000034],
                [-5.671136474999969, 43.52737951000006],
                [-5.671130837999954, 43.527411605000054],
                [-5.67096102599993, 43.527391176000037],
                [-5.670891611999934, 43.527382895000073],
                [-5.670898436999948, 43.52734969100004],
                [-5.670826637999937, 43.527340656000035],
                [-5.67081978899995, 43.527373320000038],
                [-5.67076981699995, 43.527368186000047],
                [-5.670771808999973, 43.527359121000075],
                [-5.670704902999944, 43.527349715000071],
                [-5.670664712999951, 43.527524159000052],
                [-5.67073107799996, 43.52753062000005],
                [-5.670711669999946, 43.527612379000061],
                [-5.670645847999936, 43.527601402000073],
                [-5.670639583999957, 43.527641706000054],
                [-5.67061046799995, 43.52775583500005],
                [-5.670604868999931, 43.527777575000073],
                [-5.67073228199996, 43.52779341400003],
                [-5.670744957999943, 43.527738554000052],
                [-5.670858162999934, 43.527754905000052],
                [-5.67084609099993, 43.527806600000076],
                [-5.671100642999932, 43.527840444000049],
                [-5.671114078999949, 43.527788808000025],
                [-5.671171785999945, 43.527795382000079],
                [-5.671161792999953, 43.52783811300003],
                [-5.67113835899994, 43.527937974000054],
                [-5.670987812999954, 43.527919525000073],
                [-5.670911666999928, 43.527910141000064],
                [-5.670683611999948, 43.527882249000072],
                [-5.670621405999953, 43.527874700000041],
                [-5.670505077999962, 43.527860493000048],
                [-5.670451456999956, 43.527854003000073],
                [-5.670459925999978, 43.527818780000075],
                [-5.670485787999951, 43.527709409000067],
                [-5.67049925699996, 43.527652910000029],
                [-5.670551171999932, 43.527432903000033],
                [-5.670564852999974, 43.52737558900003],
                [-5.670589656999937, 43.527270295000051],
                [-5.670598927999947, 43.527230821000046],
                [-5.670625930999961, 43.527234241000031],
                [-5.670793828999933, 43.527256157000068],
                [-5.671283980999931, 43.527315104000081],
                [-5.671543985999961, 43.527346389000058],
                [-5.671724249999954, 43.527368104000061],
                [-5.671699694999973, 43.527493021000055],
                [-5.671513689999927, 43.52747018000008],
                [-5.671425477999947, 43.527459368000052]
              ]
            ]
          ]
        }
      }
     ]
    };
  </script>
  <script>
    var styles = {
      'MultiPolygon': new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'yellow',
          width: 1
        }),
        fill: new ol.style.Fill({
          color: 'red'
        })
      })
    };

    var styleFunction = function(feature) {
      return styles[feature.getGeometry().getType()];
    };



    var vectorSource = new ol.source.Vector({
      features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
    });


    var vectorLayer = new ol.layer.Vector({
      source: vectorSource,
      style: styleFunction
    });

    var map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
        vectorLayer
      ],
      target: 'map',
      controls: ol.control.defaults({
        attributionOptions: {
          collapsible: false
        }
      }),
      view: new ol.View({
        center: [0, 0],
        zoom: 2
      })
    });
  </script>
</body>

</html>

Is there a method to do the conversion?

    
asked by Pelayo 21.03.2018 в 11:36
source

1 answer

4

Indeed, the native OpenLayers projection is 'EPSG: 3857' while the GeoJSON is 'EPSG: 4326' , Reading the code in the Openlayers repository I see that instead of:

var vectorSource = new ol.source.Vector({
  features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});

Must be done:

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

var geojsonObject={
  "type": "FeatureCollection",
  "crs": {
    "type": "name",
    "properties": {
      "name": "EPSG:4326"
    }
  },

  "features": [{
    "type": "Feature",
    "properties": {
      "OBJECTID": 1,
      "FID_1": 0,
      "Count_": 8,
      "USO": "R",
      "texto": "RESIDENCIAL",
      "BEZ": "0",
      "HA": 20,
      "superficie": 2390,
      "TOTAL_POBL": 301,
      "Shape_Leng": 0.005202,
      "Shape_Area": 0.000000
    },
    "geometry": {
      "type": "MultiPolygon",
      "coordinates": [
        [
          [
            [-5.671425477999947, 43.527459368000052],
            [-5.671255150999969, 43.527438501000063],
            [-5.671258686999977, 43.527423292000037],
            [-5.671197820999964, 43.52741805200003],
            [-5.671204413999931, 43.527388005000034],
            [-5.671136474999969, 43.52737951000006],
            [-5.671130837999954, 43.527411605000054],
            [-5.67096102599993, 43.527391176000037],
            [-5.670891611999934, 43.527382895000073],
            [-5.670898436999948, 43.52734969100004],
            [-5.670826637999937, 43.527340656000035],
            [-5.67081978899995, 43.527373320000038],
            [-5.67076981699995, 43.527368186000047],
            [-5.670771808999973, 43.527359121000075],
            [-5.670704902999944, 43.527349715000071],
            [-5.670664712999951, 43.527524159000052],
            [-5.67073107799996, 43.52753062000005],
            [-5.670711669999946, 43.527612379000061],
            [-5.670645847999936, 43.527601402000073],
            [-5.670639583999957, 43.527641706000054],
            [-5.67061046799995, 43.52775583500005],
            [-5.670604868999931, 43.527777575000073],
            [-5.67073228199996, 43.52779341400003],
            [-5.670744957999943, 43.527738554000052],
            [-5.670858162999934, 43.527754905000052],
            [-5.67084609099993, 43.527806600000076],
            [-5.671100642999932, 43.527840444000049],
            [-5.671114078999949, 43.527788808000025],
            [-5.671171785999945, 43.527795382000079],
            [-5.671161792999953, 43.52783811300003],
            [-5.67113835899994, 43.527937974000054],
            [-5.670987812999954, 43.527919525000073],
            [-5.670911666999928, 43.527910141000064],
            [-5.670683611999948, 43.527882249000072],
            [-5.670621405999953, 43.527874700000041],
            [-5.670505077999962, 43.527860493000048],
            [-5.670451456999956, 43.527854003000073],
            [-5.670459925999978, 43.527818780000075],
            [-5.670485787999951, 43.527709409000067],
            [-5.67049925699996, 43.527652910000029],
            [-5.670551171999932, 43.527432903000033],
            [-5.670564852999974, 43.52737558900003],
            [-5.670589656999937, 43.527270295000051],
            [-5.670598927999947, 43.527230821000046],
            [-5.670625930999961, 43.527234241000031],
            [-5.670793828999933, 43.527256157000068],
            [-5.671283980999931, 43.527315104000081],
            [-5.671543985999961, 43.527346389000058],
            [-5.671724249999954, 43.527368104000061],
            [-5.671699694999973, 43.527493021000055],
            [-5.671513689999927, 43.52747018000008],
            [-5.671425477999947, 43.527459368000052]
          ]
        ]
      ]
    }
  }
 ]
};
 


var styles = {
      'MultiPolygon': new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'yellow',
          width: 1
        }),
        fill: new ol.style.Fill({
          color: 'red'
        })
      })
    };

    var styleFunction = function(feature) {
      return styles[feature.getGeometry().getType()];
    };

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


    var vectorLayer = new ol.layer.Vector({
      source: vectorSource,
      style: styleFunction
    });

    var map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
        vectorLayer
      ],
      target: 'map',
      controls: ol.control.defaults({
        attributionOptions: {
          collapsible: false
        }
      }),
      view: new ol.View({
        center: ol.proj.transform([-5.671,43.527 ], 'EPSG:4326', 'EPSG:3857'),
        zoom: 17
      })
    });
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
  <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>

  <div id="map" class="map"></div>
    
answered by 21.03.2018 / 15:16
source