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?