I have a problem displaying two WFS layers from Geoserver with Leaflet. Most of the time it works well, but sometimes, when I click on my first layer, it returns the second, and sometimes, if I click on the second layer, it displays the first ... Maybe you can help me with my code :
var owsrootUrlAssainissement = 'http://localhost:8080/geoserver/Intranet/ows'; //my first layer var defaultParametersEU = { service : 'WFS', version : '1.0.0', request : 'GetFeature', typeName : 'Intranet:conduites_eu_l93', outputFormat : 'text/javascript', srsName : 'EPSG:4326' }; var parametersEU = L.Util.extend(defaultParametersEU); var ajaxEU = $.ajax({ url : owsrootUrlAssainissement + L.Util.getParamString(parametersEU), dataType : 'jsonp', jsonpCallback: 'parseResponse', success : function (reseauEU) { conduites_EU = L.geoJson(reseauEU, { style: function (feature) { return { color: "red", fillColor: 'red', opacity: 1, weight: 3, }; }, }); } }); //my second layer var defaultParametersUN = { service : 'WFS', version : '1.0.0', request : 'GetFeature', typeName : 'Intranet:conduites_un_l93', outputFormat : 'text/javascript', srsName : 'EPSG:4326' }; var parametersUN = L.Util.extend(defaultParametersUN); var ajaxUN = $.ajax({ url : owsrootUrlAssainissement + L.Util.getParamString(parametersUN), dataType : 'jsonp', jsonpCallback: 'parseResponse', success : function(reseauUN) { conduites_UN = L.geoJson(reseauUN, { style: function (feature) { return { color: "blue", weight: 3, opacity: 1, }; }, }); } }); $( "input" ).click(function( event ) { layerClicked = window[event.target.value]; if (map.hasLayer(layerClicked)) { map.removeLayer(layerClicked); } else{ map.addLayer(layerClicked); } ; }); And my html :
أكثر...
var owsrootUrlAssainissement = 'http://localhost:8080/geoserver/Intranet/ows'; //my first layer var defaultParametersEU = { service : 'WFS', version : '1.0.0', request : 'GetFeature', typeName : 'Intranet:conduites_eu_l93', outputFormat : 'text/javascript', srsName : 'EPSG:4326' }; var parametersEU = L.Util.extend(defaultParametersEU); var ajaxEU = $.ajax({ url : owsrootUrlAssainissement + L.Util.getParamString(parametersEU), dataType : 'jsonp', jsonpCallback: 'parseResponse', success : function (reseauEU) { conduites_EU = L.geoJson(reseauEU, { style: function (feature) { return { color: "red", fillColor: 'red', opacity: 1, weight: 3, }; }, }); } }); //my second layer var defaultParametersUN = { service : 'WFS', version : '1.0.0', request : 'GetFeature', typeName : 'Intranet:conduites_un_l93', outputFormat : 'text/javascript', srsName : 'EPSG:4326' }; var parametersUN = L.Util.extend(defaultParametersUN); var ajaxUN = $.ajax({ url : owsrootUrlAssainissement + L.Util.getParamString(parametersUN), dataType : 'jsonp', jsonpCallback: 'parseResponse', success : function(reseauUN) { conduites_UN = L.geoJson(reseauUN, { style: function (feature) { return { color: "blue", weight: 3, opacity: 1, }; }, }); } }); $( "input" ).click(function( event ) { layerClicked = window[event.target.value]; if (map.hasLayer(layerClicked)) { map.removeLayer(layerClicked); } else{ map.addLayer(layerClicked); } ; }); And my html :
-
EU - Réseau
UN - Réseau
أكثر...