在 Openlayers 中抓取 GeoJSON 数据

Posted 2023-02-23

【中文标题】在 Openlayers 中抓取 GeoJSON 数据

【英文标题】：Grabbing GeoJSON data in Openlayers

【发布时间】：2018-03-02 10:23:34

【问题描述】：

我想做的事：

弄清楚如何从服务器引用/获取 geoJSON 数据。

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

理想情况下，我只能打印出功能 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 会显示“多边形”，但没有这样的运气。我尝试了各种组合，并且一直在查看文档，看不到我做错了什么。

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

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

任何帮助将不胜感激。

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

【问题讨论】：

当你将 feature.getGeometry().getType() 记录到控制台时，你看到了什么？

我刚刚明白，getGeometry 不是一个函数。我已经设法打印出 [object Object]... 我猜它更接近了？

getFeatures().getProperties() 是让我能够打印 [object Object] 的原因。但是在 geoJson 中，在属性下它有“name”：“Afghanistan”（例如）。我希望能够在单击时打印国家/地区名称

【参考方案1】：

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

首先，删除以下行。您不想要源文件的第一个特征，而是第一个选择的特征。

var source = vector.getSource();

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

其次，为选择事件定义回调函数（e）中的特征。此外，由于 getFeatures() 将返回一个特征集合，因此 getArray() 方法是必要的。

get(key) 方法将为确定的键返回一个值，在本例中为“名称”。

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();

);