openlayers3试图与GeoJSON交互地添加功能，但是不管我怎么说，我总能在非洲SE的某个地方获得一分

Question

即使GeoJSON中有坐标部分，任何GeoJSON都始终将Points放在非洲的左下角。 我使用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或其解析没有问题。 该错误是投影/坐标系问题。 您使用的地图投影不使用纬度作为度量单位。 而是使用的默认投影的度量单位为Web Mercator （EPSG：3857），它是米。 而您正在使用的json文件使用WGS84或经纬度对。

因此，您的所有点都集中在东子午线和赤道[0,0]交汇点的东/西+/- 180度和北/南+/- 90米处，该地位于非洲东海岸。 如果放大得非常远，复制并粘贴链接到的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交互地添加功能，但是不管我怎么说，我总能在非洲SE的某个地方获得一分

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-02-11 04:03:57

openlayers3试图与GeoJSON交互地添加功能，但是不管我怎么说，我总能在非洲SE的某个地方获得一分

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-02-11 04:03:57

解决方案1
2 已采纳 2017-02-11 04:03:57