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 使用他们称为 “球形墨卡托” 的东西，并且在不深入研究细节的情况下，几何坐标由 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。