在 Openlayers 中抓取 GeoJSON 数据

Question

我想做什么：

弄清楚如何reference/grab 来自服务器的 geoJSON 数据。

在这种情况下，我只是使用 openLayers 文档中的示例。

理想情况下，我只能打印出一个特征 ID/type，但我无法让它工作。

发生了什么：

  var selectElement = document.getElementById('type');

  var source = vector.getSource();

  var feature = source.getFeatures()[0];

  var changeInteraction = function() {
    if (select !== null) {
      map.removeInteraction(select);
    }
    var value = selectElement.value;
    if (value == 'singleclick') {
      select = selectSingleClick;
    } else if (value == 'click') {
      select = selectClick;
    } else if (value == 'pointermove') {
      select = selectPointerMove;
    } else if (value == 'altclick') {
      select = selectAltClick;
    } else {
      select = null;
    }
    if (select !== null) {
      map.addInteraction(select);
      select.on('select', function(e) {
        document.getElementById('status').innerHTML = feature.getGeometry().getType();
      });
      console.log(feature);
    }
  };

我希望在这种情况下我的 innerHTML 会显示 "Polygon"，但没有这样的运气。我尝试了各种组合，并一直在查看文档，看不出我做错了什么。

我试图从中获取信息的服务器是，

https://openlayers.org/en/v4.6.4/examples/data/geojson/countries.geojson

如有任何帮助，我们将不胜感激。

（如果有帮助，我可以附上完整的代码）

Answer 1

我能够复制您的程序并找到检索国家/地区名称的 selected 功能的解决方案，如您评论中所述。

首先，删除以下行。您不需要源文件的第一个功能，而是第一个 selected 功能。

var source = vector.getSource();

var feature = source.getFeatures()[0];

其次，在 select 事件的回调函数 (e) 中定义功能。此外，由于 getFeatures() 将 return 特征集合，因此 getArray() 方法是必要的。

get(key) 方法将为确定的键 return 一个值，在本例中为 "name"。

if (select !== null) {
  map.addInteraction(select);
  select.on('select', function(e) {

    var feature = e.target.getFeatures().getArray()[0];

    document.getElementById('status').innerHTML = '&nbsp;' +

    feature.get("name") + '  ' + feature.getId();

});
}

在 Openlayers 中抓取 GeoJSON 数据

Grabbing GeoJSON data in Openlayers

javascript

json

openlayers

geojson