@loaders.gl/mvt 4.3.0-alpha.1 → 4.3.0-alpha.2

package/src/lib/vector-tile/vector-tile-feature.ts

@@ -6,7 +6,9 @@
 import {Feature} from '@loaders.gl/schema';
 import {FlatFeature, FlatIndexedGeometry, GeojsonGeometryInfo} from '@loaders.gl/schema';
 import Protobuf from 'pbf';
-import {classifyRings, classifyRingsFlat, projectToLngLatFlat} from '../utils/geometry-utils';
+import {classifyRings, classifyRingsFlat} from '../utils/geometry-utils';
+import {projectToLngLat, projectToLngLatFlat} from '../utils/geometry-utils';
+import {convertToLocalCoordinates, convertToLocalCoordinatesFlat} from '../utils/geometry-utils';
 
 export class VectorTileFeature {
   properties: {[x: string]: string | number | boolean | null};
@@ -48,47 +50,45 @@ export class VectorTileFeature {
     pbf.readFields(readFeature, this, end);
   }
 
-  toGeoJSON(
-    options: {x: number; y: number; z: number} | ((data: number[], feature: {extent: any}) => void)
+  toGeoJSONFeature(
+    coordinates: 'wgs84' | 'local',
+    tileIndex?: {x: number; y: number; z: number}
   ): Feature {
     const coords = this.loadGeometry();
 
-    if (typeof options === 'function') {
-      return _toGeoJSON(this, coords, options);
-    }
-    const {x, y, z} = options;
-    const size = this.extent * Math.pow(2, z);
-    const x0 = this.extent * x;
-    const y0 = this.extent * y;
-
-    function project(line: number[]) {
-      for (let j = 0; j < line.length; j++) {
-        const p = line[j];
-        p[0] = ((p[0] + x0) * 360) / size - 180;
-        const y2 = 180 - ((p[1] + y0) * 360) / size;
-        p[1] = (360 / Math.PI) * Math.atan(Math.exp((y2 * Math.PI) / 180)) - 90;
-      }
+    switch (coordinates) {
+      case 'wgs84':
+        return _toGeoJSONFeature(this, coords, (line: number[][]) =>
+          projectToLngLat(line, tileIndex!, this.extent)
+        );
+
+      default:
+        return _toGeoJSONFeature(this, coords, convertToLocalCoordinates);
     }
-    return _toGeoJSON(this, coords, project);
   }
-
   /**
    *
    * @param options
    * @returns
    */
-  toBinaryCoordinates(
-    options: {x: number; y: number; z: number} | ((data: number[], feature: {extent: any}) => void)
+  toBinaryFeature(
+    coordinates: 'wgs84' | 'local',
+    tileIndex?: {x: number; y: number; z: number}
   ): FlatFeature {
-    if (typeof options === 'function') {
-      return this._toBinaryCoordinates(options);
+    const geom = this.loadFlatGeometry();
+
+    switch (coordinates) {
+      case 'wgs84':
+        return this._toBinaryCoordinates(geom, (coords: number[]) =>
+          projectToLngLatFlat(coords, tileIndex!, this.extent)
+        );
+
+      default:
+        return this._toBinaryCoordinates(geom, convertToLocalCoordinatesFlat);
     }
-    const tileIndex = options;
-    return this._toBinaryCoordinates((data: number[]) =>
-      projectToLngLatFlat(data, tileIndex, this.extent)
-    );
   }
 
+  /** Read a bounding box from the feature */
   // eslint-disable-next-line max-statements
   bbox() {
     const pbf = this._pbf;
@@ -135,32 +135,14 @@ export class VectorTileFeature {
    * @param transform
    * @returns result
    */
-  _toBinaryCoordinates(transform) {
-    // Expands the protobuf data to an intermediate Flat GeoJSON
-    // data format, which maps closely to the binary data buffers.
-    // It is similar to GeoJSON, but rather than storing the coordinates
-    // in multidimensional arrays, we have a 1D `data` with all the
-    // coordinates, and then index into this using the `indices`
-    // parameter, e.g.
-    //
-    // geometry: {
-    //   type: 'Point', data: [1,2], indices: [0]
-    // }
-    // geometry: {
-    //   type: 'LineString', data: [1,2,3,4,...], indices: [0]
-    // }
-    // geometry: {
-    //   type: 'Polygon', data: [1,2,3,4,...], indices: [[0, 2]]
-    // }
-    // Thus the indices member lets us look up the relevant range
-    // from the data array.
-    // The Multi* versions of the above types share the same data
-    // structure, just with multiple elements in the indices array
-    const geom = this.loadFlatGeometry();
+  _toBinaryCoordinates(
+    geom: FlatIndexedGeometry,
+    transform: (data: number[], extent: number) => void
+  ) {
     let geometry;
 
     // Apply the supplied transformation to data
-    transform(geom.data, this);
+    transform(geom.data, this.extent);
 
     const coordLength = 2;
 
@@ -259,6 +241,28 @@ export class VectorTileFeature {
     return lines;
   }
 
+  /**
+   * Expands the protobuf data to an intermediate Flat GeoJSON
+   * data format, which maps closely to the binary data buffers.
+   * It is similar to GeoJSON, but rather than storing the coordinates
+   * in multidimensional arrays, we have a 1D `data` with all the
+   * coordinates, and then index into this using the `indices`
+   * parameter, e.g.
+   *
+   * geometry: {
+   *   type: 'Point', data: [1,2], indices: [0]
+   * }
+   * geometry: {
+   *   type: 'LineString', data: [1,2,3,4,...], indices: [0]
+   * }
+   * geometry: {
+   *   type: 'Polygon', data: [1,2,3,4,...], indices: [[0, 2]]
+   * }
+   * Thus the indices member lets us look up the relevant range
+   * from the data array.
+   * The Multi* versions of the above types share the same data
+   * structure, just with multiple elements in the indices array
+   */
   // eslint-disable-next-line complexity, max-statements
   loadFlatGeometry(): FlatIndexedGeometry {
     const pbf = this._pbf;
@@ -315,7 +319,11 @@ export class VectorTileFeature {
   }
 }
 
-function _toGeoJSON(vtFeature: VectorTileFeature, coords: number[][][], transform): Feature {
+function _toGeoJSONFeature(
+  vtFeature: VectorTileFeature,
+  coords: number[][][],
+  transform: (data: number[][], extent: number) => void
+): Feature {
   let type = VectorTileFeature.types[vtFeature.type];
   let i: number;
   let j: number;
@@ -328,13 +336,13 @@ function _toGeoJSON(vtFeature: VectorTileFeature, coords: number[][][], transfor
         points[i] = coords[i][0];
       }
       coordinates = points;
-      transform(coordinates, vtFeature);
+      transform(coordinates, vtFeature.extent);
       break;
 
     case 2:
       coordinates = coords;
       for (i = 0; i < coordinates.length; i++) {
-        transform(coordinates[i], vtFeature);
+        transform(coordinates[i], vtFeature.extent);
       }
       break;
 
@@ -342,7 +350,7 @@ function _toGeoJSON(vtFeature: VectorTileFeature, coords: number[][][], transfor
       coordinates = classifyRings(coords);
       for (i = 0; i < coordinates.length; i++) {
         for (j = 0; j < coordinates[i].length; j++) {
-          transform(coordinates[i][j], vtFeature);
+          transform(coordinates[i][j], vtFeature.extent);
         }
       }
       break;
@@ -368,7 +376,8 @@ function _toGeoJSON(vtFeature: VectorTileFeature, coords: number[][][], transfor
   };
 
   if (vtFeature.id !== null) {
-    result.id = vtFeature.id;
+    result.properties ||= {};
+    result.properties.id = vtFeature.id;
   }
 
   return result;

package/src/lib/{geojsonvt → vector-tiler}/clip.ts

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 // Forked from https://github.com/mapbox/geojson-vt under compatible ISC license
 
-import type {GeoJSONTileFeature} from './tile';
+import type {TableTileFeature} from './tile';
 import {createFeature} from './feature';
 
 /* eslint-disable no-continue */
@@ -21,7 +21,7 @@ import {createFeature} from './feature';
  */
 // eslint-disable-next-line max-params, complexity, max-statements
 export function clip(
-  features: GeoJSONTileFeature[],
+  features: TableTileFeature[],
   scale: number,
   k1: number,
   k2: number,
@@ -29,7 +29,7 @@ export function clip(
   minAll: number,
   maxAll: number,
   options: {lineMetrics: boolean}
-): GeoJSONTileFeature[] | null {
+): TableTileFeature[] | null {
   k1 /= scale;
   k2 /= scale;
 
@@ -41,7 +41,7 @@ export function clip(
     return null; // trivial reject
   }
 
-  const clipped: GeoJSONTileFeature[] = [];
+  const clipped: TableTileFeature[] = [];
 
   for (const feature of features) {
     const geometry = feature.geometry;

package/src/lib/{geojsonvt → vector-tiler}/convert.ts

@@ -7,14 +7,16 @@
 // @ts-nocheck
 
 import type {Feature, FeatureCollection} from '@loaders.gl/schema';
-import type {GeoJSONTileFeature} from './tile';
+import type {TableTileFeature} from './tile';
 
 import {simplify} from './simplify';
 import {createFeature} from './feature';
 
-// converts GeoJSON feature into an intermediate projected JSON vector format with simplification data
-
-export function convert(data: Feature | FeatureCollection, options): GeoJSONTileFeature[] {
+/**
+ * converts a GeoJSON feature into an intermediate projected JSON vector format
+ * with simplification data
+ */
+export function convert(data: Feature | FeatureCollection, options): TableTileFeature[] {
   const features = [];
   if (data.type === 'FeatureCollection') {
     for (let i = 0; i < data.features.length; i++) {
@@ -31,14 +33,22 @@ export function convert(data: Feature | FeatureCollection, options): GeoJSONTile
 }
 
 export type ConvertFeatureOptions = {
+  /** max zoom to preserve detail on */
   maxZoom?: number;
-  tolerance: number;
-  extent: number;
-  lineMetrics: boolean;
+  /** simplification tolerance (higher means simpler) */
+  tolerance?: number;
+  /** tile extent */
+  extent?: number;
+  /** whether to calculate line metrics */
+  lineMetrics?: boolean;
 };
 
+/**
+ * converts a GeoJSON feature into an intermediate projected JSON vector format
+ * with simplification data
+ */
 function convertFeature(
-  features: GeoJSONTileFeature[],
+  features: TableTileFeature[],
   geojson: Feature,
   options: ConvertFeatureOptions,
   index: number

package/src/lib/{geojsonvt → vector-tiler}/feature.ts

@@ -3,10 +3,10 @@
 // Copyright (c) vis.gl contributors
 // Forked from https://github.com/mapbox/geojson-vt under compatible ISC license
 
-import {GeoJSONTileFeature} from './tile';
+import {TableTileFeature} from './tile';
 
-export function createFeature(id, type, geom, tags): GeoJSONTileFeature {
-  const feature: GeoJSONTileFeature = {
+export function createFeature(id, type, geom, tags): TableTileFeature {
+  const feature: TableTileFeature = {
     // eslint-disable-next-line
     id: id == null ? null : id,
     type,

package/src/lib/{geojsonvt → vector-tiler}/tile.ts

@@ -5,7 +5,7 @@
 
 // import type {Feature} from '@loaders.gl/schema';
 
-export type GeoJSONTileFeature = {
+export type TableTileFeature = {
   type: any;
   geometry: any;
 
@@ -20,8 +20,8 @@ export type GeoJSONTileFeature = {
   maxY: number;
 };
 
-export type GeoJSONTile = {
-  features: GeoJSONTileFeature[]; // Feature[]; Doesn't seem JSON compatible??
+export type TableTile = {
+  features: TableTileFeature[]; // Feature[]; Doesn't seem JSON compatible??
   type?: number;
   tags?: Record<string, string>;
 
@@ -53,9 +53,9 @@ export type CreateTileOptions = {
 /**
  * Create a tile from features and tile index
  */
-export function createTile(features: any[], z, tx, ty, options: CreateTileOptions): GeoJSONTile {
+export function createTile(features: any[], z, tx, ty, options: CreateTileOptions): TableTile {
   const tolerance = z === options.maxZoom ? 0 : options.tolerance / ((1 << z) * options.extent);
-  const tile: GeoJSONTile = {
+  const tile: TableTile = {
     features: [],
     numPoints: 0,
     numSimplified: 0,
@@ -77,7 +77,7 @@ export function createTile(features: any[], z, tx, ty, options: CreateTileOption
 }
 
 // eslint-disable-next-line complexity, max-statements
-function addFeature(tile: GeoJSONTile, feature, tolerance: number, options: CreateTileOptions) {
+function addFeature(tile: TableTile, feature, tolerance: number, options: CreateTileOptions) {
   const geom = feature.geometry;
   const type = feature.type;
   const simplified: number[] = [];
@@ -121,7 +121,7 @@ function addFeature(tile: GeoJSONTile, feature, tolerance: number, options: Crea
     }
 
     // @ts-expect-error TODO - create sub type?
-    const tileFeature: GeoJSONTileFeature = {
+    const tileFeature: TableTileFeature = {
       geometry: simplified,
       type:
         type === 'Polygon' || type === 'MultiPolygon'
@@ -142,7 +142,7 @@ function addFeature(tile: GeoJSONTile, feature, tolerance: number, options: Crea
 function addLine(
   result,
   geom,
-  tile: GeoJSONTile,
+  tile: TableTile,
   tolerance: number,
   isPolygon: boolean,
   isOuter: boolean

package/src/lib/{geojsonvt → vector-tiler}/transform.ts

@@ -3,13 +3,13 @@
 // Copyright (c) vis.gl contributors
 // Forked from https://github.com/mapbox/geojson-vt under compatible ISC license
 
-import type {GeoJSONTile} from './tile';
+import type {TableTile} from './tile';
 
 /**
  * Transforms the coordinates of each feature in the given tile from
  * mercator-projected space into (extent x extent) tile space.
  */
-export function transformTile(tile: GeoJSONTile, extent: number): GeoJSONTile {
+export function transformTile(tile: TableTile, extent: number): TableTile {
   if (tile.transformed) {
     return tile;
   }

package/src/lib/{geojsonvt → vector-tiler}/wrap.ts

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 // Forked from https://github.com/mapbox/geojson-vt under compatible ISC license
 
-import type {GeoJSONTileFeature} from './tile';
+import type {TableTileFeature} from './tile';
 import {clip} from './clip';
 import {createFeature} from './feature';
 
@@ -22,9 +22,9 @@ export type WrapOptions = {
  * @param options buffer and extent
  * @returns
  */
-export function wrap(features: GeoJSONTileFeature[], options: WrapOptions) {
+export function wrap(features: TableTileFeature[], options: WrapOptions) {
   const buffer = options.buffer / options.extent;
-  let merged: GeoJSONTileFeature[] = features;
+  let merged: TableTileFeature[] = features;
   const left = clip(features, 1, -1 - buffer, buffer, 0, -1, 2, options); // left world copy
   const right = clip(features, 1, 1 - buffer, 2 + buffer, 0, -1, 2, options); // right world copy
 
@@ -48,8 +48,8 @@ export function wrap(features: GeoJSONTileFeature[], options: WrapOptions) {
  * @param offset
  * @returns
  */
-function shiftFeatureCoords(features: GeoJSONTileFeature[], offset: number): GeoJSONTileFeature[] {
-  const newFeatures: GeoJSONTileFeature[] = [];
+function shiftFeatureCoords(features: TableTileFeature[], offset: number): TableTileFeature[] {
+  const newFeatures: TableTileFeature[] = [];
 
   for (let i = 0; i < features.length; i++) {
     const feature = features[i];

package/src/mvt-source.ts

@@ -2,8 +2,9 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {GetTileParameters, ImageType, DataSourceProps} from '@loaders.gl/loader-utils';
+import type {ImageType, DataSourceProps} from '@loaders.gl/loader-utils';
 import type {ImageTileSource, VectorTileSource} from '@loaders.gl/loader-utils';
+import type {GetTileParameters, GetTileDataParameters} from '@loaders.gl/loader-utils';
 import {DataSource, resolvePath} from '@loaders.gl/loader-utils';
 import {ImageLoader, ImageLoaderOptions, getBinaryImageMetadata} from '@loaders.gl/images';
 import {
@@ -14,8 +15,6 @@ import {
   TileJSONLoaderOptions
 } from '@loaders.gl/mvt';
 
-import {TileLoadParameters} from '@loaders.gl/loader-utils';
-
 /** Properties for a Mapbox Vector Tile Source */
 export type MVTSourceProps = DataSourceProps & {
   /** Root url of tileset */
@@ -101,8 +100,8 @@ export class MVTSource extends DataSource implements ImageTileSource, VectorTile
     return this.mimeType;
   }
 
-  async getTile(tileParams: GetTileParameters): Promise<ArrayBuffer | null> {
-    const {x, y, z} = tileParams;
+  async getTile(parameters: GetTileParameters): Promise<ArrayBuffer | null> {
+    const {x, y, z} = parameters;
     const tileUrl = this.getTileURL(x, y, z);
     const response = await this.fetch(tileUrl);
     if (!response.ok) {
@@ -115,8 +114,8 @@ export class MVTSource extends DataSource implements ImageTileSource, VectorTile
   // Tile Source interface implementation: deck.gl compatible API
   // TODO - currently only handles image tiles, not vector tiles
 
-  async getTileData(tileParams: TileLoadParameters): Promise<unknown | null> {
-    const {x, y, z} = tileParams.index;
+  async getTileData(parameters: GetTileDataParameters): Promise<any> {
+    const {x, y, z} = parameters.index;
     // const metadata = await this.metadata;
     // mimeType = metadata?.tileMIMEType || 'application/vnd.mapbox-vector-tile';