ol.source.Vector 实例的 .getFeatures() 方法在控制台中工作，但不在脚本中

Question

我正在尝试 return OpenLayers (v.4) 中矢量源的属性，使用一些索引的 .getFeatures 函数和 .get('key') 方法，比如所以：gdeltVectorSource.getFeatures()[15].get('count')。当我在 Chrome 中将其输入到开发人员控制台时，结果如预期的那样并且工作正常。但是，当添加到 html 文档中引用的脚本时，它 returns: Uncaught TypeError: Cannot read property 'get' of undefined at pen.js:46。它似乎无法 return 来自 .getFeatures() 的一组特征。有人可以帮我理解为什么会这样吗？我想 return 矢量源的属性，以便在样式等中使用值（本例中的 'count'）。是否有关于 javascript 如何编译和运行代码的内容我错过了什么？

这里 a link to a codepen 说明了我在说什么。这些点不显示（我不知道为什么，但这无关紧要），但源加载得很好。另请注意，您必须打开 chrome 控制台才能看到错误消息。

感谢您停下来阅读我的问题！

Answer 1

特征在 ajax 调用中加载，returns 在剩余代码（创建地图并尝试显示计数值）执行后。

获取所需的特征属性效果很好。您可以尝试将调用放在 ajax 函数中。

要解决您的问题，请不要使用 ajax 或确保在访问之前加载这些功能。

Answer 2

$.ajax 调用是异步的。您需要 process/use 回调函数中的功能 when/where 它们存在：

当前代码：

$.ajax({
    type: 'GET',
    url: gdeltURL,
    dataType: "json",
    success: function(data) {
        // console.log(typeof JSON.stringify(data))
        // 'canot read property 'readFeatures' of undefined
        var geojsonFormat = new ol.format.GeoJSON();
        // console.log(typeof geojsonFormat)
        var features = geojsonFormat.readFeatures(data, {
        });
        gdeltVectorSource.addFeatures(features);
    }
});

// snip...
console.log(gdeltVectorSource.getFeatures()[15].get('count'))

应该是：

$.ajax({
    type: 'GET',
    url: gdeltURL,
    dataType: "json",
    success: function(data) {
        // console.log(typeof JSON.stringify(data))
        // 'canot read property 'readFeatures' of undefined
        var geojsonFormat = new ol.format.GeoJSON();
        // console.log(typeof geojsonFormat)
        var features = geojsonFormat.readFeatures(data, {
        });
        gdeltVectorSource.addFeatures(features);
        console.log(gdeltVectorSource.getFeatures()[15].get('count'))
    }
});

proof of concept fiddle

代码片段：

var osm = new ol.layer.Tile({
  source: new ol.source.OSM()
});

function styleFn(f) {
  var retSytle;
  f.set('styledwithcolor', "red");
  retSytle = new ol.style.Style({
    image: new ol.style.Circle({
      radius: 6,
      stroke: new ol.style.Stroke({
        color: 'white',
        width: 2
      }),
      fill: new ol.style.Fill({
        color: "red"
      })
    })
  });
  return [retSytle];
}

var gdeltVectorSource = new ol.source.Vector({
  // format: new ol.format.GeoJSON()
})

var gdeltLayer = new ol.layer.Vector({
  source: gdeltVectorSource,
  visible: true,
  style: styleFn
});

var gdeltURL = "https://api.gdeltproject.org/api/v2/geo/geo?query=theme:WB_1791_AIR_POLLUTION&format=GeoJSON"

$.ajax({
  type: 'GET',
  url: gdeltURL,
  dataType: "json",
  success: function(data) {
    // console.log(typeof JSON.stringify(data))
    // 'canot read property 'readFeatures' of undefined
    var geojsonFormat = new ol.format.GeoJSON();
    // console.log(typeof geojsonFormat)
    var features = geojsonFormat.readFeatures(data, {
      featureProjection: 'EPSG:3857'
    });
    gdeltVectorSource.addFeatures(features);
    console.log(gdeltVectorSource.getFeatures()[15].get('count'))
  }
});

var map = new ol.Map({
  layers: [osm, gdeltLayer],
  target: 'map',
  controls: ol.control.defaults({
    attributionOptions: {
      collapsible: false
    }
  }),
  view: new ol.View({
    center: [-11000000, 4600000],
    zoom: 4
  })
});

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol-debug.js"></script>
<div id="map" class="map"></div>

ol.source.Vector 实例的 .getFeatures() 方法在控制台中工作，但不在脚本中

.getFeatures() method for ol.source.Vector instance working in console, but not in script

javascript

openlayers