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

package/src/lib/vector-tiler/{wrap.ts → 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 {TableTileFeature} 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: TableTileFeature[], options: WrapOptions) {
+export function wrapFeatures(
+  features: ProtoFeature[],
+  options: WrapFeaturesOptions
+): ProtoFeature[] {
   const buffer = options.buffer / options.extent;
-  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
+  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: TableTileFeature[], options: WrapOptions) {
  * @param offset
  * @returns
  */
-function shiftFeatureCoords(features: TableTileFeature[], offset: number): TableTileFeature[] {
-  const newFeatures: TableTileFeature[] = [];
+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: TableTileFeature[], offset: number): Table
 
     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;

package/src/lib/vector-tiler/proto-tile.ts

@@ -0,0 +1,217 @@
+// loaders.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+// Forked from https://github.com/mapbox/geojson-vt under compatible ISC license
+
+import type {ProtoFeature} from './features/proto-feature';
+
+export type ProtoTile = {
+  /** Processed features */
+  protoFeatures: ProtoFeature[];
+  /** if we slice further down, no need to keep source geometry */
+  sourceFeatures: ProtoFeature[] | null;
+
+  /** Properties */
+  tags?: Record<string, string>;
+
+  /** tile x coordinate */
+  x: number;
+  /** tile y coordinate */
+  y: number;
+  /** tile z coordinate */
+  z: number;
+
+  /** spatial extent */
+  minX: number;
+  /** spatial extent */
+  maxX: number;
+  /** spatial extent */
+  minY: number;
+  /** spatial extent */
+  maxY: number;
+
+  /** Whether this tile has been transformed */
+  transformed: boolean;
+  numPoints: number;
+  numSimplified: number;
+  /** Number of features in this tile */
+  numFeatures: number;
+};
+
+export type CreateTileOptions = {
+  maxZoom?: number;
+  tolerance: number;
+  extent: number;
+  lineMetrics: boolean;
+};
+
+/**
+ * Create a tile from features and tile index
+ */
+export function createProtoTile(
+  features: ProtoFeature[],
+  z,
+  tx,
+  ty,
+  options: CreateTileOptions
+): ProtoTile {
+  const tolerance = z === options.maxZoom ? 0 : options.tolerance / ((1 << z) * options.extent);
+  const tile: ProtoTile = {
+    protoFeatures: [],
+    sourceFeatures: null,
+    numPoints: 0,
+    numSimplified: 0,
+    numFeatures: features.length,
+    x: tx,
+    y: ty,
+    z,
+    transformed: false,
+    minX: 2,
+    minY: 1,
+    maxX: -1,
+    maxY: 0
+  };
+  for (const feature of features) {
+    addProtoFeature(tile, feature, tolerance, options);
+  }
+  return tile;
+}
+
+// eslint-disable-next-line complexity, max-statements
+function addProtoFeature(
+  tile: ProtoTile,
+  feature: ProtoFeature,
+  tolerance: number,
+  options: CreateTileOptions
+) {
+  const geometry = feature.geometry;
+  const type = feature.type;
+  const simplifiedGeometry: number[] = [];
+
+  tile.minX = Math.min(tile.minX, feature.minX);
+  tile.minY = Math.min(tile.minY, feature.minY);
+  tile.maxX = Math.max(tile.maxX, feature.maxX);
+  tile.maxY = Math.max(tile.maxY, feature.maxY);
+
+  let simplifiedType: 1 | 2 | 3;
+  switch (type) {
+    case 'Point':
+    case 'MultiPoint':
+      simplifiedType = 1;
+      for (let i = 0; i < geometry.length; i += 3) {
+        simplifiedGeometry.push(geometry[i], geometry[i + 1]);
+        tile.numPoints++;
+        tile.numSimplified++;
+      }
+      break;
+
+    case 'LineString':
+      simplifiedType = 2;
+      addProtoLine(simplifiedGeometry, geometry, tile, tolerance, false, false);
+      break;
+
+    case 'MultiLineString':
+      simplifiedType = 2;
+      for (let i = 0; i < geometry.length; i++) {
+        addProtoLine(simplifiedGeometry, geometry[i], tile, tolerance, false, i === 0);
+      }
+      break;
+
+    case 'Polygon':
+      simplifiedType = 3;
+      for (let i = 0; i < geometry.length; i++) {
+        addProtoLine(simplifiedGeometry, geometry[i], tile, tolerance, true, i === 0);
+      }
+      break;
+
+    case 'MultiPolygon':
+      simplifiedType = 3;
+      for (let k = 0; k < geometry.length; k++) {
+        const polygon = geometry[k];
+        for (let i = 0; i < polygon.length; i++) {
+          addProtoLine(simplifiedGeometry, polygon[i], tile, tolerance, true, i === 0);
+        }
+      }
+      break;
+
+    default:
+      throw new Error(`Unknown geometry type: ${type}`);
+  }
+
+  if (simplifiedGeometry.length) {
+    let tags: Record<string, unknown> | null = feature.tags || null;
+
+    if (type === 'LineString' && options.lineMetrics) {
+      tags = {};
+      for (const key in feature.tags) {
+        tags[key] = feature.tags[key];
+      }
+      // @ts-expect-error adding fields to arrays
+      // eslint-disable-next-line camelcase
+      tags.mapbox_clip_start = geometry.start / geometry.size;
+      // @ts-expect-error adding fields to arrays
+      // eslint-disable-next-line camelcase
+      tags.mapbox_clip_end = geometry.end / geometry.size;
+    }
+
+    const tileFeature: ProtoFeature = {
+      geometry: simplifiedGeometry,
+      simplifiedType,
+      // @ts-expect-error
+      tags
+    };
+    if (feature.id !== null) {
+      tileFeature.id = feature.id;
+    }
+
+    tile.protoFeatures.push(tileFeature);
+  }
+}
+
+// eslint-disable-next-line max-params, max-statements
+function addProtoLine(
+  result: any[],
+  geometry: any,
+  tile: ProtoTile,
+  tolerance: number,
+  isPolygon: boolean,
+  isOuter: boolean
+): void {
+  const sqTolerance = tolerance * tolerance;
+
+  if (tolerance > 0 && geometry.size < (isPolygon ? sqTolerance : tolerance)) {
+    tile.numPoints += geometry.length / 3;
+    return;
+  }
+
+  const ring: number[] = [];
+
+  for (let i = 0; i < geometry.length; i += 3) {
+    if (tolerance === 0 || geometry[i + 2] > sqTolerance) {
+      tile.numSimplified++;
+      ring.push(geometry[i], geometry[i + 1]);
+    }
+    tile.numPoints++;
+  }
+
+  if (isPolygon) rewind(ring, isOuter);
+
+  result.push(ring);
+}
+
+function rewind(ring: number[], clockwise?: boolean): void {
+  let area = 0;
+  for (let i = 0, j = ring.length - 2; i < ring.length; j = i, i += 2) {
+    area += (ring[i] - ring[j]) * (ring[i + 1] + ring[j + 1]);
+  }
+  if (area > 0 === clockwise) {
+    for (let i = 0, len = ring.length; i < len / 2; i += 2) {
+      const x = ring[i];
+      const y = ring[i + 1];
+      ring[i] = ring[len - 2 - i];
+      ring[i + 1] = ring[len - 1 - i];
+      ring[len - 2 - i] = x;
+      ring[len - 1 - i] = y;
+    }
+  }
+}

package/src/lib/vector-tiler/tile-to-geojson.ts

@@ -0,0 +1,105 @@
+// loaders.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+// Forked from https://github.com/mapbox/geojson-vt under compatible ISC license
+
+import {ProtoTile} from './proto-tile';
+import {Feature, GeoJSONTable} from '@loaders.gl/schema';
+
+import {projectToLngLat} from '../utils/geometry-utils';
+import {convertToLocalCoordinates} from '../utils/geometry-utils';
+
+// eslint-disable-next-line max-statements, complexity
+export function convertTileToGeoJSON(
+  protoTile: ProtoTile,
+  props: {
+    coordinates: 'EPSG:4326' | 'wgs84' | 'local';
+    tileIndex: {x: number; y: number; z: number};
+    extent: number;
+  }
+): GeoJSONTable | null {
+  const features: Feature[] = [];
+  for (const rawFeature of protoTile.protoFeatures) {
+    if (!rawFeature || !rawFeature.geometry) {
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+
+    let type:
+      | 'Point'
+      | 'MultiPoint'
+      | 'LineString'
+      | 'MultiLineString'
+      | 'Polygon'
+      | 'MultiPolygon';
+
+    let coordinates: any;
+
+    // raw geometry
+    switch (rawFeature.simplifiedType) {
+      case 1:
+        if (rawFeature.geometry.length === 1) {
+          type = 'Point';
+          coordinates = rawFeature.geometry[0];
+        } else {
+          type = 'MultiPoint';
+          coordinates = rawFeature.geometry;
+        }
+        break;
+      case 2:
+        if (rawFeature.geometry.length === 1) {
+          type = 'LineString';
+          coordinates = rawFeature.geometry[0];
+        } else {
+          type = 'MultiLineString';
+          coordinates = rawFeature.geometry;
+        }
+        break;
+      case 3:
+        if (rawFeature.geometry.length > 1) {
+          type = 'MultiPolygon';
+          coordinates = [rawFeature.geometry];
+        } else {
+          type = 'Polygon';
+          coordinates = rawFeature.geometry;
+        }
+        break;
+      default:
+        throw new Error(`${rawFeature.simplifiedType}is not a valid simplified type`);
+    }
+
+    switch (props.coordinates) {
+      case 'EPSG:4326':
+      case 'wgs84':
+        projectToLngLat(coordinates, props.tileIndex, props.extent);
+        break;
+      default:
+        convertToLocalCoordinates(coordinates, props.extent);
+        break;
+    }
+
+    const feature: Feature = {
+      type: 'Feature',
+      geometry: {
+        type,
+        coordinates
+      },
+      properties: rawFeature.tags || {},
+      id: rawFeature.id
+    };
+
+    features.push(feature);
+  }
+
+  if (features.length === 0) {
+    return null;
+  }
+
+  const table: GeoJSONTable = {
+    shape: 'geojson-table',
+    type: 'FeatureCollection',
+    features
+  };
+
+  return table;
+}

package/src/lib/vector-tiler/transform-tile.ts

@@ -0,0 +1,57 @@
+// loaders.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+// Forked from https://github.com/mapbox/geojson-vt under compatible ISC license
+
+import type {ProtoTile} from './proto-tile';
+
+/**
+ * Transforms the coordinates of each protoFeature in the given protoTile from
+ * mercator-projected space into (extent x extent) protoTile space.
+ */
+export function transformTile(protoTile: ProtoTile, extent: number): ProtoTile {
+  if (protoTile.transformed) {
+    return protoTile;
+  }
+
+  const z2 = 1 << protoTile.z;
+  const tx = protoTile.x;
+  const ty = protoTile.y;
+
+  for (const protoFeature of protoTile.protoFeatures) {
+    const geom = protoFeature.geometry;
+    const simplifiedType = protoFeature.simplifiedType;
+
+    protoFeature.geometry = [];
+
+    if (simplifiedType === 1) {
+      for (let j = 0; j < geom.length; j += 2) {
+        protoFeature.geometry.push(transformPoint(geom[j], geom[j + 1], extent, z2, tx, ty));
+      }
+    } else {
+      for (let j = 0; j < geom.length; j++) {
+        const ring: number[][] = [];
+        for (let k = 0; k < geom[j].length; k += 2) {
+          ring.push(transformPoint(geom[j][k], geom[j][k + 1], extent, z2, tx, ty));
+        }
+        protoFeature.geometry.push(ring);
+      }
+    }
+  }
+
+  protoTile.transformed = true;
+
+  return protoTile;
+}
+
+// eslint-disable-next-line max-params
+function transformPoint(
+  x: number,
+  y: number,
+  extent: number,
+  z2: number,
+  tx: number,
+  ty: number
+): number[] {
+  return [Math.round(extent * (x * z2 - tx)), Math.round(extent * (y * z2 - ty))];
+}

package/src/mvt-loader.ts

@@ -26,6 +26,8 @@ export type MVTLoaderOptions = LoaderOptions & {
     workerUrl?: string;
   };
   gis?: {
+    /** @deprecated Use options.mvt.shape === 'binary-geometry' */
+    binary?: boolean;
     /** @deprecated. Use options.mvt.shape */
     format?: 'geojson-table' | 'columnar-table' | 'geojson' | 'binary' | 'binary-geometry';
   };

package/src/mvt-source.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+import type {Source} 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';
@@ -15,18 +16,42 @@ import {
   TileJSONLoaderOptions
 } from '@loaders.gl/mvt';
 
+/** Creates an MVTTileSource */
+export const MVTSource = {
+  name: 'MVT',
+  id: 'mvt',
+  module: 'mvt',
+  version: '0.0.0',
+  extensions: ['mvt'],
+  mimeTypes: ['application/octet-stream'],
+  options: {
+    mvt: {
+      // TODO - add options here
+    }
+  },
+  type: 'mvt',
+  fromUrl: true,
+  fromBlob: false,
+
+  testURL: (url: string): boolean => true,
+  createDataSource(url: string, props: MVTTileSourceProps): MVTTileSource {
+    return new MVTTileSource(url, props);
+  }
+} as const satisfies Source<MVTTileSource, MVTTileSourceProps>;
+
 /** Properties for a Mapbox Vector Tile Source */
-export type MVTSourceProps = DataSourceProps & {
-  /** Root url of tileset */
-  url: string;
-  /** if not supplied, loads tilejson.json, If null does not load metadata */
-  metadataUrl?: string | null;
-  /** Override extension (necessary if no metadata) */
-  extension?: string;
-  /** Additional attribution, adds to any attribution loaded from tileset metadata */
-  attributions?: string[];
-  /** Specify load options for all sub loaders */
-  loadOptions?: TileJSONLoaderOptions & MVTLoaderOptions & ImageLoaderOptions;
+export type MVTTileSourceProps = DataSourceProps & {
+  mvt?: {
+    // TODO - add options here
+    /** if not supplied, loads tilejson.json, If null does not load metadata */
+    metadataUrl?: string | null;
+    /** Override extension (necessary if no metadata) */
+    extension?: string;
+    /** Additional attribution, adds to any attribution loaded from tileset metadata */
+    attributions?: string[];
+    /** Specify load options for all sub loaders */
+    loadOptions?: TileJSONLoaderOptions & MVTLoaderOptions & ImageLoaderOptions;
+  };
 };
 
 /**
@@ -36,8 +61,8 @@ export type MVTSourceProps = DataSourceProps & {
  * A PMTiles data source
  * @note Can be either a raster or vector tile source depending on the contents of the PMTiles file.
  */
-export class MVTSource extends DataSource implements ImageTileSource, VectorTileSource {
-  readonly props: MVTSourceProps;
+export class MVTTileSource extends DataSource implements ImageTileSource, VectorTileSource {
+  readonly props: MVTTileSourceProps;
   readonly url: string;
   readonly metadataUrl: string | null = null;
   data: string;
@@ -46,13 +71,12 @@ export class MVTSource extends DataSource implements ImageTileSource, VectorTile
   extension: string;
   mimeType: string | null = null;
 
-  constructor(props: MVTSourceProps) {
+  constructor(url: string, props: MVTTileSourceProps) {
     super(props);
     this.props = props;
-    this.url = resolvePath(props.url);
-    this.metadataUrl =
-      props.metadataUrl === undefined ? `${this.url}/tilejson.json` : props.metadataUrl;
-    this.extension = props.extension || '.png';
+    this.url = resolvePath(url);
+    this.metadataUrl = props.mvt?.metadataUrl || `${this.url}/tilejson.json`;
+    this.extension = props.mvt?.extension || '.png';
     this.data = this.url;
 
     this.getTileData = this.getTileData.bind(this);