GeoJSON要素坐标未显示在OpenLayers地图上 [英] GeoJSON feature coordinates not displaying on OpenLayers map

问题描述

我正在尝试在地图上显示 GeoJSON 多边形.我使用了OpenLayers提供的示例，其中包含以下数据，但是仅显示第二个多边形:

I'm trying to display a GeoJSON polygon on a map. I've used the example provided by OpenLayers with the following data, but only the second polygon is displayed:

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 并将其添加到地图的代码如下:

The code I'm using to parse and add the GeoJSON to the map is as follows:

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].

I noticed different kinds of coordinates. In the second set the coordinates are represented like [-5e6, -1e6] with the e which I don't understand and in the first set - that don't work - they look like [103.92240800000013, 21.69931].

这是我的多边形不显示的可能原因吗?

Is this a possible reason why my polygon is not displayed?

推荐答案

问题是您使用不同的坐标空间指定了两个多边形，您需要确定要使用的地图投影.默认情况下，OpenLayers使用他们称为球形墨卡托" 的名称，而无需深入研究几何坐标由2D平面上的像素表示.

The problem is your two polygons are specified using different coordinate spaces and you need to determine which map projection you are going to use. By default OpenLayers uses something they call a "spherical mercator" and without delving into the detail the geometry coordinates are represented by pixels on a 2D plane.

理想情况下，您将修复GeoJSON以在同一投影中提供所有坐标.如果您无法做到这一点，请使用以下可行的解决方案:

Ideally, you would fix your GeoJSON to provide all coordinates in the same projection. If you can't do that, here is a working solution:

您说的无效集合看起来像经度和纬度(GIS)坐标，并且如果要在同一层上显示它们，则需要对其进行转换-在以下示例中，我将标记了需要使用 GeoJSON properties进行转换的功能，如下所示:

The set that you say aren't working look like longitude and latitude (GIS) coordinates and need to be transformed if they are to be displayed on the same layer - in the following example I've tagged the features that require transform using the GeoJSON properties like so:

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

在将要素添加到图层源之前，您可以执行以下操作:

Before adding features to the layer source you could then do something like the following:

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 对象中，我不知道它与您的期望有多接近，但这是我根据您提供的信息得出的» 工作示例.

There may be a cleaner way of managing this and I'd imagine it involves keeping the separate formats in separate GeoJSON objects and I don't know how close it is to what you were expecting, but this is what I came up with using what you provided » working example.

这篇关于GeoJSON要素坐标未显示在OpenLayers地图上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！