@mapwhit/tilerenderer 0.47.1

package/src/source/image_source.js

@@ -0,0 +1,213 @@
+const { getCoordinatesCenter } = require('../util/util');
+
+const { CanonicalTileID } = require('./tile_id');
+const LngLat = require('../geo/lng_lat');
+const Point = require('@mapbox/point-geometry');
+const { Event, ErrorEvent, Evented } = require('../util/evented');
+const loadImage = require('../util/loader/image');
+const EXTENT = require('../data/extent');
+const { RasterBoundsArray } = require('../data/array_types');
+const rasterBoundsAttributes = require('../data/raster_bounds_attributes');
+const SegmentVector = require('../data/segment');
+const Texture = require('../render/texture');
+
+/**
+ * A data source containing an image.
+ * (See the [Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#sources-image) for detailed documentation of options.)
+ *
+ * @example
+ * // add to map
+ * map.addSource('some id', {
+ *    type: 'image',
+ *    url: 'https://www.mapbox.com/images/foo.png',
+ *    coordinates: [
+ *        [-76.54, 39.18],
+ *        [-76.52, 39.18],
+ *        [-76.52, 39.17],
+ *        [-76.54, 39.17]
+ *    ]
+ * });
+ *
+ * // update
+ * var mySource = map.getSource('some id');
+ * mySource.setCoordinates([
+ *     [-76.54335737228394, 39.18579907229748],
+ *     [-76.52803659439087, 39.1838364847587],
+ *     [-76.5295386314392, 39.17683392507606],
+ *     [-76.54520273208618, 39.17876344106642]
+ * ]);
+ *
+ * map.removeSource('some id');  // remove
+ * @see [Add an image](https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/)
+ */
+class ImageSource extends Evented {
+  /**
+   * @private
+   */
+  constructor(id, options, dispatcher, eventedParent) {
+    super();
+    this.id = id;
+    this.dispatcher = dispatcher;
+    this.coordinates = options.coordinates;
+
+    this.type = 'image';
+    this.minzoom = 0;
+    this.maxzoom = 22;
+    this.tileSize = 512;
+    this.tiles = {};
+
+    this.setEventedParent(eventedParent);
+
+    this.options = options;
+  }
+
+  load() {
+    this.fire(new Event('dataloading', { dataType: 'source' }));
+
+    this.url = this.options.url;
+
+    loadImage(this.url, (err, image) => {
+      if (err) {
+        this.fire(new ErrorEvent(err));
+      } else if (image) {
+        this.image = image;
+        this._finishLoading();
+      }
+    });
+  }
+
+  _finishLoading() {
+    if (this.map) {
+      this.setCoordinates(this.coordinates);
+      this.fire(new Event('data', { dataType: 'source', sourceDataType: 'metadata' }));
+    }
+  }
+
+  onAdd(map) {
+    this.map = map;
+    this.load();
+  }
+
+  /**
+   * Sets the image's coordinates and re-renders the map.
+   *
+   * @param {Array<Array<number>>} coordinates Four geographical coordinates,
+   *   represented as arrays of longitude and latitude numbers, which define the corners of the image.
+   *   The coordinates start at the top left corner of the image and proceed in clockwise order.
+   *   They do not have to represent a rectangle.
+   * @returns {ImageSource} this
+   */
+  setCoordinates(coordinates) {
+    this.coordinates = coordinates;
+
+    // Calculate which mercator tile is suitable for rendering the video in
+    // and create a buffer with the corner coordinates. These coordinates
+    // may be outside the tile, because raster tiles aren't clipped when rendering.
+
+    const map = this.map;
+
+    // transform the geo coordinates into (zoom 0) tile space coordinates
+    const cornerZ0Coords = coordinates.map(coord => {
+      return map.transform.locationCoordinate(LngLat.convert(coord)).zoomTo(0);
+    });
+
+    // Compute the coordinates of the tile we'll use to hold this image's
+    // render data
+    const centerCoord = (this.centerCoord = getCoordinatesCenter(cornerZ0Coords));
+    // `column` and `row` may be fractional; round them down so that they
+    // represent integer tile coordinates
+    centerCoord.column = Math.floor(centerCoord.column);
+    centerCoord.row = Math.floor(centerCoord.row);
+    this.tileID = new CanonicalTileID(centerCoord.zoom, centerCoord.column, centerCoord.row);
+
+    // Constrain min/max zoom to our tile's zoom level in order to force
+    // SourceCache to request this tile (no matter what the map's zoom
+    // level)
+    this.minzoom = this.maxzoom = centerCoord.zoom;
+
+    // Transform the corner coordinates into the coordinate space of our
+    // tile.
+    const tileCoords = cornerZ0Coords.map(coord => {
+      const zoomedCoord = coord.zoomTo(centerCoord.zoom);
+      return new Point(
+        Math.round((zoomedCoord.column - centerCoord.column) * EXTENT),
+        Math.round((zoomedCoord.row - centerCoord.row) * EXTENT)
+      );
+    });
+
+    this._boundsArray = new RasterBoundsArray();
+    this._boundsArray.emplaceBack(tileCoords[0].x, tileCoords[0].y, 0, 0);
+    this._boundsArray.emplaceBack(tileCoords[1].x, tileCoords[1].y, EXTENT, 0);
+    this._boundsArray.emplaceBack(tileCoords[3].x, tileCoords[3].y, 0, EXTENT);
+    this._boundsArray.emplaceBack(tileCoords[2].x, tileCoords[2].y, EXTENT, EXTENT);
+
+    if (this.boundsBuffer) {
+      this.boundsBuffer.destroy();
+      delete this.boundsBuffer;
+    }
+
+    this.fire(new Event('data', { dataType: 'source', sourceDataType: 'content' }));
+    return this;
+  }
+
+  prepare() {
+    if (Object.keys(this.tiles).length === 0 || !this.image) {
+      return;
+    }
+
+    const context = this.map.painter.context;
+    const gl = context.gl;
+
+    if (!this.boundsBuffer) {
+      this.boundsBuffer = context.createVertexBuffer(this._boundsArray, rasterBoundsAttributes.members);
+    }
+
+    if (!this.boundsSegments) {
+      this.boundsSegments = SegmentVector.simpleSegment(0, 0, 4, 2);
+    }
+
+    if (!this.texture) {
+      this.texture = new Texture(context, this.image, gl.RGBA);
+      this.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+    }
+
+    for (const w in this.tiles) {
+      const tile = this.tiles[w];
+      if (tile.state !== 'loaded') {
+        tile.state = 'loaded';
+        tile.texture = this.texture;
+      }
+    }
+  }
+
+  loadTile(tile, callback) {
+    // We have a single tile -- whoose coordinates are this.tileID -- that
+    // covers the image we want to render.  If that's the one being
+    // requested, set it up with the image; otherwise, mark the tile as
+    // `errored` to indicate that we have no data for it.
+    // If the world wraps, we may have multiple "wrapped" copies of the
+    // single tile.
+    if (this.tileID?.equals(tile.tileID.canonical)) {
+      this.tiles[String(tile.tileID.wrap)] = tile;
+      tile.buckets = {};
+      callback(null);
+    } else {
+      tile.state = 'errored';
+      callback(null);
+    }
+  }
+
+  serialize() {
+    return {
+      type: 'image',
+      url: this.options.url,
+      coordinates: this.coordinates
+    };
+  }
+
+  hasTransition() {
+    return false;
+  }
+}
+
+module.exports = ImageSource;

