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:
- Install the SQL Server extension and configured the layer in geoserver
- Enabled jsonp Request JSONP from Geoserver using AJAX request in Openlayers 3
- Loaded up the proj4leaflet plugin http://kartena.github.io/Proj4Leaflet/
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:
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/[email protected]/dist/leaflet.css" />
</head>
<body>
<div id="map" style="width: 100%; height: 720px"></div>
<script src="https://npmcdn.com/[email protected]/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?
