Leafletjs GeoJSON图层不适用于Natural Earth的地图数据 [英] Leafletjs GeoJSON layer is not working for map data from Natural Earth

问题描述

我正在使用leafletjs使用OSM磁贴来绘制地理地图.我将以下GeoJSON用作地图图层

  var worldMapData = {};//来自http://code.highcharts.com/mapdata/1.0.0/custom/world.js的geoJson数据var osmUrl ='http://{s} .tile.osm.org/{z}/{x}/{y} .png'，osm = L.tileLayer(osmUrl，{noWrap:是的，来源:< a href ='http://openstreetmap.org'> OpenStreetMap</a>"});var map = L.map('map').setView([0，0]，1).addLayer(osm);函数样式(功能){返回 {fillColor:'#FFEDA0'，重量:2不透明度:1白颜色'，dashArray:"3"，fillOpacity:0.7};}map.addLayer(L.geoJson(worldMapData，{style:style}))); 

我错过了什么吗?上面的GeoJSON是否不符合规范?如果没有，我可以从哪里下载与leafletjs兼容的所有国家的GeoJSON?

这是上述问题的jsfiddle http://jsfiddle.net/1x1p55fy/

解决方案

GeoJSON数据已正确加载，并按预期显示.但是，就坐标参考系统而言，GeoJSON数据不符合GeoJSON规范.让我引用 GeoJSON规范:

所有GeoJSON坐标的坐标参考系统是地理坐标参考系统，使用世界大地测量1984年系统(WGS 84)[WGS84]数据，经度和纬度单位十进制度数.这等效于坐标参考开放地理空间联盟(OGC)URN识别的系统urn:ogc:def:crs:OGC :: CRS84.可选的第三位置元素是高于或低于WGS 84参考的高度(以米为单位)椭球.在没有高程值的情况下，应用对高度或深度敏感的人应将位置解释为处于当地的地面或海平面.

注意:使用替代坐标参考系是在[GJ2008]中指定，但已从此版本的该规范，因为使用了不同的坐标参考系统-尤其是以[GJ2008]中指定的方式-具有事实证明存在互操作性问题.一般来说，GeoJSON预期处理软件无法协调参考系统数据库或具有网络访问权限以进行协调参考系统转换参数.但是，凡是参与方有事先安排，替代协调可以使用参考系统而不会冒数据的风险误解了.

如果您仔细查看 https://code.highcharts.com/mapdata/custom/world-highres.geo.json (或http://code.highcharts.com/mapdata/1.0.0/custom/world.js which uses data from naturalearthdata.com

But it is not working. The tile layer is shown correctly. But the GeoJSON data is not being shown. I can only see a white line across the map.

var worldMapData = {}; //the geoJson data from http://code.highcharts.com/mapdata/1.0.0/custom/world.js

var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
    osm = L.tileLayer(osmUrl, {
                noWrap: true,
                attribution: "<a href='http://openstreetmap.org'>OpenStreetMap</a>"
            });

var map = L.map('map').setView([0, 0], 1).addLayer(osm);

function style( feature ) {
    return {
        fillColor: '#FFEDA0',
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

map.addLayer(L.geoJson(worldMapData, {style: style}));

Am I missing something? Is the above GeoJSON not according to specification? And if not, from where can I download GeoJSONs for all countries which are compatible with leafletjs?

[Edit] Here is the jsfiddle for the above problem http://jsfiddle.net/1x1p55fy/

解决方案

The GeoJSON data is being loaded correctly, and is being displayed as expected. However, the GeoJSON data is not conformant to the GeoJSON spec, in regards to the coordinate reference system. Let me quote from the GeoJSON specs:

The coordinate reference system for all GeoJSON coordinates is a geographic coordinate reference system, using the World Geodetic System 1984 (WGS 84) [WGS84] datum, with longitude and latitude units of decimal degrees. This is equivalent to the coordinate reference system identified by the Open Geospatial Consortium (OGC) URN urn:ogc:def:crs:OGC::CRS84. An OPTIONAL third-position element SHALL be the height in meters above or below the WGS 84 reference ellipsoid. In the absence of elevation values, applications sensitive to height or depth SHOULD interpret positions as being at local ground or sea level.

Note: the use of alternative coordinate reference systems was specified in [GJ2008], but it has been removed from this version of the specification because the use of different coordinate reference systems -- especially in the manner specified in [GJ2008] -- has proven to have interoperability issues. In general, GeoJSON processing software is not expected to have access to coordinate reference system databases or to have network access to coordinate reference system transformation parameters. However, where all involved parties have a prior arrangement, alternative coordinate reference systems can be used without risk of data being misinterpreted.

If you have a closer look at the data in https://code.highcharts.com/mapdata/custom/world-highres.geo.json (or http://code.highcharts.com/mapdata/1.0.0/custom/world.js for that matter) you'll see that, in fact, the coordinates are not in latitude-longitude relative to the WGS84 geoid, and that there is a reference to the EPSG:54003 coordinate reference system (cylindrical miller), with a custom scale and offset transform.

As the GeoJSON spec already stated, you are hereby discouraged to use any other CRS than EPSG:4326 (WGS84 in latitude-longitude) in your GeoJSON data.

Find some conformant GeoJSON, and it will look OK in Leaflet. Leaflet does not handle reprojection of GeoJSON data, nor it handles the scale transforms that highcharts data implies.

这篇关于Leafletjs GeoJSON图层不适用于Natural Earth的地图数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！