Openlayers 3.5 和 GeoJSON答案

【问题标题】：Openlayers 3.5 and GeoJSONOpenlayers 3.5 和 GeoJSON
【发布时间】：2015-06-05 01:42:52
【问题描述】：

我在使用 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);
});

这确实有效。我在这里用头撞墙。有没有人有任何想法？非常感谢！

【问题讨论】：

对layerInfo.url 的请求是否甚至出现在浏览器的网络选项卡中？这些症状看起来有点像以同步方式使用异步代码时发生的情况，但我没有足够的 OL3 经验来提供进一步的帮助。如果我遇到问题，我会在浏览器的调试器中设置一些断点，并尝试将请求一直跟踪到 OL 的内部。
一个请求确实出去了，它又成功回来了。奇怪的是，我已经完全按照互联网上的所有示例进行操作（这很奇怪，因为当我尝试加载由有效的示例代码提供的示例 GeoJSON 时，加载没有问题功能。）这会向我暗示我的 GeoJSON 可能有问题，除了当我尝试以自己的方式手动加载它时，它可以工作。我的头很痛...感谢您的回复！
也可能是投影问题。

标签： gis geojson openlayers-3

【解决方案1】：

这就是我现在加载数据的方式，“数据”是我的 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');
}

【讨论】：

仍然很恼火它不能像文档中那样工作，但这个解决方案对我来说非常有效。谢谢！
没关系，很高兴为您提供帮助。让我给你投票吧:)

【解决方案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。

【讨论】：

我有同样的问题。不知何故，一次阅读所有内容的 ReadFeatures 对我也不起作用。