openlayer对Vectorlayer图层使用getFeatures方法得到的值为空的问题_source.getfeatures

Vectorlayer.getSource().getFeatures() return empty array

最近在一个vue项目中使用openlayer来做地图开发，导入的矢量数据都是以geojson的格式来存储和读取的。在地图中加载完成后，能成功的对地图上的要素进行点击弹窗，显示要素的对应属性。但是想根据图层来直接获取要素时结果却为空值，示例代码如下：

let Vectorlayer=new VectorLayer({
      title: '边界',
      name: 'baseVectorLayer',
      baseLayer: false,
      source: new VectorSource({
        url:'data/voto.geojson',
        format: new GeoJSON()
      }),
      zIndex: 1,
      style: new Style({
        stroke: new Stroke({
          color: '#ffcc33',
          width: 2
        }),

      })
    })
 console.log(Vectorlayer.getSource().getFeatures())//显示为[]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

可以明确的是，以geojson格式导入的ol/layer/Vector图层是会有要素记录的，毕竟我可以点击显示。返回值为空的原因在StackOverflow的这篇问答中有了答案：https://stackoverflow.com/questions/29432645/getfeatures-is-empty。答主也只是给了一篇回答链接，GitHub的问答可以查看到很细致的原因。https://github.com/openlayers/openlayers/blob/main/doc/faq.md#why-are-my-features-not-found-
核心的一句话就是说，这是因为geojson文件的加载将是以异步方式进行的。
对数据源source添加监听事件就能完美的解决这个问题。即：

//数据的添加如上节
Vectorlayer.getSource().on('change', function(evt){
          const source = evt.target;
          if (source.getState() === 'ready') {
            var numFeatures = source.getFeatures();
            console.log(numFeatures);//这里就能正确显示该图层的所有要素集合了
          }
        });
1
2
3
4
5
6
7
8

GitHub上的原话

Why aren’t there any features in my source?
Suppose you want to load a KML file and display the contained features on the map. Code like the following could be used:

import VectorLayer from 'ol/layer/Vector';
import KMLSource from 'ol/source/KML';

const vector = new VectorLayer({
  source: new KMLSource({
    projection: 'EPSG:3857',
    url: 'data/kml/2012-02-10.kml'
  })
});
1
2
3
4
5
6
7
8
9

You may ask yourself how many features are in that KML, and try something like the following:

import VectorLayer from 'ol/layer/Vector';
import KMLSource from 'ol/source/KML';

const vector = new VectorLayer({
  source: new KMLSource({
    projection: 'EPSG:3857',
    url: 'data/kml/2012-02-10.kml'
  })
});
const numFeatures = vector.getSource().getFeatures().length;
console.log("Count right after construction: " + numFeatures);
1
2
3
4
5
6
7
8
9
10
11

This will log a count of 0 features to be in the source. This is because the loading of the KML-file will happen in an asynchronous manner. To get the count as soon as possible (right after the file has been fetched and the source has been populated with features), you should use an event listener function on the source:

vector.getSource().on('change', function(evt){
  const source = evt.target;
  if (source.getState() === 'ready') {
    const numFeatures = source.getFeatures().length;
    console.log("Count after change: " + numFeatures);
  }
});
1
2
3
4
5
6
7

This will correctly report the number of features, 1119 in that particular case.

本文参考

[1]https://stackoverflow.com/questions/29432645/getfeatures-is-empty
[2]https://github.com/openlayers/openlayers/blob/main/doc/faq.md#why-arent-there-any-features-in-my-source