package/src/source/load_tilejson.js

@@ -0,0 +1,40 @@
+const { pick } = require('../util/object');
+const browser = require('../util/browser');
+
+module.exports = function (options, callback) {
+  function loaded(err, tileJSON) {
+    if (err) return callback(err);
+    if (tileJSON) {
+      const { resourceSets } = tileJSON;
+      if (resourceSets) {
+        if (!resourceSets.length) {
+          return callback('expected resources');
+        }
+        const { resources } = resourceSets[0];
+        if (!resources?.length) {
+          return callback('expected resources');
+        }
+        const { imageUrl, imageUrlSubdomains } = resources[0];
+        const result = Object.assign(
+          {
+            tiles: imageUrlSubdomains.map(sub => imageUrl.replace('{subdomain}', sub).replace('http:', 'https:'))
+          },
+          options
+        );
+        delete result.url;
+        return callback(null, result);
+      }
+      const result = pick(tileJSON, ['tiles', 'minzoom', 'maxzoom', 'attribution', 'mapbox_logo', 'bounds']);
+
+      if (tileJSON.vector_layers) {
+        result.vectorLayers = tileJSON.vector_layers;
+        result.vectorLayerIds = result.vectorLayers.map(layer => layer.id);
+      }
+
+      callback(null, result);
+    }
+  }
+
+  // expects already loaded object, `url` property is ignored
+  browser.frame(() => loaded(null, options));
+};

