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

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/clip.ts → vector-tiler/features/clip-features.ts}

@@ -3,8 +3,8 @@
 // Copyright (c) vis.gl contributors
 // Forked from https://github.com/mapbox/geojson-vt under compatible ISC license
 
-import type {GeoJSONTileFeature} from './tile';
-import {createFeature} from './feature';
+import type {ProtoFeature} from './proto-feature';
+import {createProtoFeature} from './proto-feature';
 
 /* eslint-disable no-continue */
 
@@ -20,8 +20,8 @@ import {createFeature} from './feature';
  * @param minAll and maxAll: minimum and maximum coordinate value for all features
  */
 // eslint-disable-next-line max-params, complexity, max-statements
-export function clip(
-  features: GeoJSONTileFeature[],
+export function clipFeatures(
+  features: ProtoFeature[],
   scale: number,
   k1: number,
   k2: number,
@@ -29,7 +29,7 @@ export function clip(
   minAll: number,
   maxAll: number,
   options: {lineMetrics: boolean}
-): GeoJSONTileFeature[] | null {
+): ProtoFeature[] | null {
   k1 /= scale;
   k2 /= scale;
 
@@ -41,7 +41,7 @@ export function clip(
     return null; // trivial reject
   }
 
-  const clipped: GeoJSONTileFeature[] = [];
+  const clipped: ProtoFeature[] = [];
 
   for (const feature of features) {
     const geometry = feature.geometry;
@@ -82,7 +82,7 @@ export function clip(
     if (newGeometry.length) {
       if (options.lineMetrics && type === 'LineString') {
         for (const line of newGeometry) {
-          clipped.push(createFeature(feature.id, type, line, feature.tags));
+          clipped.push(createProtoFeature(feature.id, type, line, feature.tags));
         }
         continue;
       }
@@ -100,7 +100,7 @@ export function clip(
         type = newGeometry.length === 3 ? 'Point' : 'MultiPoint';
       }
 
-      clipped.push(createFeature(feature.id, type, newGeometry, feature.tags));
+      clipped.push(createProtoFeature(feature.id, type, newGeometry, feature.tags));
     }
   }
 

package/src/lib/vector-tiler/features/convert-feature.ts

@@ -0,0 +1,191 @@
+// loaders.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+// Forked from https://github.com/mapbox/geojson-vt under compatible ISC license
+
+/* eslint-disable */
+// @ts-nocheck
+
+import type {Feature, FeatureCollection} from '@loaders.gl/schema';
+import type {ProtoFeature} from './proto-feature';
+
+import {createProtoFeature} from './proto-feature';
+import {simplifyPath} from './simplify-path';
+
+export type ConvertFeatureOptions = {
+  /** max zoom to preserve detail on */
+  maxZoom?: number;
+  /** 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
+ */
+export function convertFeaturesToProtoFeature(
+  data: Feature | FeatureCollection,
+  options: ConvertFeatureOptions
+): ProtoFeature[] {
+  const protoFeatures = [];
+  switch (data.type) {
+    case 'FeatureCollection':
+      let i = 0;
+      for (const feature of data.features) {
+        protoFeatures.push(convertFeature(feature, options, i++));
+      }
+      break;
+    case 'Feature':
+      protoFeatures.push(convertFeature(data, options));
+      break;
+    default:
+      // single geometry or a geometry collection
+      protoFeatures.push(convertFeature({geometry: data}, options));
+  }
+
+  return protoFeatures;
+}
+
+/**
+ * converts a GeoJSON feature into an intermediate projected JSON vector format
+ * with simplification data
+ */
+function convertFeature(
+  geojson: Feature,
+  options: ConvertFeatureOptions,
+  index: number
+): ProtoFeature {
+  // GeoJSON geometries can be null, but no vector tile will include them.
+  if (!geojson.geometry) {
+    return;
+  }
+
+  const coords = geojson.geometry.coordinates;
+  const type = geojson.geometry.type;
+  const tolerance = Math.pow(options.tolerance / ((1 << options.maxZoom) * options.extent), 2);
+  let geometry = [];
+  let id = geojson.id;
+  if (options.promoteId) {
+    id = geojson.properties[options.promoteId];
+  } else if (options.generateId) {
+    id = index || 0;
+  }
+
+  switch (type) {
+    case 'Point':
+      convertPoint(coords, geometry);
+      break;
+
+    case 'MultiPoint':
+      for (const p of coords) {
+        convertPoint(p, geometry);
+      }
+      break;
+
+    case 'LineString':
+      convertLine(coords, geometry, tolerance, false);
+      break;
+
+    case 'MultiLineString':
+      if (options.lineMetrics) {
+        // explode into linestrings to be able to track metrics
+        for (const line of coords) {
+          geometry = [];
+          convertLine(line, geometry, tolerance, false);
+          features.push(createProtoFeature(id, 'LineString', geometry, geojson.properties));
+        }
+        return;
+        convertLines(coords, geometry, tolerance, false);
+      }
+      break;
+
+    case 'Polygon':
+      convertLines(coords, geometry, tolerance, true);
+      break;
+
+    case 'MultiPolygon':
+      for (const polygon of coords) {
+        const newPolygon = [];
+        convertLines(polygon, newPolygon, tolerance, true);
+        geometry.push(newPolygon);
+      }
+      break;
+
+    case 'GeometryCollection':
+      for (const singleGeometry of geojson.geometry.geometries) {
+        convertFeature(
+          features,
+          {
+            id,
+            geometry: singleGeometry,
+            properties: geojson.properties
+          },
+          options,
+          index
+        );
+      }
+      break;
+
+    default:
+      throw new Error('Input data is not a valid GeoJSON object.');
+  }
+
+  return createProtoFeature(id, type, geometry, geojson.properties);
+}
+
+function convertPoint(coords, out): void {
+  out.push(projectX(coords[0]), projectY(coords[1]), 0);
+}
+
+function convertLine(ring: number[], out, tolerance: number, isPolygon: boolean): void {
+  let x0, y0;
+  let size = 0;
+
+  for (let j = 0; j < ring.length; j++) {
+    const x = projectX(ring[j][0]);
+    const y = projectY(ring[j][1]);
+
+    out.push(x, y, 0);
+
+    if (j > 0) {
+      if (isPolygon) {
+        size += (x0 * y - x * y0) / 2; // area
+      } else {
+        size += Math.sqrt(Math.pow(x - x0, 2) + Math.pow(y - y0, 2)); // length
+      }
+    }
+    x0 = x;
+    y0 = y;
+  }
+
+  const last = out.length - 3;
+  out[2] = 1;
+  simplifyPath(out, 0, last, tolerance);
+  out[last + 2] = 1;
+
+  out.size = Math.abs(size);
+  out.start = 0;
+  out.end = out.size;
+}
+
+function convertLines(rings: number[][], out, tolerance: number, isPolygon: boolean): void {
+  for (let i = 0; i < rings.length; i++) {
+    const geom = [];
+    convertLine(rings[i], geom, tolerance, isPolygon);
+    out.push(geom);
+  }
+}
+
+function projectX(x: number): number {
+  return x / 360 + 0.5;
+}
+
+function projectY(y: number): number {
+  const sin = Math.sin((y * Math.PI) / 180);
+  const y2 = 0.5 - (0.25 * Math.log((1 + sin) / (1 - sin))) / Math.PI;
+  return y2 < 0 ? 0 : y2 > 1 ? 1 : y2;
+}

package/src/lib/vector-tiler/features/proto-feature.ts

@@ -0,0 +1,104 @@
+// loaders.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+// Forked from https://github.com/mapbox/geojson-vt under compatible ISC license
+
+export type ProtoFeature = {
+  type: 'Point' | 'MultiPoint' | 'LineString' | 'MultiLineString' | 'Polygon' | 'MultiPolygon';
+  simplifiedType: 1 | 2 | 3;
+  geometry: any[];
+
+  // book keeping
+  id?: string;
+  tags?: Record<string, unknown>;
+
+  /** spatial extents */
+  minX: number;
+  /** spatial extents */
+  maxX: number;
+  /** spatial extents */
+  minY: number;
+  /** spatial extents */
+  maxY: number;
+};
+
+export type GeoJSONTileGeometry =
+  | GeoJSONTilePointGeometry
+  | GeoJSONTileLineGeometry
+  | GeoJSONTilePolygonGeometry;
+
+export type GeoJSONTilePointGeometry = {
+  simplifiedType: 1;
+  geometry: number[];
+};
+
+export type GeoJSONTileLineGeometry = {
+  simplifiedType: 1;
+  geometry: number[][];
+};
+
+export type GeoJSONTilePolygonGeometry = {
+  simplifiedType: 1;
+  geometry: number[][][];
+};
+
+export function createProtoFeature(
+  id: any,
+  type: 'Point' | 'MultiPoint' | 'LineString' | 'MultiLineString' | 'Polygon' | 'MultiPolygon',
+  geometry: any[],
+  tags
+): ProtoFeature {
+  const feature: ProtoFeature = {
+    // eslint-disable-next-line
+    id: id == null ? null : id,
+    type,
+    simplifiedType: undefined!, // TODO
+    geometry,
+    tags,
+    minX: Infinity,
+    minY: Infinity,
+    maxX: -Infinity,
+    maxY: -Infinity
+  };
+
+  // TODO break out into separate function
+  switch (type) {
+    case 'Point':
+    case 'MultiPoint':
+    case 'LineString':
+      calcLineBBox(feature, geometry);
+      break;
+
+    case 'MultiLineString':
+      for (const line of geometry) {
+        calcLineBBox(feature, line);
+      }
+      break;
+
+    case 'Polygon':
+      // the outer ring (ie [0]) contains all inner rings
+      calcLineBBox(feature, geometry[0]);
+      break;
+
+    case 'MultiPolygon':
+      for (const polygon of geometry) {
+        // the outer ring (ie [0]) contains all inner rings
+        calcLineBBox(feature, polygon[0]);
+      }
+      break;
+
+    default:
+      throw new Error(String(type));
+  }
+
+  return feature;
+}
+
+function calcLineBBox(feature, geometry) {
+  for (let i = 0; i < geometry.length; i += 3) {
+    feature.minX = Math.min(feature.minX, geometry[i]);
+    feature.minY = Math.min(feature.minY, geometry[i + 1]);
+    feature.maxX = Math.max(feature.maxX, geometry[i]);
+    feature.maxY = Math.max(feature.maxY, geometry[i + 1]);
+  }
+}

package/src/lib/{geojsonvt/simplify.ts → vector-tiler/features/simplify-path.ts}

@@ -11,7 +11,12 @@
  * @param last last coord to simplify
  * @param sqTolerance tolerance (square distance)
  */
-export function simplify(coords: number[], first: number, last: number, sqTolerance: number): void {
+export function simplifyPath(
+  coords: number[],
+  first: number,
+  last: number,
+  sqTolerance: number
+): void {
   let maxSqDist = sqTolerance;
   const mid = (last - first) >> 1;
   let minPosToMid = last - first;
@@ -41,9 +46,9 @@ export function simplify(coords: number[], first: number, last: number, sqTolera
   }
 
   if (maxSqDist > sqTolerance) {
-    if (index - first > 3) simplify(coords, first, index, sqTolerance);
+    if (index - first > 3) simplifyPath(coords, first, index, sqTolerance);
     coords[index + 2] = maxSqDist;
-    if (last - index > 3) simplify(coords, index, last, sqTolerance);
+    if (last - index > 3) simplifyPath(coords, index, last, sqTolerance);
   }
 }
 

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

@@ -3,14 +3,14 @@
 // Copyright (c) vis.gl contributors
 // Forked from https://github.com/mapbox/geojson-vt under compatible ISC license
 
-import type {GeoJSONTileFeature} from './tile';
-import {clip} from './clip';
-import {createFeature} from './feature';
+import type {ProtoFeature} from './proto-feature';
+import {createProtoFeature} from './proto-feature';
+import {clipFeatures} from './clip-features';
 
 /**
  * Options for wrap()
  */
-export type WrapOptions = {
+export type WrapFeaturesOptions = {
   buffer: number /** number of pixels of buffer for the tile */;
   extent: number /** extent of each tile */;
   lineMetrics: boolean;
@@ -18,18 +18,21 @@ export type WrapOptions = {
 
 /**
  * Wrap across antemeridian, by clipping into two tiles, shifting the overflowing x coordinates
- * @param features list of features to be wrapped
+ * @param list of features to be wrapped
  * @param options buffer and extent
  * @returns
  */
-export function wrap(features: GeoJSONTileFeature[], options: WrapOptions) {
+export function wrapFeatures(
+  features: ProtoFeature[],
+  options: WrapFeaturesOptions
+): ProtoFeature[] {
   const buffer = options.buffer / options.extent;
-  let merged: GeoJSONTileFeature[] = 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
+  let merged: ProtoFeature[] = features;
+  const left = clipFeatures(features, 1, -1 - buffer, buffer, 0, -1, 2, options); // left world copy
+  const right = clipFeatures(features, 1, 1 - buffer, 2 + buffer, 0, -1, 2, options); // right world copy
 
   if (left || right) {
-    merged = clip(features, 1, -buffer, 1 + buffer, 0, -1, 2, options) || []; // center world copy
+    merged = clipFeatures(features, 1, -buffer, 1 + buffer, 0, -1, 2, options) || []; // center world copy
 
     if (left) {
       merged = shiftFeatureCoords(left, 1).concat(merged); // merge left into center
@@ -48,8 +51,8 @@ export function wrap(features: GeoJSONTileFeature[], options: WrapOptions) {
  * @param offset
  * @returns
  */
-function shiftFeatureCoords(features: GeoJSONTileFeature[], offset: number): GeoJSONTileFeature[] {
-  const newFeatures: GeoJSONTileFeature[] = [];
+function shiftFeatureCoords(features: ProtoFeature[], offset: number): ProtoFeature[] {
+  const newFeatures: ProtoFeature[] = [];
 
   for (let i = 0; i < features.length; i++) {
     const feature = features[i];
@@ -57,26 +60,38 @@ function shiftFeatureCoords(features: GeoJSONTileFeature[], offset: number): Geo
 
     let newGeometry;
 
-    if (type === 'Point' || type === 'MultiPoint' || type === 'LineString') {
-      newGeometry = shiftCoords(feature.geometry, offset);
-    } else if (type === 'MultiLineString' || type === 'Polygon') {
-      newGeometry = [];
-      for (const line of feature.geometry) {
-        newGeometry.push(shiftCoords(line, offset));
-      }
-    } else if (type === 'MultiPolygon') {
-      newGeometry = [];
-      for (const polygon of feature.geometry) {
-        const newPolygon: Points = [];
-        for (const line of polygon) {
-          // @ts-expect-error TODO
-          newPolygon.push(shiftCoords(line, offset));
+    switch (type) {
+      case 'Point':
+      case 'MultiPoint':
+      case 'LineString':
+        newGeometry = shiftCoords(feature.geometry, offset);
+        break;
+
+      case 'MultiLineString':
+      case 'Polygon':
+        newGeometry = [];
+        for (const line of feature.geometry) {
+          newGeometry.push(shiftCoords(line, offset));
         }
-        newGeometry.push(newPolygon);
-      }
+        break;
+
+      case 'MultiPolygon':
+        newGeometry = [];
+        for (const polygon of feature.geometry) {
+          const newPolygon: Points = [];
+          for (const line of polygon) {
+            // @ts-expect-error TODO
+            newPolygon.push(shiftCoords(line, offset));
+          }
+          newGeometry.push(newPolygon);
+        }
+        break;
+
+      default:
+        throw new Error(String(type));
     }
 
-    newFeatures.push(createFeature(feature.id, type, newGeometry, feature.tags));
+    newFeatures.push(createProtoFeature(feature.id, type, newGeometry, feature.tags));
   }
 
   return newFeatures;