Question

我正在尝试使用.getFeatures函数进行一些索引以及.get（'key'）方法来返回OpenLayers（v.4）中矢量源的属性，例如：gdeltVectorSource.getFeatures()[15].get('count')。当我将其输入到Chrome的开发者控制台中时，结果符合预期，并且工作正常。但是，当添加到html文档中引用的脚本时，它将返回：Uncaught TypeError: Cannot read property 'get' of undefined at pen.js:46。似乎无法从.getFeatures（）返回一系列功能。有人可以帮我理解为什么会这样吗？我想返回矢量源的属性，以便在样式等中使用值（在此示例中为“ count”）。关于javascript如何编译和运行我所缺少的代码，有一些东西吗？

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

感谢您停止阅读我的问题！

Answer 1

功能加载到ajax调用中，该调用在执行完其余代码（创建映射并尝试显示计数值）后返回。

获取所需的特征属性可以正常工作。您可以尝试将调用放入ajax函数中。

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

Answer 2

$.ajax调用是异步的。您需要在存在/存在的地方处理/使用回调函数中的功能：

当前代码：

$.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（）方法可在控制台中运行，但不能在脚本中运行

2 个答案: