CODEWITHSUNDEEP
javascriptopenlayers
user12538529
user12538529

Reputation: 101

Get data from source in openlayers

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

Upvotes: 1

Views: 1337

Answers (1)

Mike
Mike

Reputation: 17972

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); 
  });

Upvotes: 2

Related Questions