GeoJSON 数据未显示在矢量图层上

Question

我正在尝试显示矢量图层以显示一组 geojson 特征。

尽管我在 ol.js 库 "k.xd is not a function"

中遇到错误，但我尝试添加图层时

var geoData = {"type":"FeatureCollection",
    "features":
    [
    {"type":"Feature","properties":{"Name":"","Description":""},"geometry":{"type":"Point","coordinates":[0.0,0.0]}},
    {"type":"Feature","properties":{"Name":"1","Description":""},"geometry":{"type":"Point","coordinates":[11.50728,3.87471,0.0]}},
    ]
};

// vector layer
var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(geoData)
    }),
    style: new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'red',
            width: 2
          }),
          fill: new ol.style.Fill({
            color: 'rgba(255,0,0,0.2)'
          })
        })
    });

我在这里拼凑了一个示例 http://jsfiddle.net/dxt95yt6/1/ 表明它不起作用，但我无法弄清楚这与原始教程有何不同。

Answer 1

给定的样式对象对于点不正确，因此特征不会显示。尝试：

style: new ol.style.Style({
    image: new ol.style.Circle({
        radius: 8,
        stroke: new ol.style.Stroke({
            color: 'red',
            width: 2
        }),
        fill: new ol.style.Fill({
            color: 'rgba(255,0,0,0.2)'
        })
    })
})

请注意，在原始代码中，还有另一个问题。坐标必须转换为 EPSG:3857:

features: (new ol.format.GeoJSON()).readFeatures(
    geoData,
    {featureProjection: ol.proj.get('EPSG:3857')}
)

http://jsfiddle.net/zqx6644q/8/

Answer 2

在使用之前验证您的 geojson 总是很有帮助的。我可以推荐 geojsonlint，它有一个 api，以确保您使用正确的 geojson。

GeoJSON 数据未显示在矢量图层上

GeoJSON data not displayed on a vector layer

geojson

openlayers-3