0

I'm trying to render Mapbox Vector Tiles hosted on a GeoServer instance. I followed along with the GeoServer Vector tiles tutorial without any issues (the demo uses EPSG:900913). Likewise, I'm able to preview the MVT in Tile Caching > Tile Layers. See Image #1 below. The tiles also rendered in OpenLayers when I set my map view projection to EPSG:90013.

The projection I need to use in OpenLayers is EPSG:6931. I added this projection as a new gridset following these instructions and then assigned it to the same layer (opengeo:countries). However, I get nothing when trying to preview my MVT in this projection. See Image #2 below.

When I plug this url into OpenLayers with the following code (using React), The vector layer doesn’t render on my map, similar to the GeoServer preview.

useEffect(() => {
  const tileGrid = new TileGrid({
    extent: [
      -180.0, 51.208333333333364, -61.09935709635414, 83.2172339545356,
    ],
    tileSize: 256,
    resolutions: defaultResolutions,
  });

  const layer = 'opengeo:countries';
  const projection_epsg_no = '6931';
  const vtLayer = new VectorTileLayer({
    style: new Style({
      fill: new Fill({
        color: '#ADD8E6',
      }),
      stroke: new Stroke({
        color: '#880000',
        width: 1,
      }),
    }),
    source: new VectorTileSource({
      tileGrid: tileGrid,
      projection: 'EPSG:6931',
      format: new MVT(),
      url:
        'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/' +
        layer +
        '@EPSG%3A' +
        projection_epsg_no +
        '@pbf/{z}/{x}/{-y}.pbf',
    }),
  });
  if (olMaps[mapKey]) {
    console.log(vtLayer);
    olMaps[mapKey].addLayer(vtLayer);
  }
  return () => {
    if (olMaps[mapKey]) {
      olMaps[mapKey].removeLayer(vtLayer);
    }
  };
}, [olMaps, mapKey]);

This is just the test data from the GeoServer demo but the actual data I want to render has the same behavior in the MVT GeoServer preview; showing up in EPSG:900913 and displaying nothing in the new gridset with EPSG:6931.

Is there a way to retile my vector data in the correct projection so it can be ingested by OpenLayers? Is there a re-projection step I need to do? What am I missing?


Image #1: MVT Preview with default gridset EPSG:900913

MVT Preview with default gridset EPSG:900913

Image #2: MVT Preview with new gridset EPSG:6931

MVT Preview with new gridset EPSG:6931

3
  • As the message suggests you must specify the same projection as options in both the view and the VectorTileSource (both default to EPSG:3857) You will also need to specify the custom tilegrid in the VectorTileSource. Similar to openlayers.org/en/latest/examples/vector-tiles-4326.html
    – Mike
    Dec 3, 2021 at 21:39
  • Thanks @Mike -- I was able to get rid of the OpenLayers error, but similar to the GeoServer gridset preview, the vector layer doesn't display on my basemap.
    – 0x00
    Dec 3, 2021 at 23:12
  • With a non-standard grid the {-y} placeholder in the url may not work correctly and you may need to replace it with a tileUrlFunction similar to that in described at tbe top of openlayers.org/en/latest/apidoc/module-ol_source_XYZ-XYZ.html Also check that your defaultResolutions are appropriate for the grid.
    – Mike
    Dec 6, 2021 at 13:53

1 Answer 1

0

After a bit of troubleshooting, I realized that the min and max Published Zoom Levels in GeoServer kept defaulting to 0 for the gridset I added.

I simply removed the gridset from the assigned layers, saved, and added them again. One thing to note-- I added my resolutions in the Tile Matrix Set of the gridset config after initially assigning the girdset to the corresponding layers. It's possible that this was the root of my issue and the layers did not see the changes I had made to the gridset, however it may have been some error I made in the layer/gridset configuration. Working beautifully now!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.