这是一个很多人会遇到的问题,因为在加载矢量地图后,需要对矢量地图做一些简单的查询,分析等。 但是经常会遇到获取不到加载后的feature
的问题。 原因就在于获取的时机不对,因为矢量地图是异步加载的。 下面就看一下正确的获取所有feature
的做法是什么:矢量地图Feature总数: 9
从图上可以看到,共有9个feature
, 在地图下方的统计数据也是9。 下面看看代码是如何实现的:
<div id="map" style="width: 100%"></div>
<div>矢量地图Feature总数: <span id="count"></span></div>
<script type="text/javascript">
//创建地图
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [-72.980624870461128, 48.161307640513321],
zoom: 8,
projection: 'EPSG:4326'
}),
target: 'map'
});
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: '../data/geojson/line-samples.geojson',
format: new ol.format.GeoJSON()
})
});
// 因为是异步加载,所以要采用事件监听的方式来判定是否加载完成
var listenerKey = vectorLayer.getSource().on('change', function(){
if (vectorLayer.getSource().getState() === 'ready') { // 判定是否加载完成
document.getElementById('count').innerHTML = vectorLayer.getSource().getFeatures().length;
vectorLayer.getSource().unByKey(listenerKey); // 注销监听器
}
});
map.addLayer(vectorLayer);
// 如果在此处调用vectorLayer.getSource().getFeatures()是完全有可能获取不到任何Feature的,这是常犯错误
</script>