Extract extent of all features inside a vectortile source in OpenLayers

Question

I'm using OpenLayers 7.4.0 to create a webapp that allow users to add a vector tile layer by providing a URL via an input field. When the user hits an import button, the map should be centered on the features and I need to extract the geometry_type of the features for further processing.

I found and tried this approach to get the geometry type by listening to the tileloadend event. This works if the features are loaded inside the current viewextent. However, in my case the situation can occur where the features fall outside of the current extent, and as a result no features are loaded.

So I figured, maybe I can first fit the map to the extent of the vectortile layer. I tried to do this with getExtent(). As shown below

let map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  target: "map_container",
  view: new View({
    center: [595074, 6829276],
    zoom: 10,
  }),
  controls: [],
});

let layer = new VectorTileLayer({
    declutter: false,
    zindex: 30,
    source: new VectorTileSource({
       format: new MVT(),
       url: "https://demo.ldproxy.net/vineyards/tiles/WebMercatorQuad/{z}/{y}/{x}?f=mvt",
    }),
});

map.addLayer(layer)

let layer_extent = layer.getExtent()

map.getView().fit(layer_extent)

But this doesn't work as layer_extent is undefined.

How do I extract the extent of all features inside a vectortile source?

Answer 1

The source used in your code in an OGC source which can be loaded by OpenLayers using an OGCVectorTile source https://openlayers.org/en/latest/apidoc/module-ol_source_OGCVectorTile-OGCVectorTile.html

The data extent is the extent of the tile grid defined in the json

const source = new OGCVectorTile({
  url: 'https://demo.ldproxy.net/vineyards/tiles/WebMercatorQuad',
  format: new MVT(),
});

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
    new VectorTileLayer({
      source: source,
    }),
  ],
});

const key = source.on('change', () => {
  if (source.getState() === 'ready') {
    map.getView().fit(source.getTileGrid().getExtent());
    unByKey(key);
  }
});

Working example https://codesandbox.io/s/ogc-vector-tiles-forked-2r5cqm?file=/main.js

In the case of other vector tile sources there may be no way of knowing which tiles contain features until they are loaded, so you must assume the entire grid can contain data.