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

Question

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

3

我想在地图上显示一个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]。

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

- Kamzz

1

5e6代表5 x 10^6 - 或者5000000。请参阅https://en.wikipedia.org/wiki/Scientific_notation - Sander

当然，这是个好主意。我会更新我的第一篇帖子。 - Kamzz

第二个区域大约有2,000,000 x 2,000,000个单位 - 第一个区域只有4 x 8个单位。如果两个特征显示在同一张地图上，第一个特征最多只会显得非常微小（可能被大的特征遮盖）。如果从代码中删除大区域会发生什么？ - Sander

如果我删除第一个，第二个就会显示出来，但是如果我删除第二个，第一个也不会显示。感谢您的建议。 - Kamzz

这个问题有些令人困惑。不清楚原帖作者是询问如何处理投影不同的无效GeoJSON几何体，还是需要帮助正确地显示GeoJSON数据，考虑到不同的数据和视图投影。 - ahocevar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Emissary · Accepted Answer

问题在于你的两个多边形使用不同的坐标空间进行指定，你需要确定要使用哪种地图投影。默认情况下，OpenLayers使用他们所谓的“球面墨卡托投影”，而不深入细节，几何坐标由2D平面上的像素表示。

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

你说不起作用的那些集合看起来像是经度和纬度（GIS）坐标，如果要在同一图层上显示它们，就需要进行转换。在以下示例中，我已经使用GeoJSON属性标记需要进行转换的要素。

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