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

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-source.ts

@@ -2,8 +2,10 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {GetTileParameters, ImageType, DataSourceProps} from '@loaders.gl/loader-utils';
+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';
 import {DataSource, resolvePath} from '@loaders.gl/loader-utils';
 import {ImageLoader, ImageLoaderOptions, getBinaryImageMetadata} from '@loaders.gl/images';
 import {
@@ -14,20 +16,42 @@ import {
   TileJSONLoaderOptions
 } from '@loaders.gl/mvt';
 
-import {TileLoadParameters} from '@loaders.gl/loader-utils';
+/** 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;
+  };
 };
 
 /**
@@ -37,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;
@@ -47,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);
@@ -101,8 +124,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 +138,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';