1

I am able to load the multiple wfs features using GeoJSON, but now i need to load the features dynamically instead of loading randomly Here is my code

// First WFS Layer
var url = 'http://localhost:8080/geoserver/wfs?service=WFS&' +
        'version=1.1.0&request=GetFeature&typename=WFS:Layer2' +
        'outputFormat=text/javascript&format_options=callback:loadFeatures' +
        '&srsname=EPSG:4326';
$.ajax({url: url, dataType: 'jsonp', jsonp: false});
var geojsonFormat = new ol.format.GeoJSON();
var vectorSource = new ol.source.Vector();
var loadFeatures = function(response) { 
    vectorSource.addFeatures(geojsonFormat.readFeatures(response));
};
var fibreEquipment = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(55, 155, 155, 0.5)'
        }),
        stroke: new ol.style.Stroke({
            color: 'rgba(55, 155, 155, 0.8)',
            width: 2
        }),
        image: new ol.style.Circle({
            radius: 5,
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.5)',
            }),
            stroke: new ol.style.Stroke({
                color: 'rgba(155, 55, 155, 1)',
                width: 2
            })
        })
    })
});

// Second WFS Layer

var url = 'http://localhost:8080/geoserver/wfs?service=WFS&' +
    'version=1.1.0&request=GetFeature&typename=Test:Layer1' +
        'outputFormat=text/javascript&format_options=callback:loadFeatures' +
        '&srsname=EPSG:4326';
$.ajax({url: url, dataType: 'jsonp', jsonp: false});
var geojsonFormat = new ol.format.GeoJSON();
var vectorSource = new ol.source.Vector();
var loadFeatures = function(response) {
        vectorSource.addFeatures(geojsonFormat.readFeatures(response));
};
var Layer1 = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(55, 155, 155, 0.5)'
        }),
        stroke: new ol.style.Stroke({
            color: 'rgba(55, 155, 155, 0.8)',
            width: 2
        }),
        image: new ol.style.Circle({
            radius: 5,
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.5)',
            }),
            stroke: new ol.style.Stroke({
                color: 'rgba(155, 55, 155, 1)',
                width: 2
            })
        })
    })
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.