在Openlayers中抓取GeoJSON数据

时间:2018-03-02 10:23:34

标签: javascript json openlayers geojson

我正在尝试做什么:

了解如何从服务器引用/获取geoJSON数据。

在这种情况下,我只是在openLayers doc上使用一个例子。

理想情况下,我只能打印出功能ID /类型,但我无法让它工作。

发生了什么:

  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

任何帮助将不胜感激。

(如果有帮助,我可以附上完整的代码)

1 个答案:

答案 0 :(得分:0)

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

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

var source = vector.getSource();

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

其次,为select事件定义回调函数(e)中的特征。此外,由于getFeatures()将返回一个功能集合,因此必须使用getArray()方法。

get(key)方法将返回一个确定键的值,在这种情况下为“name”。

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

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

    document.getElementById('status').innerHTML = ' ' +

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

});
}