4

I've had a look at this question: How to add a bounding box filter to this leaflet WFS request? and have been trying to work out how to get it to work in a different projection system, specifically EPSG:2193 in this case.

My stack is currently SQL Server -> Geoserver -> WFS in Leaflet.

I have already done the following:

So far, I'm aware that Leaflet can load WFS through a GeoJSON call. It is primarily the GeoJSON call I'm having trouble with I think. The javascript code (see below) passes the wfs GetFeature call alright, but Geoserver does not seem to listen to the BBOX parameter, or something along those lines. In other words, I can't get the right vector features to display because the WFS getFeature request only returns the top items from the database.

EDIT: I've changed some configurations in geoserver Data -> Layers -> Edit Layer so it might work now:

enter image description here


My skeleton html is currently as follows:

<!DOCTYPE html>
<html>

  <head>
    <title>My first Leaflet Map</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
  </head>

  <body>
    <div id="map" style="width: 100%; height: 720px"></div>

    <script src="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="./src/proj4.js"></script>
    <script src="./src/proj4leaflet.js"></script>
    <script>
      //insert javascript here
    </script>
  </body>

</html>

and the javascript part look something like this. Note that my WFS is deployed from localhost so the script technically won't work.

    //Set EPSG:2193 projection system here
    var nztm = new L.Proj.CRS('EPSG:2193',
       '+proj=tmerc +lat_0=0 +lon_0=173 +k=0.9996 +x_0=1600000 +y_0=10000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs', {
         resolutions: [
           8192, 4096, 2048, 1024, 512, 256, 128
         ],
       });

     // initialize the map on the "map" div with a given center and zoom
     var map = L.map('map', {
       center: [-43.80752, 172.94770, ],
       zoom: 15,
       //crs: nztm
     });

     L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       maxZoom: 17,
       attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
     }).addTo(map);

     var start_at_zoom = 13;

     function onEachFeature(feature, layer) {
       // does this feature have a property named OBJECTID?
       if (feature.properties && feature.properties.OBJECTID) {
         layer.bindPopup(feature.properties.OBJECTID);
       }
     }

     //Adds the GeoJSON layer to the map
     var featureLayer = new L.GeoJSON(
       null, {
         onEachFeature: onEachFeature
       }).addTo(map);
     load_wfs();

     //function to load geojson layer
     function loadGeoJson(data) {
       // console.log(data);
       $("#total").html(data.features.length);
       featureLayer.clearLayers();
       featureLayer.addData(data);
     }

     //when user stops dragging the map, (re)load the wfs layer
     map.on('moveend', load_wfs);

     //function to load the wfs layer
     function load_wfs() {
       if (map.getZoom() > start_at_zoom) {
         var geoJsonUrl = 'http://localhost:8080/geoserver/test/ows';
         var defaultParameters = {
           service: 'WFS',
           version: '1.0.0',
           request: 'getFeature',
           typeName: 'test:PARCEL_LAYER',
           maxFeatures: 10,
           outputFormat: 'text/javascript',
           format_options: 'callback: getJson',
           srsName: 'EPSG:4326'
         };

         var customParams = {
           bbox: map.getBounds().toBBoxString()
         };
         var parameters = L.Util.extend(defaultParameters, customParams);
         console.log(geoJsonUrl + L.Util.getParamString(parameters));


         $.ajax({
           jsonp: false,
           url: geoJsonUrl + L.Util.getParamString(parameters),
           dataType: 'jsonp',
           jsonpCallback: 'getJson',
           success: loadGeoJson
         });

       } else {
         alert("please zoom in to see the polygons!");
         featureLayer.clearLayers();
       }
     }

The GeoJSON I get back does not adhere to the WFS BBOX parameter settings, I'm simply getting the top 10 features from the database.


Geoserver log below (may or may not make sense)

2016-08-29 08:25:55,346 INFO [geoserver.wfs] - 
Request: getFeature
    service = WFS
    version = 1.0.0
    baseUrl = http://localhost:8080/geoserver/
    query[0]:
        filter = [  bbox POLYGON ((172.8623199462891 -43.83081186459637, 172.8623199462891 -43.78621481611623, 173.02428245544436 -43.78621481611623, 173.02428245544436 -43.83081186459637, 172.8623199462891 -43.83081186459637)) ]
        srsName = EPSG:4326
        typeName[0] = {www.test123.com}PARCEL_LAYER
    maxFeatures = 10
    outputFormat = text/javascript
    resultType = results
    formatOptions = {CALLBACK= getJson}
2016-08-29 08:25:55,346 INFO [wfs.json] - about to encode JSON
2016-08-29 08:26:02,438 ERROR [geoserver.ows] - 
java.lang.RuntimeException: com.microsoft.sqlserver.jdbc.SQLServerException: A .NET Framework error occurred during execution of user-defined routine or aggregate "geometry": 
System.ArgumentException: 24144: This operation cannot be completed because the instance is not valid. Use MakeValid to convert the instance to a valid instance. Note that MakeValid may cause the points of a geometry instance to shift slightly.
System.ArgumentException: 

I think my confusion lies in where to do the reprojection to EPSG:2193. Is it the leaflet map itself I have to reproject to EPSG:2193, or the WFS bbox call which I have to reproject to EPSG:2193 to get the features, and project the output GeoJSON to Leaflet's default EPSG:3857?

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.