¿Cómo cargar GeoJSON desde GeoServer para definir una variable en Leaflet?

Question

¿Cómo puedo cargar un archivo GeoJSON desde GeoServer en Leaflet? Hay muchas sugerencias por ahí, pero ninguna me funciona.

Actualmente mi aplicación carga un archivo js desde el servidor que comienza así:

var boundaries ={ - followed by the geojson file content

Para acelerar las cosas (y hacer que funcione en los navegadores más antiguos) ¿cómo puedo definir los límites variables = { - GeoJSON de GeoServer?

Todo lo que tengo hasta ahora es (no funciona):

var owsrootUrl = 'http://185.19.29.22:8080/geoserver/cresh/ows';

var defaultParameters = {
    service : 'WFS',
    version : '1.0.0',
    request : 'GetFeature',
    typeName : 'cresh:datazone_popup',
    outputFormat : 'json',
    format_options : 'callback:getJson',
    SrsName : 'EPSG:4326'
};

var parameters = L.Util.extend(defaultParameters);
var URL = owsrootUrl + L.Util.getParamString(parameters);

var boundaries = null;
var ajax = $.ajax({
    url : URL,
    dataType : 'json',
    jsonpCallback : 'getJson',
    success : function (response) {
        boundaries = L.geoJson(response, {
            style: function (feature) {
                return {
                    stroke: false,
                    fillColor: 'FFFFFF',
                    fillOpacity: 0
                };
                }
        });
    }
});

Geoserver está instalado en el mismo servidor que mi aplicación web y WFS está funcionando.

Answer 1

Hola tu url debe ser :
/ geoserver/workspaceName/wfs?request=GetFeature&version=1.0.0&typeName=storeName:layerName&outputFormat=json

Mantenga el estilo por defecto por ahora, Si esto no funciona, deberías ver un mensaje de error en tu consola, que te ayudará.

Answer 2

Aquí hay un jsfiddle que funciona http://jsfiddle.net/expedio/8r1ncv6a/ He publicado mientras respondía a la siguiente pregunta:

Cómo añadir Geoserver WFS a la aplicación Leaflet JS

Para comprobar si su geoservidor ya soporta jsonp sólo tiene que echar un vistazo a la sección de vista previa de su instalación de GeoServer.

Answer 3

En su directorio geoserver localice el archivo web.xml (debería estar aquí: geoserver \WEB -INF) y añadir lo siguiente justo encima </web-app> al final:

<context-param>
        <param-name>ENABLE_JSONP</param-name>
        <param-value>true</param-value>
</context-param>

y aquí hay un ejemplo de trabajo:

var owsrootUrl = 'http://myip:8080/geoserver/opengeo/ows';

//---------------------------------------------------------------------
var defaultParameters2 = {
    service : 'WFS',
    version : '2.0',
    request : 'GetFeature',
    typeName : 'opengeo:csg_ukpn',
    outputFormat : 'text/javascript',
    format_options : 'callback:getJson',
    SrsName : 'EPSG:4326'
};

      var geoJsonLayer = new L.GeoJSON();

      function getJson(data) {
          geoJsonLayer.addData(data);
      }

var parameters2 = L.Util.extend(defaultParameters2);
var URL2 = owsrootUrl + L.Util.getParamString(parameters2);

var markers = L.markerClusterGroup();
var WFSLayer2 = null;
var ajax2 = $.ajax({
    url : URL2,
    dataType : 'jsonp',
    jsonpCallback : 'getJson',
    success : function (response) {
       WFSLayer2 = L.geoJson(response, {
            pointToLayer: function(feature, latlng) {
               var smallIcon2 = L.icon({
                                  iconSize: [27, 27],
                                  iconAnchor: [13, 27],
                                  popupAnchor:  [1, -24],
                                  iconUrl: 'leaflet/icons/' + feature.properties.csg_survey_status + '.png'
               });

               return L.marker(latlng, {icon: smallIcon2});
},
            onEachFeature: function (feature, layer) {
                popupOptions = {maxWidth: 600, maxHeight: 300};

                layer.bindLabel('<h4>'+feature.properties.plant_no+'</h4>');
                layer.bindPopup(feature.properties.plant_no+'<br>'+feature.properties.csg_survey_pack+'<br>'+feature.properties.csg_street_view
                    ,popupOptions);
            }
        }).addTo(markers.addTo(map));
    }
});

En tu javascript sólo tienes que sustituir el tipo de datos por jsonp. dataType : 'jsonp',