openlayers3 尝试与 GeoJSON 交互添加功能，但无论我放什么，我总是在非洲东南部的一个地方得到一分

Question

任何GeoJSON，总是将点放在非洲的左下角，即使GeoJSON中有坐标部分。我使用 openlayers v3.20.1
GeoJSON，我试过使用来自：
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>

我也尝试过将 'txt' 内容直接传递给 readFeatures 方法，但没有任何区别。

var feat = format.readFeatures(txt);
src.addFeatures(feat);

Answer 1

geoJSON 或其解析没有问题。该错误是 projection/coordinate 系统问题。您使用的地图投影不使用经纬度作为其测量单位。取而代之的是您使用的默认投影的测量单位 web Mercator (EPSG:3857), is meters。而您使用的 json 文件使用 WGS84 或纬度对。

因此，您所有的点都集中在本初子午线与赤道 [0,0] 交点的 +/- 180 east/west 和 +/- 90 米 north/south 处，即在非洲东海岸外。如果你放大非常远，复制并粘贴你链接到的 json 文件，你会发现：

您可以通过确保重新投影数据以进行显示来解决此问题。我所做的唯一更改是在点击事件中：

$('#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);
});

通过为您代入这个 onclick 事件，我得到了：

openlayers3 尝试与 GeoJSON 交互添加功能，但无论我放什么，我总是在非洲东南部的一个地方得到一分

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

javascript

geojson

openlayers-3