Openlayers 3.5 和 GeoJSON

Question

我遇到了一个OpenLayers 3.5的问题。我试图使用一次性加载策略从GeoJSON文件中获取要素。我正在向已经实例化的地图添加一个新的图层。我的代码看起来像这样：

var vectorSource = new ol.source.Vector({
  url: layerInfo.url,
  format: new ol.format.GeoJSON()
});

var pointsLayer = new ol.layer.Vector({
  source: vectorSource,
  style: styleFunc
});

that.map.addLayer(pointsLayer);
pointsLayer.setVisible(true);

然而，什么也没有显示。当我检查pointsLayer.getSource().getFeatures()时，我发现实际上没有加载任何要素。

因此，我尝试了不同的方法来加载这些要素：

var that = this;

$.get(layerInfo.url, function(response) {

  var vectorSource = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(response)
  });

  var pointsLayer = new ol.layer.Vector({
    source: vectorSource,
    style: styleFunc
  });

  that.map.addLayer(pointsLayer);
  pointsLayer.setVisible(true);
});

这个确实有效。我被卡住了，有没有人有什么思路？非常感谢！

- Crankycyclops

---

在您的浏览器网络选项卡中是否出现对layerInfo.url的请求？症状看起来有点像在同步方式下使用异步代码时发生的情况，但我对OL3的经验不足以提供更多帮助。如果我遇到这个问题，我会在浏览器的调试器中设置一些断点，并尝试跟踪请求直到OL的内部。 - kryger

请求已发出，并成功返回。奇怪的是，我完全按照互联网上所有示例的要求进行操作（更加奇怪的是，当我尝试加载示例代码提供的样本GeoJSON时，我没有问题加载要素）。这使我认为，也许我的GeoJSON有问题，但是当我尝试以自己的方式手动加载它时，它可以正常工作。我的头很痛...感谢您的回复！ - Crankycyclops

这也可能是一个投影问题。 - Jonatas Walker

Answer 1

这是我现在加载数据的方式，"data"是我的GJson。

var wktTraffic = new ol.source.Vector({
});

var trafficLayer = new ol.layer.Vector({
    source: wktTraffic,
    style: new ol.style.Style({
            stroke: new ol.style.Stroke({
            color: 'blue',
            width: 5
        })
    })
});

function showData(data) {
    var format = new ol.format.WKT();
    var feature;
    $.each(data, function (i, link) {
        feature = format.readFeature(link.geom);
        wktTraffic.addFeature(feature);
    })
    console.log('done load map');
}

- Juan Carlos Oropeza

---

仍然感到烦恼，因为它不像文档中描述的那样工作，但是这个解决方案对我来说非常有效。谢谢！ - Crankycyclops

没关系，很高兴能帮到你。我来点赞给你吧 :) - Juan Carlos Oropeza

Answer 2

根据Juan Carlos的答案，并为了将来的参考，这里有一个函数，可以使用Angular的$http服务基于GeoJSON创建图层：

function buildStationsLayer() {

    var geoJsonUrl = config.stationsGeoDataUrl /*+ some parameters....*/ ;
    var source = new ol.source.Vector({});
    var format = new ol.format.GeoJSON();

    var stationsLayer = new ol.layer.Vector({
        source: source,
        style: stationStyleFunction //function that styles conditionally depending on resolution
    });

    //manually load the GeoJSON features into the layer
    $http.get(geoJsonUrl).success(function(data){
        for(var i=0; i<data.features.length; i++){
            var feature = format.readFeature(data.features[i]);
            source.addFeature(feature);
        }
    });

    return stationsLayer;
}

虽然我不开心官方文档中的方式不起作用。但我不明白，因为官方示例使用了相同的源和格式，而且它可以工作：

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'data/geojson/countries.geojson',
    format: new ol.format.GeoJSON()
  }),
  style: function(feature, resolution) {
    style.getText().setText(resolution < 5000 ? feature.get('name') : '');
    return styles;
  }
});

来源：http://openlayers.org/en/master/apidoc/ol.format.WKT.html

在3.5更改之前，也可以使用ol.source.GeoJSON。

- Pierre Henry

---

我也有同样的问题。不知何故，一次性读取所有ReadFeatures对我也没有起作用。 - Juan Carlos Oropeza