openlayers3 trying to add features interactively with GeoJSON, but no matter, what I put, I always get a point in one spot SE of Africa
Question
Any GeoJSON, just always puts Points on the bottom left side of Africa, even, though, there are coordinates section in GeoJSON. I use openlayers v3.20.1
GeoJSON, I've tried to use is from:
https://raw.githubusercontent.com/acanimal/Openlayers-Cookbook/master/recipes/data/world_cities.json
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>The Book of OpenLayers3 - Code samples</title> <link rel="stylesheet" href="progr/nm/ol.css" type="text/css"> <script src="progr/nm/jquery-3.1.1.min.js" type="text/javascript"></script> <script src="progr/nm/ol.js" type="text/javascript"></script> <style type="text/css"> .map { width: calc(50% - 6px - 1em); height: 500px; box-shadow: 4px 4px 20px black; border: 3px solid blue; float: left; } #edit { padding: 1em; height: calc(500px - 2em); } textarea { width: 100%; height: calc(100% - 4em); } .tree { width: auto; border: 3px solid red; background: yellow; float: left; } </style> </head> <body> <dev id='map' class='map col-sm-6'></dev> <dev id='edit' class='map col-sm-6'> <textarea id='read'></textarea> <p class='text-primary'> Paste any valid GeoJSON string and press the <button id='readButton' class='btn btn-primary btn-xs'>Read button</button>. </p> </dev> <script> var format = new ol.format.GeoJSON(); var layers = { OSM: new ol.layer.Tile({source: new ol.source.OSM()}), vec: new ol.layer.Vector({ source: new ol.source.Vector({ format: format, projection: 'EPSG:3857' }) }) }; var maps = { map: new ol.Map({ target: 'map', renderer: 'canvas', layers: [layers['OSM'], layers['vec']], view: new ol.View({ center: ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'), zoom: 2 }) }) }; $('#readButton').on('click', function(){ var src = layers['vec'].getSource(); var txt = $('#read').val(); if(txt === ''){ src.clear(); return; } var json = JSON.parse(txt); var feat = format.readFeatures(json); src.addFeatures(feat); }); </script> </body> </html>
I've also tried to pass 'txt' content directly to readFeatures method, but it made no difference.
var feat = format.readFeatures(txt);
src.addFeatures(feat);
1 answers
solution1
2 ACCPTED 2017-02-11 04:03:57
There is no issue with the geoJSON or its parsing. The error is a projection/coordinate system issue. The map projection you are using does not use lat longs as its unit of measurement. Instead the unit of measurement for the default projection you are using, web Mercator (EPSG:3857), is meters . Whereas the json file you are using uses WGS84, or lat long pairs.
Therefore, all your points are clustered +/- 180 east/west and +/- 90 meters north/south of the intersection of the Prime Meridian and the Equator [0,0], which is off the East coast of Africa. If you zoom in very very far, copying and pasting the json file you linked to, you will find:
You can fix this by ensuring your data is reprojected for display. The only changes I made were in the on click event:
$('#readButton').on('click', function(){
var src = layers['vec'].getSource();
var txt = $('#read').val();
if(txt === ''){
src.clear();
return;
}
var json = JSON.parse(txt);
var feat = format.readFeatures(json, {
dataProjection: 'EPSG:4326', // define the input SRS/CRS
featureProjection: 'EPSG:3857' // define the output SRS/CRS
});
src.addFeatures(feat);
});
By subbing in this for you onclick event I got:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.