package/src/source/pixels_to_tile_units.js

@@ -0,0 +1,17 @@
+const EXTENT = require('../data/extent');
+
+/**
+ * Converts a pixel value at a the given zoom level to tile units.
+ *
+ * The shaders mostly calculate everything in tile units so style
+ * properties need to be converted from pixels to tile units using this.
+ *
+ * For example, a translation by 30 pixels at zoom 6.5 will be a
+ * translation by pixelsToTileUnits(30, 6.5) tile units.
+ *
+ * @returns value in tile units
+ * @private
+ */
+module.exports = function (tile, pixelValue, z) {
+  return pixelValue * (EXTENT / (tile.tileSize * 2 ** (z - tile.tileID.overscaledZ)));
+};

package/src/source/query_features.js

@@ -0,0 +1,198 @@
+const assert = require('assert');
+const { mat4 } = require('@mapbox/gl-matrix');
+
+module.exports = {
+  queryRenderedFeatures,
+  queryRenderedSymbols,
+  querySourceFeatures
+};
+
+/*
+ * Returns a matrix that can be used to convert from tile coordinates to viewport pixel coordinates.
+ */
+function getPixelPosMatrix(transform, tileID) {
+  const t = mat4.identity([]);
+  mat4.translate(t, t, [1, 1, 0]);
+  mat4.scale(t, t, [transform.width * 0.5, transform.height * 0.5, 1]);
+  return mat4.multiply(t, t, transform.calculatePosMatrix(tileID.toUnwrapped()));
+}
+
+function queryIncludes3DLayer(layers, styleLayers, sourceID) {
+  if (layers) {
+    for (const layerID of layers) {
+      const layer = styleLayers[layerID];
+      if (layer && layer.source === sourceID && layer.type === 'fill-extrusion') {
+        return true;
+      }
+    }
+  } else {
+    for (const key in styleLayers) {
+      const layer = styleLayers[key];
+      if (layer.source === sourceID && layer.type === 'fill-extrusion') {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+function queryRenderedFeatures(sourceCache, styleLayers, queryGeometry, params, transform) {
+  const has3DLayer = queryIncludes3DLayer(params?.layers, styleLayers, sourceCache.id);
+  const maxPitchScaleFactor = transform.maxPitchScaleFactor();
+  const tilesIn = sourceCache.tilesIn(queryGeometry, maxPitchScaleFactor, has3DLayer);
+
+  tilesIn.sort(sortTilesIn);
+
+  const renderedFeatureLayers = [];
+  for (const tileIn of tilesIn) {
+    renderedFeatureLayers.push({
+      wrappedTileID: tileIn.tileID.wrapped().key,
+      queryResults: tileIn.tile.queryRenderedFeatures(
+        styleLayers,
+        sourceCache._state,
+        tileIn.queryGeometry,
+        tileIn.cameraQueryGeometry,
+        tileIn.scale,
+        params,
+        transform,
+        maxPitchScaleFactor,
+        getPixelPosMatrix(sourceCache.transform, tileIn.tileID)
+      )
+    });
+  }
+
+  const result = mergeRenderedFeatureLayers(renderedFeatureLayers);
+
+  // Merge state from SourceCache into the results
+  for (const layerID in result) {
+    result[layerID].forEach(featureWrapper => {
+      const feature = featureWrapper.feature;
+      const state = sourceCache.getFeatureState(feature.layer['source-layer'], feature.id);
+      feature.source = feature.layer.source;
+      if (feature.layer['source-layer']) {
+        feature.sourceLayer = feature.layer['source-layer'];
+      }
+      feature.state = state;
+    });
+  }
+  return result;
+}
+
+function queryRenderedSymbols(styleLayers, sourceCaches, queryGeometry, params, collisionIndex, retainedQueryData) {
+  const result = {};
+  const renderedSymbols = collisionIndex.queryRenderedSymbols(queryGeometry);
+  const bucketQueryData = [];
+  for (const bucketInstanceId of Object.keys(renderedSymbols).map(Number)) {
+    bucketQueryData.push(retainedQueryData[bucketInstanceId]);
+  }
+  bucketQueryData.sort(sortTilesIn);
+
+  for (const queryData of bucketQueryData) {
+    const bucketSymbols = queryData.featureIndex.lookupSymbolFeatures(
+      renderedSymbols[queryData.bucketInstanceId],
+      queryData.bucketIndex,
+      queryData.sourceLayerIndex,
+      params.filter,
+      params.layers,
+      styleLayers
+    );
+
+    for (const layerID in bucketSymbols) {
+      const resultFeatures = (result[layerID] = result[layerID] || []);
+      const layerSymbols = bucketSymbols[layerID];
+      layerSymbols.sort((a, b) => {
+        // Match topDownFeatureComparator from FeatureIndex, but using
+        // most recent sorting of features from bucket.sortFeatures
+        const featureSortOrder = queryData.featureSortOrder;
+        if (featureSortOrder) {
+          // queryRenderedSymbols documentation says we'll return features in
+          // "top-to-bottom" rendering order (aka last-to-first).
+          // Actually there can be multiple symbol instances per feature, so
+          // we sort each feature based on the first matching symbol instance.
+          const sortedA = featureSortOrder.indexOf(a.featureIndex);
+          const sortedB = featureSortOrder.indexOf(b.featureIndex);
+          assert(sortedA >= 0);
+          assert(sortedB >= 0);
+          return sortedB - sortedA;
+        }
+        // Bucket hasn't been re-sorted based on angle, so use the
+        // reverse of the order the features appeared in the data.
+        return b.featureIndex - a.featureIndex;
+      });
+      for (const symbolFeature of layerSymbols) {
+        resultFeatures.push(symbolFeature);
+      }
+    }
+  }
+
+  // Merge state from SourceCache into the results
+  for (const layerName in result) {
+    result[layerName].forEach(featureWrapper => {
+      const feature = featureWrapper.feature;
+      const layer = styleLayers[layerName];
+      const sourceCache = sourceCaches[layer.source];
+      const state = sourceCache.getFeatureState(feature.layer['source-layer'], feature.id);
+      feature.source = feature.layer.source;
+      if (feature.layer['source-layer']) {
+        feature.sourceLayer = feature.layer['source-layer'];
+      }
+      feature.state = state;
+    });
+  }
+  return result;
+}
+
+function querySourceFeatures(sourceCache, params) {
+  const tiles = sourceCache.getRenderableIds().map(id => {
+    return sourceCache.getTileByID(id);
+  });
+
+  const result = [];
+
+  const dataTiles = {};
+  for (let i = 0; i < tiles.length; i++) {
+    const tile = tiles[i];
+    const dataID = tile.tileID.canonical.key;
+    if (!dataTiles[dataID]) {
+      dataTiles[dataID] = true;
+      tile.querySourceFeatures(result, params);
+    }
+  }
+
+  return result;
+}
+
+function sortTilesIn(a, b) {
+  const idA = a.tileID;
+  const idB = b.tileID;
+  return (
+    idA.overscaledZ - idB.overscaledZ ||
+    idA.canonical.y - idB.canonical.y ||
+    idA.wrap - idB.wrap ||
+    idA.canonical.x - idB.canonical.x
+  );
+}
+
+function mergeRenderedFeatureLayers(tiles) {
+  // Merge results from all tiles, but if two tiles share the same
+  // wrapped ID, don't duplicate features between the two tiles
+  const result = {};
+  const wrappedIDLayerMap = {};
+  for (const tile of tiles) {
+    const queryResults = tile.queryResults;
+    const wrappedID = tile.wrappedTileID;
+    const wrappedIDLayers = (wrappedIDLayerMap[wrappedID] = wrappedIDLayerMap[wrappedID] || {});
+    for (const layerID in queryResults) {
+      const tileFeatures = queryResults[layerID];
+      const wrappedIDFeatures = (wrappedIDLayers[layerID] = wrappedIDLayers[layerID] || {});
+      const resultFeatures = (result[layerID] = result[layerID] || []);
+      for (const tileFeature of tileFeatures) {
+        if (!wrappedIDFeatures[tileFeature.featureIndex]) {
+          wrappedIDFeatures[tileFeature.featureIndex] = true;
+          resultFeatures.push(tileFeature);
+        }
+      }
+    }
+  }
+  return result;
+}

package/src/source/raster_dem_tile_source.js

@@ -0,0 +1,140 @@
+const browser = require('../util/browser');
+const loadImage = require('../util/loader/image');
+const { OverscaledTileID } = require('./tile_id');
+const RasterTileSource = require('./raster_tile_source');
+// ensure DEMData is registered for worker transfer on main thread:
+require('../data/dem_data');
+
+class RasterDEMTileSource extends RasterTileSource {
+  constructor(id, options, dispatcher, eventedParent) {
+    super(id, options, dispatcher, eventedParent);
+    this.type = 'raster-dem';
+    this.maxzoom = 22;
+    this._options = Object.assign({}, options);
+    this.encoding = options.encoding || 'mapbox';
+  }
+
+  serialize() {
+    return {
+      type: 'raster-dem',
+      url: this.url,
+      tileSize: this.tileSize,
+      tiles: this.tiles,
+      bounds: this.bounds,
+      encoding: this.encoding
+    };
+  }
+
+  loadTile(tile, callback) {
+    const done = (err, dem) => {
+      if (err) {
+        tile.state = 'errored';
+        callback(err);
+      }
+
+      if (dem) {
+        tile.dem = dem;
+        tile.needsHillshadePrepare = true;
+        tile.state = 'loaded';
+        callback(null);
+      }
+    };
+    const imageLoaded = (err, img) => {
+      delete tile.request;
+      if (tile.aborted) {
+        tile.state = 'unloaded';
+        callback(null);
+      } else if (err) {
+        tile.state = 'errored';
+        callback(err);
+      } else if (img) {
+        const rawImageData = browser.getImageData(img);
+        const params = {
+          uid: tile.uid,
+          coord: tile.tileID,
+          source: this.id,
+          rawImageData: rawImageData,
+          encoding: this.encoding
+        };
+
+        if (!tile.workerID || tile.state === 'expired') {
+          tile.workerID = this.dispatcher.send('loadDEMTile', params, done);
+        }
+      }
+    };
+
+    tile.abortController = new window.AbortController();
+    this.tiles(tile.tileID.canonical, tile.abortController)
+      .catch(() => {})
+      .then(data => {
+        tile.neighboringTiles = this._getNeighboringTiles(tile.tileID);
+        if (!data) {
+          const err = new Error('Tile could not be loaded');
+          err.status = 404; // will try to use the parent/child tile
+          return done(err);
+        }
+        tile.request = loadImage(data, imageLoaded);
+      });
+  }
+
+  _getNeighboringTiles(tileID) {
+    const canonical = tileID.canonical;
+    const dim = 2 ** canonical.z;
+
+    const px = (canonical.x - 1 + dim) % dim;
+    const pxw = canonical.x === 0 ? tileID.wrap - 1 : tileID.wrap;
+    const nx = (canonical.x + 1 + dim) % dim;
+    const nxw = canonical.x + 1 === dim ? tileID.wrap + 1 : tileID.wrap;
+
+    const neighboringTiles = {};
+    // add adjacent tiles
+    neighboringTiles[new OverscaledTileID(tileID.overscaledZ, pxw, canonical.z, px, canonical.y).key] = {
+      backfilled: false
+    };
+    neighboringTiles[new OverscaledTileID(tileID.overscaledZ, nxw, canonical.z, nx, canonical.y).key] = {
+      backfilled: false
+    };
+
+    // Add upper neighboringTiles
+    if (canonical.y > 0) {
+      neighboringTiles[new OverscaledTileID(tileID.overscaledZ, pxw, canonical.z, px, canonical.y - 1).key] = {
+        backfilled: false
+      };
+      neighboringTiles[
+        new OverscaledTileID(tileID.overscaledZ, tileID.wrap, canonical.z, canonical.x, canonical.y - 1).key
+      ] = { backfilled: false };
+      neighboringTiles[new OverscaledTileID(tileID.overscaledZ, nxw, canonical.z, nx, canonical.y - 1).key] = {
+        backfilled: false
+      };
+    }
+    // Add lower neighboringTiles
+    if (canonical.y + 1 < dim) {
+      neighboringTiles[new OverscaledTileID(tileID.overscaledZ, pxw, canonical.z, px, canonical.y + 1).key] = {
+        backfilled: false
+      };
+      neighboringTiles[
+        new OverscaledTileID(tileID.overscaledZ, tileID.wrap, canonical.z, canonical.x, canonical.y + 1).key
+      ] = { backfilled: false };
+      neighboringTiles[new OverscaledTileID(tileID.overscaledZ, nxw, canonical.z, nx, canonical.y + 1).key] = {
+        backfilled: false
+      };
+    }
+
+    return neighboringTiles;
+  }
+
+  unloadTile(tile) {
+    if (tile.demTexture) this.map.painter.saveTileTexture(tile.demTexture);
+    if (tile.fbo) {
+      tile.fbo.destroy();
+      delete tile.fbo;
+    }
+    if (tile.dem) delete tile.dem;
+    delete tile.neighboringTiles;
+
+    tile.state = 'unloaded';
+    this.dispatcher.send('removeDEMTile', { uid: tile.uid, source: this.id }, undefined, tile.workerID);
+  }
+}
+
+module.exports = RasterDEMTileSource;

package/src/source/raster_dem_tile_worker_source.js

@@ -0,0 +1,26 @@
+const DEMData = require('../data/dem_data');
+
+class RasterDEMTileWorkerSource {
+  constructor() {
+    this.loaded = {};
+  }
+
+  loadTile(params, callback) {
+    const { uid, encoding, rawImageData } = params;
+    const dem = new DEMData(uid, rawImageData, encoding);
+
+    this.loaded = this.loaded || {};
+    this.loaded[uid] = dem;
+    callback(null, dem);
+  }
+
+  removeTile(params) {
+    const loaded = this.loaded;
+    const uid = params.uid;
+    if (loaded?.[uid]) {
+      delete loaded[uid];
+    }
+  }
+}
+
+module.exports = RasterDEMTileWorkerSource;