GeoJSON 要素坐标未显示在 OpenLayers 地图上

Question

我正在尝试在地图上显示 GeoJSON 多边形。我将 OpenLayers 提供的示例与以下数据一起使用，但仅显示第二个多边形：

var geojsonObject = {
    "type": "FeatureCollection",
    "crs": {
        "type": "name",
    },
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [[[103.92240800000013,21.69931],[100.93664,21.66959500000013],[108.031899,18.67076]]]                
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]                  
            }
        }
    ]
};

我用来解析 GeoJSON 并将其添加到地图的代码如下：

var vectorSource = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});

var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: styleFunction
});

我注意到了不同种类的坐标。在第二组中，坐标表示为 [-5e6, -1e6] 和我不理解的 e，在第一组中 - 不起作用 - 它们看起来像 [103.92240800000013, 21.69931].

这是否是我的多边形未显示的可能原因？

Answer 1

问题是您的两个多边形是使用不同的坐标空间指定的，您需要确定要使用的地图投影。默认情况下，OpenLayers 使用他们称为 "spherical mercator" 的东西，并且在不深入研究细节的情况下，几何坐标由 2D 平面上的像素表示。

理想情况下，您可以修复 GeoJSON 以提供同一投影中的所有坐标。如果您做不到，这里有一个可行的解决方案：

你说的不工作的集合看起来像经度和纬度 (GIS) 坐标，如果要在同一图层上显示它们需要转换 - 在在下面的示例中，我使用 GeoJSON properties 标记了需要转换的功能，如下所示：

var geojsonObject = {
    type: 'FeatureCollection',
    // ...
    features: [
        {
            type: 'Feature',
            geometry: {
                type: 'Polygon',
                coordinates: [/* ... */],
                properties: {
                    requiresTransform: true  // <- custom property
                }
            }
        },
        // ...
    ]
};

在向图层源添加要素之前，您可以执行以下操作：

var features = (new ol.format.GeoJSON()).readFeatures(geojsonObject);

features.forEach(function(feature){
    if(!feature.get('requiresTransform')) 
        return; // ignore

    var geometry = feature.getGeometry(),
        coords = geometry.getCoordinates();

    if(geometry instanceof ol.geom.Polygon)
        geometry.setCoordinates(transformPolyCoords(coords));
});

function transformPolyCoords(/* Array */ a){
    return a.map(function(aa){
        return aa.map(function(coords){
            return ol.proj.transform(coords, 'EPSG:4326', 'EPSG:3857');  
        });
    });
}

可能有一种更简洁的方法来管理它，我想它涉及将不同的格式保存在单独的 GeoJSON 对象中，我不知道它有多接近您所期待的，但这就是我使用您提供的内容得出的结果 » working example.

GeoJSON 要素坐标未显示在 OpenLayers 地图上

GeoJSON feature coordinates not displaying on OpenLayers map

javascript

geojson

openlayers-3