How do I make the source data automatically load, even without adding the layer to the map? I have the following code:
var layer1 = new ol.layer.Vector({
title: 'Layer1',
visible: true,
name: 'layer1',
style: new ol.style.Style({
image: new ol.style.Icon( ({
anchor: [0.5, 26],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'legend/layer1.png'
}))
}),
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function(extent) {
return urlGeoserver + 'wfs?service=WFS&' +
'version='+versionGeoserver+'&request=GetFeature&typename=geo:LAYER1&' +
'outputFormat=application/json&srsname=EPSG:4326&' +
'all=' + extent.join(',') + ',EPSG:4326';
},
strategy: ol.loadingstrategy.all
})
});
layer1.getSource().on('featuresloadend', (vectorSourceEvent) => {
alert(vectorSourceEvent.features?.length); //return 0
})
This way it returns 0, but there are several features. It only returns correct if the layer is added to the map: map.addLayer(layer1); How to solve, so that you can have access to the source, even without having added the layer?
[EDIT]: Following a tip from Mike, with fetch, it still doesn't show the data.
var vectorSource = new ol.source.Vector();
var layer1 = new ol.layer.Vector({
title: 'Layer1',
visible: true,
name: 'layer1',
style: new ol.style.Style({
image: new ol.style.Icon( ({
anchor: [0.5, 26],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'legend/layer1.png'
}))
}),
source: vectorSource,
});
var url = urlGeoserver + 'wfs?service=WFS&' +
'version='+versionGeoserver+'&request=GetFeature&typename=geo:LAYER1&' +
'outputFormat=application/json&srsname=EPSG:4326';
fetch(url)
.then(function (response) {
return response.json();
})
.then(function (json) {
const features = new ol.format.GeoJSON().readFeatures(json);
vectorSource.addFeatures(features);
});
map.addLayer(layer1); //not return in map
You can populate a vector source by fetching the url, parsing the features and adding them to the source.
var vectorSource = new ol.source.Vector();
fetch(url)
.then(function (response) {
return response.json();
})
.then(function (json) {
const features = new ol.format.GeoJSON().readFeatures(json);
vectorSource.addFeatures(features);
alert(features.length);
});