OpenLayers 4获取KML矢量图层要素失败求助

嗨，这个问题我之前刚踩过坑！核心原因很简单：KML文件的加载是异步操作——你在创建完图层后立刻调用getFeatures()，这时候浏览器还没完成KML文件的下载和解析，所以拿到的自然是空数组。而地图能正常显示，是因为OpenLayers会在后台默默完成加载后自动渲染要素，你的同步代码早就执行完了。

解决方案：监听加载完成事件 #

最稳妥的方式是监听数据源的featuresloadend事件，在所有要素加载完成后再去获取和处理它们：

var vector2 = new ol.layer.Vector({ 
  source: new ol.source.Vector({ 
    url: './energeticos.kml', 
    format: new ol.format.KML() 
  }) 
});

// 监听要素全部加载完成的事件
vector2.getSource().on('featuresloadend', function() {
  var features = vector2.getSource().getFeatures();
  alert(features.length); // 现在就能拿到正确的要素数量了
  
  // 用forEach遍历要素更安全，避免for in带来的原型遍历问题
  features.forEach(function(feature) {
    var featureName = feature.get('name');
    $("#containerLeft").append('<li>' + featureName + '</li>');
  });
});

另一种方式：使用async/await（适用于较新版本OpenLayers） #

如果你的OpenLayers版本支持source.load()方法，也可以用异步函数的方式等待加载完成：

async function processKMLFeatures() {
  const vectorSource = new ol.source.Vector({ 
    url: './energeticos.kml', 
    format: new ol.format.KML() 
  });
  const vector2 = new ol.layer.Vector({ source: vectorSource });
  
  // 等待数据源加载完成
  await vectorSource.load();
  
  const features = vectorSource.getFeatures();
  alert(features.length);
  features.forEach(feature => {
    const featureName = feature.get('name');
    $("#containerLeft").append('<li>' + featureName + '</li>');
  });
}

// 执行异步函数
processKMLFeatures();

额外注意事项 #

• 确保./energeticos.kml的路径是正确的，要是本地直接打开HTML文件，可能会遇到浏览器的跨域限制，建议用本地服务器（比如http-server）来运行项目
• 如果你的KML文件特别大，想要边加载边处理要素，可以监听addfeature事件，每次有新要素加载就处理它

内容的提问来源于stack exchange，提问作者Sergio