I have a similar problem to this one: Mapbox Vector Tiles from Geoserver 2.11 in Mapbox GL JS
I'm trying to do the same (just with maplibre-gl-js, a fork of MapBox GL js v1) and GeoServer (2.20.1) with vector tile plugin. I got it working with openlayers, but not in maplibre-gl-js…
When I request the server like:
http://geoserverHost:8080/geoserver/gwc/service/tms/1.0.0/opengeo:hessen@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf
I get the actual tiles correctly but all data is converted (by GeoServer or GeoWebCache) to EPSG:900913 although the geometries in the database are all in EPSG:4326, which is a problem since maplibre-gl-js wants EPSG:4326 https://maplibre.org/maplibre-gl-js-docs/api/geography/.
Requesting with tileGrid EPSG:4326 like so:
http://geoserverHost:8080/geoserver/gwc/service/tms/1.0.0/opengeo:hessen@EPSG%3A4326@pbf/{z}/{x}/{y}.pbf
is also not working because the x and y values in the url (filled by maplibre-gl-js "magic") have to be different.
How can I force the GeoServer not to convert the returned geometries into a different SRID ?
the code / config:
this.map = new Map({
container: 'map',
minZoom: 0,
maxZoom: 13,
pitchWithRotate: false, // 3D Ansicht
touchPitch: false,
dragRotate: false, // rotation
style: {
version: 8,
sources: {
'plz-ort-source': {
type: 'vector',
scheme: 'tms',
tiles: ['
http://localhost:4200/geoserver/gwc/service/tms/1.0.0/opengeo:plz_ort_shape_1000@EPSG:900913@pbf/{z}/{x}/{y}.pbf'
],
minzoom: 0,
maxzoom: 14
}
},
layers: [
{
id: 'plz-ort',
type: 'fill',
source: 'plz-ort-source',
'source-layer': 'plz-ort',
layout: {},
paint: {
'fill-color': 'rgba(0, 0, 255, 0.4)',
'fill-outline-color': 'rgba(0, 0, 255, 1)'
}
},
{
id: 'foreground',
type: 'raster',
source: 'foreground-tiles',
minzoom: 0,
maxzoom: 14
}
]
},
center: [10, 51], // starting position [lng, lat]
zoom: 5 // starting zoom
});
And the GeoServer layer configuration:
Best Answer
Just found the Problem, its not the projection or Geoserver. The Problem is the 'source-layer' name in the style -> layers Object must be the same as the requested layer name. So instead of
it should be:
like in the request url...