How to use the viewport-mercator-project.PerspectiveMercatorViewport function in viewport-mercator-project

_onZoom({pos, scale}) {
    // Make sure we zoom around the current mouse position rather than map center
    const viewport = new PerspectiveMercatorViewport(this.props);
    const aroundLngLat = viewport.unproject(pos);

    const zoom = this._calculateNewZoom({relativeScale: scale});

    const zoomedViewport = new PerspectiveMercatorViewport(Object.assign({}, this.props, {zoom}));
    const [longitude, latitude] = zoomedViewport.getLocationAtPoint({lngLat: aroundLngLat, pos});

    this._updateViewport({
      zoom: this._calculateNewZoom({relativeScale: scale}),
      longitude,
      latitude,
      isDragging: true
    });
  }

_onZoom({pos, scale}) {
    // Make sure we zoom around the current mouse position rather than map center
    const viewport = new PerspectiveMercatorViewport(this.props);
    const aroundLngLat = viewport.unproject(pos);

    const zoom = this._calculateNewZoom({relativeScale: scale});

    const zoomedViewport = new PerspectiveMercatorViewport(Object.assign({}, this.props, {zoom}));
    const [longitude, latitude] = zoomedViewport.getLocationAtPoint({lngLat: aroundLngLat, pos});

    this._updateViewport({
      zoom: this._calculateNewZoom({relativeScale: scale}),
      longitude,
      latitude,
      isDragging: true
    });
  }

//     make delta with currentLoadedTiles
  //     get tiles from delta+
  //     release tiles from delta-
  //   save to reducer: currentVisibleTiles -> currentLoadedTiles
  // if zooming: debounced flush to avoid "tile spam"
  const mapViewport = getState().map.viewport;
  const viewport = mapViewport.viewport;

  // do not allow any tile update during transitions (currently only zoom)
  // wait for the end of the transition to look at viewport and load matching tiles
  if (mapViewport.currentTransition !== null) {
    return;
  }

  // instanciate a viewport instance to get lat/lon from screen top left/ bottom right bounds
  const boundsViewport = new PerspectiveMercatorViewport(viewport);
  const bounds = [
    boundsViewport.unproject([0, 0]),
    boundsViewport.unproject([viewport.width, viewport.height])
  ];

  const [wn, es] = bounds;
  const [w, s, e, n] = [wn[0], es[1], es[0], wn[1]];
  const boundsPolygonsCoordinates = [];

  const limits = getTilecoverLimits(viewport.zoom);
  if (limits.tilesAvailable === false && forceLoadingAllVisibleTiles !== true) {
    return;
  }

  if (e > 180 || w < -180) {
    // deal with the antimeridian situation by splitting the bounds polygon into two polygons

_onZoom({pos, scale}) {
    // Make sure we zoom around the current mouse position rather than map center
    const viewport = new PerspectiveMercatorViewport(this.props);
    const aroundLngLat = viewport.unproject(pos);

    const zoom = this._calculateNewZoom({relativeScale: scale});

    const zoomedViewport = new PerspectiveMercatorViewport(Object.assign({}, this.props, {zoom}));
    const [longitude, latitude] = zoomedViewport.getLocationAtPoint({lngLat: aroundLngLat, pos});

    this._updateViewport({
      zoom: this._calculateNewZoom({relativeScale: scale}),
      longitude,
      latitude,
      isDragging: true
    });
  }

styleManager.getZoomedStyle = (geojson, size, templateStyle) => {
  const featureCollection = geojsonNormalize(geojson);
  // Handle zooming to multiple features for shadow features.
  const coordinates = featureCollection.features
    .reduce((coordinates, feature) => {
      feature.geometry.coordinates[0].forEach((coordinate) => {
        coordinates.push(coordinate);
      });
      return coordinates;
    }, []);

  const viewport = new PerspectiveMercatorViewport({
    longitude: templateStyle.center[0],
    latitude: templateStyle.center[1],
    zoom: templateStyle.zoom,
    width: size.width,
    height: size.height
  });

  let bounds = coordinates.reduce((bounds, coord) => {
    return bounds.extend(coord);
  }, new mapboxgl.LngLatBounds(coordinates[0], coordinates[0]));
  const sw = bounds.getSouthWest();
  const ne = bounds.getNorthEast();

  const zoomedViewport =
    viewport.fitBounds([[sw.lng, sw.lat], [ne.lng, ne.lat]], { padding: 30 });

componentWillReceiveProps(nextProps) {
    if (nextProps.geojson) {
      // Current viewport
      let stateViewport = this.state.viewport

      // Returns envelope as GeoJSON
      const envelope = Turf.envelope(nextProps.geojson)

      // Get opposite vertices from envolving rectangle
      const bbox = [
        envelope.geometry.coordinates[0][0],
        envelope.geometry.coordinates[0][2]
      ]

      let plainViewport = new PerspectiveMercatorViewport({
        width: this.state.viewport.width,
        height: this.state.viewport.height
      }).fitBounds(bbox, { padding: 10 })

      // Replace only desired new viewport settings
      // TODO: It will be a nice feature to opt-out which viewport settings
      // should be recalculated on new queries. This feature could help to not
      // lose the current viewport (map position, orientation, pitch...)
      stateViewport = {
        ...stateViewport,
        zoom: plainViewport.zoom,
        center: plainViewport.center,
        latitude: plainViewport.latitude,
        longitude: plainViewport.longitude
      }

_calculateNewLngLat({startDragLngLat, pos, startPos}) {
    const viewport = new PerspectiveMercatorViewport(Object.assign({}, this.props, {
      longitude: startDragLngLat[0],
      latitude: startDragLngLat[1]
    }));

    const lngLat = this.props.getLngLatAtPoint ?
      this.props.getLngLatAtPoint({lngLat: startDragLngLat, pos}) :
      viewport.getLocationAtPoint({lngLat: startDragLngLat, pos});

    return lngLat;
  }

_unproject(pos) {
    const viewport = new PerspectiveMercatorViewport(Object.assign({}, this.props));
    const lngLat = this.props.unproject ?
      this.props.unproject(pos) :
      viewport.unproject(pos, {topLeft: false});
    return lngLat;
  }