Opealayer填坑——getFeatures()方法无法获取要素集

最新推荐文章于 2023-08-14 11:21:57 发布

愚者的旋律

最新推荐文章于 2023-08-14 11:21:57 发布

阅读量2.1k

点赞数 5

分类专栏： GIS 文章标签： javascript

本文链接：https://blog.csdn.net/qq_32202099/article/details/115309521

版权

GIS 专栏收录该内容

13 篇文章 16 订阅

订阅专栏

最近使用OpenLayers进行开发时遇到了一个小问题，花了点时间处理了一下，记录下这次踩坑的经历。

复现场景，getFeatures()方法无法获取要素集，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="openlayer/v5.3.0-dist/ol.js" ></script>
	</head>
	<body>
		<div id="map">
		</div>
	</body>
	<script>
		window.onload = function (){
			var map = initMap();
		}
		var obj = new Object();
		function initMap() {
			map = new ol.Map({
				target : "map",
				view : new ol.View({
					projection : "EPSG:3857",
					center : ol.proj.fromLonLat([116.20, 39.56]),
					zoom : 5

	                })
	            })
	
	            var vectorProvince = new ol.layer.Vector({
	                title: "省界",
	                id: "province",
	                source: new ol.source.Vector({
	                    projection : 'EPSG:4326',
	                    url: 'geojson/province.geojson',
	                    format: new ol.format.GeoJSON()
	                }),
	                zIndex: 1,
	                visible:true
	            });
	            map.addLayer(vectorProvince);
	
	            // 获取矢量图层数据源
	            var source = vectorProvince.getSource();
	            // 获取数据集
	            features = source.getFeatures();
		
			}
		}		
	</script>
</html>

谷歌调试可以发现要素集已经在地图上显示，但是获取要素集合为空
在这里插入图片描述

在这里插入图片描述

结果查阅后找到原因：

geojson等静态资源文件的加载将是以异步方式进行的，需要在监听事件中进行处理，改造代码：

vectorProvince.on('change', function(evt) {
	// 获取矢量图层数据源
	var source = evt.target.getSource();
	if (source.getState() === 'ready') {
	    // 获取数据集
		features = source.getFeatures();
	}
})

可以看到此时要素集已经可以拿到
在这里插入图片描述
参考：
stackoverflow
github

愚者的旋律

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Opealayer填坑——getFeatures()方法无法获取要素集

最近使用OpenLayers进行开发时遇到了一个小问题，花了点时间处理了一下，记录下这次踩坑的经历。复现场景，getFeatures()方法无法获取要素集，代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="openlayer/v5.3.0-dis
复制链接

扫一扫

专栏目录