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对象中，我不知道它与您期望的有多接近，但这就是我想出的使用什么您提供了 »工作示例。