I am able to load the multiple wfs features using GeoJSON, but now i need to load the features dynamically instead of loading randomlyHere is my code
// First WFS Layervar 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 Layervar 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 }) }) })});
أكثر...
// First WFS Layervar 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 Layervar 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 }) }) })});
أكثر...