Get extent of GeoJSON layer using OpenLayers

Question

I have implemented geojson-vt to load a big GeoJSON file but the problem I am facing is I am not able to get the extent of the layer so that I can zoom in on the specific area in the map neither is it showing entering in the method tileloadstart, tileloadend and tileloaderror.

My code is:

fetch(url)
      .then(function (response) {
        return response.json();
      })
      .then(function (json) {
          
        var tileIndex = geojsonvt(json, {
          extent: 4096,
          debug: 1,
        });
        var format = new ol.format.GeoJSON({
          dataProjection: new ol.proj.Projection({
            code: 'TILE_PIXELS',
            units: 'tile-pixels',
            extent: [0, 0, 4096, 4096],
          }),
        });
        var vectorSource = new ol.source.VectorTile({
          tileUrlFunction: function (tileCoord) {
            return JSON.stringify(tileCoord);
          },
          tileLoadFunction: function (tile, url) {
            var tileCoord = JSON.parse(url);
            var data = tileIndex.getTile(
              tileCoord[0],
              tileCoord[1],
              tileCoord[2]
            );
            var geojson = JSON.stringify(
              {
                type: 'FeatureCollection',
                features: data ? data.features : [],
              },
              replacer
            );
            var features = format.readFeatures(geojson, {
              extent: vectorSource.getTileGrid().getTileCoordExtent(tileCoord),
              featureProjection: map.getView().getProjection(),
            });
            tile.setFeatures(features);
          },
        });
       #Not Working start--
        vectorSource.on("tileloadstart",  function () {
            $('.message').html("Drawing..");
        })
        vectorSource.on("tileloadend",  function () {
            $('.message').html("");
        })
        vectorSource.on("tileloaderror",  function () {
            $('.message').html("Error Please try again");
        })
        #Not Working end--
        vectorLayer = new ol.layer.VectorTile({
          source: vectorSource,
          style: function (feature, resolution) {
            return [new ol.style.Style({
                  stroke: new ol.style.Stroke({
                    width: 1,
                    color: "#808080"
                }),
                fill: new ol.style.Fill({
                    color: feature.get('fill'),
                })
            })];
          }
        });
        console.log("Data :" + vectorLayer.getExtent());  #getting undefined
        vectorLayer.getSource().once('tileloadend', function (evt) {
            if (vectorLayer.getSource().getState() === 'ready') {
                console.log(vectorLayer.getExtent());
                // map.getView().fit(vectorLayer.getExtent(), map.getSize());
                // console.info(map.getView().getCenter());
                // console.info(map.getView().getZoom());
            }
        })

        layersByName[layer_title] = vectorLayer;
        map.addLayer(vectorLayer);

Any suggestions will be of great help! Already wasted my 2 days to get the extent but nothing worked out/

Answer 1

You could read the original json into a vector source

var extent = ol.proj.transformExtent(new ol.source.Vector({
  features: new ol.format.GeoJSON().readFeatures(json)
}).getExtent(), 'EPSG:4326', 'EPSG:3857');

Answer 2

Another way to get the extent without transforming it into a Vector is as following:

const geojson = <your geojson object>

transformExtent(
    new GeoJSON().readGeometry(geojson).getExtent(),
    "EPSG:4326",
    "EPSG:3857"
  )