示例代码:
var geojsonSource = new ol.source.Vector({
url: './features.json',
format: new ol.format.GeoJSON(),
});
var geojsonLayer = new ol.layer.Vector({
name: 'geojson图层',
source: geojsonSource,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(10, 20, 255, 0.1)',
})
}),
zIndex: 3,
});
map.addLayer(geojsonLayer);
这里的url地址可以是本地geojson文件,也可以是网络geojson格式的数据服务。加载完成后可以对数据要素进行遍历
pointFeatureSource.getFeatures().forEach(feature => {
console.log(feature);
})
值得注意的是,加载网络服务的行为(如geoserver发布的数据服务)属于异步,不能直接获得要素。
下面代码是我解决此问题的一种思路,
通过VectorSource的featuresloadend事件(在要素完成加载时触发)
pointFeatureSource.on('featuresloadend', function (e) {
e.features.forEach((item) => {
console.log(item)
})
});