How to use @mapbox/vector-tile - 10 common examples

this.blobToBuffer(blob, (buffer) => {
                        // console.log('blob -> buffer:', buffer); // ArrayBuffer(39353) {}
                        try {
                            let pbf = new Pbf(buffer);
                            cb(new VectorTile(pbf));
                        } catch (e) {
                            // console.log('e:', e);
                            cb(null);
                            return;
                        }
                    });
                });

for (const table of tables){

    // Table may be null in tables array.
    if (!table && tables.length > 1) continue;

    // Get a sample MVT from the cache table.
    let rows = await env.dbs[layer.dbs](`SELECT z, x, y, mvt, tile FROM ${layer.mvt_cache} LIMIT 1`, null, 'no_log');

    if (rows && rows.err) return await createMVTCache(layer);

    // Check sample MVT.
    if (rows.length > 0) {

      const VectorTile = require('@mapbox/vector-tile').VectorTile;
      const Protobuf = require('pbf');
      const tile = new VectorTile(new Protobuf(rows[0].mvt));

      // MVT cache without fields.
      if (!layer.mvt_fields) return;

      // Check if all mvt_fields are contained in cached MVT.
      for (const field of layer.mvt_fields){

        // Truncate cache table if field is not in sample MVT.
        if (Object.keys(tile.layers).length > 0 && tile.layers[layer.key]._keys.indexOf(field.split(' as ').pop()) < 0) {

          // Truncate the cache table.
          rows = await env.dbs[layer.dbs](`TRUNCATE ${layer.mvt_cache};`);

          if (rows.err) {
            return log(`!!! ${layer.locale}.${layer.key} | ${layer.mvt_cache} (mvt cache) => Failed to truncate cache table`);
          }

fr.onload = (e) => {
                        let buffer = e.target.result;
                        console.log('arrayBuffer:', buffer); // ArrayBuffer(39353) {}
                        let tile = new VectorTile(new Pbf(buffer));
                        console.log('tile:', tile);

                        processTile(tile, zoompos, geojson, bottomTiles);
                        console.log('bottomTiles:', bottomTiles);

                        // assume only tile to dl !!!!!!!!!!!!!!!!!
                        let eleList = getEleList(geojson);
                        console.log('eleList:', eleList);
                        addBottomEle(geojson, bottomTiles, eleList);
                        console.log('geojson:', geojson);

                        let contours = getContours(eleList, geojson, polygon);
                        console.log('contours:', contours);

                        cb(contours);
                    };

xhr({uri: uri, responseType: 'arraybuffer'}, (error, response, buffer) => {
                    if (error || !this.isAjaxSuccessful(response.statusCode)) {
                        cb(null);
                        return;
                    }
                    // console.log('mapbox -> buffer:', buffer); // ArrayBuffer(39353) {}
                    cb(new VectorTile(new Pbf(buffer)));
                });
            } else {

async urlToDataframeTransformer (response, x, y, z, layerID, metadata) {
        const MVT_EXTENT = metadata.extent;
        const arrayBuffer = await response.arrayBuffer();
        if (arrayBuffer.byteLength === 0 || response === 'null') {
            return { empty: true };
        }
        const tile = new VectorTile(new Protobuf(arrayBuffer));

        if (Object.keys(tile.layers).length > 1 && !layerID) {
            throw new CartoValidationError(
                `LayerID parameter wasn't specified and the MVT tile contains multiple layers: ${JSON.stringify(Object.keys(tile.layers))}.`,
                CartoValidationErrorTypes.MISSING_REQUIRED
            );
        }

        const mvtLayer = tile.layers[layerID || Object.keys(tile.layers)[0]]; // FIXME this!!!

        if (!mvtLayer) {
            return { empty: true };
        }

        const { geometries, properties, propertiesArrayBuffer, numFeatures } = this._decodeMVTLayer(mvtLayer, metadata, MVT_EXTENT);
        const rs = rsys.getRsysFromTile(x, y, z);

function readPBF(file, options) {
    const vectorTile = new VectorTile(new Protobuf(file));
    const extentSource = options.extentSource || file.extent;
    const sourceLayers = Object.keys(vectorTile.layers);

    if (sourceLayers.length < 1) {
        return;
    }

    // x,y,z tile coordinates
    const x = extentSource.col;
    const z = extentSource.zoom;
    // We need to move from TMS to Google/Bing/OSM coordinates
    // https://alastaira.wordpress.com/2011/07/06/converting-tms-tile-coordinates-to-googlebingosm-tile-coordinates/
    // Only if the layer.origin is top
    const y = options.isInverted ? extentSource.row : (1 << z) - extentSource.row - 1;

    options.buildExtent = true;

return (res: ArrayBuffer): MapFeature => {
      const tile = new vt.VectorTile(new Protobuf(res));
      const layer = tile.layers[layerId];
      const centerLayer = tile.layers[`${layerId}-centers`];

      const features = [...Array(layer.length)].fill(null).map((d, i) => {
        return layer.feature(i).toGeoJSON(coords['x'], coords['y'], queryZoom);
      });
      const centerFeatures = [...Array(centerLayer.length)].fill(null).map((d, i) => {
        return centerLayer.feature(i);
      });
      const containsPoint = features.filter(f => inside(pt, f));

      let matchFeat, centerFeat;
      // If looking for block groups, search only on geography
      // otherwise search on name and geography
      if (layerId === 'block-groups') {
        if (containsPoint.length > 0) {

return (res: ArrayBuffer): MapFeature => {
      const tile = new vt.VectorTile(new Protobuf(res));
      const layer = tile.layers[layerId];
      const features = [...Array(layer.length)].fill(null).map((d, i) => {
        return layer.feature(i).toGeoJSON(coords.x, coords.y, 10);
      });

      let matchFeat;
      const containsPoint = features.filter(feat => inside(point, feat));
      if (containsPoint.length) {
        matchFeat = containsPoint[0];
      } else {
        // Check if featName is non-null, filter featurues by it if exists
        const matchesName = featName ? features.filter(feat =>
          feat.properties.n.toLowerCase().startsWith(featName.toLowerCase())) : features;
        matchFeat = matchesName.length ? matchesName[0] : false;
      }

reader.addEventListener("loadend", function() {
						// reader.result contains the contents of blob as a typed array
						// blob.type === 'application/x-protobuf'
						var pbf = new Pbf( reader.result );
						return resolve(new VectorTile( pbf ));

					});
					reader.readAsArrayBuffer(blob);

// @flow

import {LineLayoutArray} from '../array_types';

import {members as layoutAttributes} from './line_attributes';
import SegmentVector from '../segment';
import {ProgramConfigurationSet} from '../program_configuration';
import {TriangleIndexArray} from '../index_array_type';
import EXTENT from '../extent';
import mvt from '@mapbox/vector-tile';
const vectorTileFeatureTypes = mvt.VectorTileFeature.types;
import {register} from '../../util/web_worker_transfer';
import {hasPattern, addPatternDependencies} from './pattern_bucket_features';
import loadGeometry from '../load_geometry';
import EvaluationParameters from '../../style/evaluation_parameters';

import type {
    Bucket,
    BucketParameters,
    BucketFeature,
    IndexedFeature,
    PopulateParameters
} from '../bucket';
import type LineStyleLayer from '../../style/style_layer/line_style_layer';
import type Point from '@mapbox/point-geometry';
import type {Segment} from '../segment';
import type Context from '../../gl/context';