@mapwhit/tilerenderer 0.47.1

package/src/data/bucket.js

@@ -0,0 +1,53 @@
+/**
+ * The `Bucket` interface is the single point of knowledge about turning vector
+ * tiles into WebGL buffers.
+ *
+ * `Bucket` is an abstract interface. An implementation exists for each style layer type.
+ * Create a bucket via the `StyleLayer#createBucket` method.
+ *
+ * The concrete bucket types, using layout options from the style layer,
+ * transform feature geometries into vertex and index data for use by the
+ * vertex shader.  They also (via `ProgramConfiguration`) use feature
+ * properties and the zoom level to populate the attributes needed for
+ * data-driven styling.
+ *
+ * Buckets are designed to be built on a worker thread and then serialized and
+ * transferred back to the main thread for rendering.  On the worker side, a
+ * bucket's vertex, index, and attribute data is stored in `bucket.arrays:
+ * ArrayGroup`.  When a bucket's data is serialized and sent back to the main
+ * thread, is gets deserialized (using `new Bucket(serializedBucketData)`, with
+ * the array data now stored in `bucket.buffers: BufferGroup`.  BufferGroups
+ * hold the same data as ArrayGroups, but are tuned for consumption by WebGL.
+ *
+ * @private
+ */
+
+function deserialize(input, style) {
+  const output = {};
+
+  // Guard against the case where the map's style has been set to null while
+  // this bucket has been parsing.
+  if (!style) return output;
+
+  for (const bucket of input) {
+    const layers = bucket.layerIds.map(id => style.getLayer(id)).filter(Boolean);
+
+    if (layers.length === 0) {
+      continue;
+    }
+
+    // look up StyleLayer objects from layer ids (since we don't
+    // want to waste time serializing/copying them from the worker)
+    bucket.layers = layers;
+    bucket.stateDependentLayers = layers.filter(l => l.isStateDependent());
+    for (const layer of layers) {
+      output[layer.id] = bucket;
+    }
+  }
+
+  return output;
+}
+
+module.exports = {
+  deserialize
+};

package/src/data/dem_data.js

@@ -0,0 +1,126 @@
+const { RGBAImage } = require('../util/image');
+
+const warn = require('../util/warn');
+const { register } = require('../util/web_worker_transfer');
+
+// DEMData is a data structure for decoding, backfilling, and storing elevation data for processing in the hillshade shaders
+// data can be populated either from a pngraw image tile or from serliazed data sent back from a worker. When data is initially
+// loaded from a image tile, we decode the pixel values using the appropriate decoding formula, but we store the
+// elevation data as an Int32 value. we add 65536 (2^16) to eliminate negative values and enable the use of
+// integer overflow when creating the texture used in the hillshadePrepare step.
+
+// DEMData also handles the backfilling of data from a tile's neighboring tiles. This is necessary because we use a pixel's 8
+// surrounding pixel values to compute the slope at that pixel, and we cannot accurately calculate the slope at pixels on a
+// tile's edge without backfilling from neighboring tiles.
+
+class DEMData {
+  constructor(uid, data, encoding) {
+    this.uid = uid;
+    if (data.height !== data.width) throw new RangeError('DEM tiles must be square');
+    if (encoding && encoding !== 'mapbox' && encoding !== 'terrarium') {
+      warn.once(`"${encoding}" is not a valid encoding type. Valid types include "mapbox" and "terrarium".`);
+      return;
+    }
+    const dim = (this.dim = data.height);
+    this.stride = this.dim + 2;
+    this.data = new Int32Array(this.stride * this.stride);
+
+    const pixels = data.data;
+    const unpack = encoding === 'terrarium' ? this._unpackTerrarium : this._unpackMapbox;
+    for (let y = 0; y < dim; y++) {
+      for (let x = 0; x < dim; x++) {
+        const i = y * dim + x;
+        const j = i * 4;
+        this.set(x, y, unpack(pixels[j], pixels[j + 1], pixels[j + 2]));
+      }
+    }
+
+    // in order to avoid flashing seams between tiles, here we are initially populating a 1px border of pixels around the image
+    // with the data of the nearest pixel from the image. this data is eventually replaced when the tile's neighboring
+    // tiles are loaded and the accurate data can be backfilled using DEMData#backfillBorder
+    for (let x = 0; x < dim; x++) {
+      // left vertical border
+      this.set(-1, x, this.get(0, x));
+      // right vertical border
+      this.set(dim, x, this.get(dim - 1, x));
+      // left horizontal border
+      this.set(x, -1, this.get(x, 0));
+      // right horizontal border
+      this.set(x, dim, this.get(x, dim - 1));
+    }
+    // corners
+    this.set(-1, -1, this.get(0, 0));
+    this.set(dim, -1, this.get(dim - 1, 0));
+    this.set(-1, dim, this.get(0, dim - 1));
+    this.set(dim, dim, this.get(dim - 1, dim - 1));
+  }
+
+  set(x, y, value) {
+    this.data[this._idx(x, y)] = value + 65536;
+  }
+
+  get(x, y) {
+    return this.data[this._idx(x, y)] - 65536;
+  }
+
+  _idx(x, y) {
+    if (x < -1 || x >= this.dim + 1 || y < -1 || y >= this.dim + 1)
+      throw new RangeError('out of range source coordinates for DEM data');
+    return (y + 1) * this.stride + (x + 1);
+  }
+
+  _unpackMapbox(r, g, b) {
+    // unpacking formula for mapbox.terrain-rgb:
+    // https://www.mapbox.com/help/access-elevation-data/#mapbox-terrain-rgb
+    return (r * 256 * 256 + g * 256.0 + b) / 10.0 - 10000.0;
+  }
+
+  _unpackTerrarium(r, g, b) {
+    // unpacking formula for mapzen terrarium:
+    // https://aws.amazon.com/public-datasets/terrain/
+    return r * 256 + g + b / 256 - 32768.0;
+  }
+
+  getPixels() {
+    return new RGBAImage({ width: this.stride, height: this.stride }, new Uint8Array(this.data.buffer));
+  }
+
+  backfillBorder(borderTile, dx, dy) {
+    if (this.dim !== borderTile.dim) throw new Error('dem dimension mismatch');
+
+    let xMin = dx * this.dim;
+    let xMax = dx * this.dim + this.dim;
+    let yMin = dy * this.dim;
+    let yMax = dy * this.dim + this.dim;
+
+    switch (dx) {
+      case -1:
+        xMin = xMax - 1;
+        break;
+      case 1:
+        xMax = xMin + 1;
+        break;
+    }
+
+    switch (dy) {
+      case -1:
+        yMin = yMax - 1;
+        break;
+      case 1:
+        yMax = yMin + 1;
+        break;
+    }
+
+    const ox = -dx * this.dim;
+    const oy = -dy * this.dim;
+    for (let y = yMin; y < yMax; y++) {
+      for (let x = xMin; x < xMax; x++) {
+        this.set(x, y, borderTile.get(x + ox, y + oy));
+      }
+    }
+  }
+}
+
+register('DEMData', DEMData);
+
+module.exports = DEMData;

package/src/data/extent.js

@@ -0,0 +1,17 @@
+/**
+ * The maximum value of a coordinate in the internal tile coordinate system. Coordinates of
+ * all source features normalized to this extent upon load.
+ *
+ * The value is a consequence of the following:
+ *
+ * * Vertex buffer store positions as signed 16 bit integers.
+ * * One bit is lost for signedness to support tile buffers.
+ * * One bit is lost because the line vertex buffer used to pack 1 bit of other data into the int.
+ *   This is no longer the case but we're reserving this bit anyway.
+ * * One bit is lost to support features extending past the extent on the right edge of the tile.
+ * * This leaves us with 2^13 = 8192
+ *
+ * @private
+ * @readonly
+ */
+module.exports = 8192;

package/src/data/feature_index.js

@@ -0,0 +1,254 @@
+const loadGeometry = require('./load_geometry');
+const EXTENT = require('./extent');
+const featureFilter = require('../style-spec/feature_filter');
+const Grid = require('grid-index');
+const DictionaryCoder = require('../util/dictionary_coder');
+const vt = require('@mapbox/vector-tile');
+const Protobuf = require('@mapwhit/pbf');
+const GeoJSONFeature = require('../util/vectortile_to_geojson');
+const { arraysIntersect } = require('../util/object');
+const { register } = require('../util/web_worker_transfer');
+const EvaluationParameters = require('../style/evaluation_parameters');
+const { polygonIntersectsBox } = require('../util/intersection_tests');
+
+const { FeatureIndexArray } = require('./array_types');
+
+class FeatureIndex {
+  constructor(tileID, grid, featureIndexArray) {
+    this.tileID = tileID;
+    this.x = tileID.canonical.x;
+    this.y = tileID.canonical.y;
+    this.z = tileID.canonical.z;
+    this.grid = grid || new Grid(EXTENT, 16, 0);
+    this.grid3D = new Grid(EXTENT, 16, 0);
+    this.featureIndexArray = featureIndexArray || new FeatureIndexArray();
+  }
+
+  insert(feature, geometry, featureIndex, sourceLayerIndex, bucketIndex, is3D) {
+    const key = this.featureIndexArray.length;
+    this.featureIndexArray.emplaceBack(featureIndex, sourceLayerIndex, bucketIndex);
+
+    const grid = is3D ? this.grid3D : this.grid;
+
+    for (let r = 0; r < geometry.length; r++) {
+      const ring = geometry[r];
+
+      const bbox = [
+        Number.POSITIVE_INFINITY,
+        Number.POSITIVE_INFINITY,
+        Number.NEGATIVE_INFINITY,
+        Number.NEGATIVE_INFINITY
+      ];
+      for (let i = 0; i < ring.length; i++) {
+        const p = ring[i];
+        bbox[0] = Math.min(bbox[0], p.x);
+        bbox[1] = Math.min(bbox[1], p.y);
+        bbox[2] = Math.max(bbox[2], p.x);
+        bbox[3] = Math.max(bbox[3], p.y);
+      }
+
+      if (bbox[0] < EXTENT && bbox[1] < EXTENT && bbox[2] >= 0 && bbox[3] >= 0) {
+        grid.insert(key, bbox[0], bbox[1], bbox[2], bbox[3]);
+      }
+    }
+  }
+
+  loadVTLayers() {
+    if (!this.vtLayers) {
+      this.vtLayers = new vt.VectorTile(new Protobuf(this.rawTileData)).layers;
+      this.sourceLayerCoder = new DictionaryCoder(
+        this.vtLayers ? Object.keys(this.vtLayers).sort() : ['_geojsonTileLayer']
+      );
+    }
+    return this.vtLayers;
+  }
+
+  // Finds non-symbol features in this tile at a particular position.
+  query(args, styleLayers, sourceFeatureState) {
+    this.loadVTLayers();
+
+    const params = args.params || {};
+    const pixelsToTileUnits = EXTENT / args.tileSize / args.scale;
+    const filter = featureFilter(params.filter);
+
+    const queryGeometry = args.queryGeometry;
+    const queryPadding = args.queryPadding * pixelsToTileUnits;
+
+    const bounds = getBounds(queryGeometry);
+    const matching = this.grid.query(
+      bounds.minX - queryPadding,
+      bounds.minY - queryPadding,
+      bounds.maxX + queryPadding,
+      bounds.maxY + queryPadding
+    );
+
+    const cameraBounds = getBounds(args.cameraQueryGeometry);
+    const matching3D = this.grid3D.query(
+      cameraBounds.minX - queryPadding,
+      cameraBounds.minY - queryPadding,
+      cameraBounds.maxX + queryPadding,
+      cameraBounds.maxY + queryPadding,
+      (bx1, by1, bx2, by2) => {
+        return polygonIntersectsBox(
+          args.cameraQueryGeometry,
+          bx1 - queryPadding,
+          by1 - queryPadding,
+          bx2 + queryPadding,
+          by2 + queryPadding
+        );
+      }
+    );
+
+    for (const key of matching3D) {
+      matching.push(key);
+    }
+
+    matching.sort(topDownFeatureComparator);
+
+    const result = {};
+    let previousIndex;
+    for (let k = 0; k < matching.length; k++) {
+      const index = matching[k];
+
+      // don't check the same feature more than once
+      if (index === previousIndex) continue;
+      previousIndex = index;
+
+      const match = this.featureIndexArray.get(index);
+      let featureGeometry = null;
+      this.loadMatchingFeature(
+        result,
+        match.bucketIndex,
+        match.sourceLayerIndex,
+        match.featureIndex,
+        filter,
+        params.layers,
+        styleLayers,
+        (feature, styleLayer) => {
+          if (!featureGeometry) {
+            featureGeometry = loadGeometry(feature);
+          }
+          let featureState = {};
+          if (feature.id) {
+            // `feature-state` expression evaluation requires feature state to be available
+            featureState = sourceFeatureState.getState(
+              styleLayer.sourceLayer || '_geojsonTileLayer',
+              String(feature.id)
+            );
+          }
+          return styleLayer.queryIntersectsFeature(
+            queryGeometry,
+            feature,
+            featureState,
+            featureGeometry,
+            this.z,
+            args.transform,
+            pixelsToTileUnits,
+            args.pixelPosMatrix
+          );
+        }
+      );
+    }
+
+    return result;
+  }
+
+  loadMatchingFeature(
+    result,
+    bucketIndex,
+    sourceLayerIndex,
+    featureIndex,
+    filter,
+    filterLayerIDs,
+    styleLayers,
+    intersectionTest
+  ) {
+    const layerIDs = this.bucketLayerIDs[bucketIndex];
+    if (filterLayerIDs && !arraysIntersect(filterLayerIDs, layerIDs)) return;
+
+    const sourceLayerName = this.sourceLayerCoder.decode(sourceLayerIndex);
+    const sourceLayer = this.vtLayers[sourceLayerName];
+    const feature = sourceLayer.feature(featureIndex);
+
+    if (!filter(new EvaluationParameters(this.tileID.overscaledZ), feature)) return;
+
+    for (let l = 0; l < layerIDs.length; l++) {
+      const layerID = layerIDs[l];
+
+      if (filterLayerIDs && filterLayerIDs.indexOf(layerID) < 0) {
+        continue;
+      }
+
+      const styleLayer = styleLayers[layerID];
+      if (!styleLayer) continue;
+
+      const intersectionZ = !intersectionTest || intersectionTest(feature, styleLayer);
+      if (!intersectionZ) {
+        // Only applied for non-symbol features
+        continue;
+      }
+
+      const geojsonFeature = new GeoJSONFeature(feature, this.z, this.x, this.y);
+      geojsonFeature.layer = styleLayer.serialize();
+      let layerResult = result[layerID];
+      if (layerResult === undefined) {
+        layerResult = result[layerID] = [];
+      }
+      layerResult.push({ featureIndex: featureIndex, feature: geojsonFeature, intersectionZ });
+    }
+  }
+
+  // Given a set of symbol indexes that have already been looked up,
+  // return a matching set of GeoJSONFeatures
+  lookupSymbolFeatures(symbolFeatureIndexes, bucketIndex, sourceLayerIndex, filterSpec, filterLayerIDs, styleLayers) {
+    const result = {};
+    this.loadVTLayers();
+
+    const filter = featureFilter(filterSpec);
+
+    for (const symbolFeatureIndex of symbolFeatureIndexes) {
+      this.loadMatchingFeature(
+        result,
+        bucketIndex,
+        sourceLayerIndex,
+        symbolFeatureIndex,
+        filter,
+        filterLayerIDs,
+        styleLayers
+      );
+    }
+    return result;
+  }
+
+  hasLayer(id) {
+    for (const layerIDs of this.bucketLayerIDs) {
+      for (const layerID of layerIDs) {
+        if (id === layerID) return true;
+      }
+    }
+
+    return false;
+  }
+}
+
+register('FeatureIndex', FeatureIndex, { omit: ['rawTileData', 'sourceLayerCoder'] });
+
+module.exports = FeatureIndex;
+
+function getBounds(geometry) {
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  for (const p of geometry) {
+    minX = Math.min(minX, p.x);
+    minY = Math.min(minY, p.y);
+    maxX = Math.max(maxX, p.x);
+    maxY = Math.max(maxY, p.y);
+  }
+  return { minX, minY, maxX, maxY };
+}
+
+function topDownFeatureComparator(a, b) {
+  return b - a;
+}

package/src/data/index_array_type.js

@@ -0,0 +1,14 @@
+const { LineIndexArray, TriangleIndexArray, LineStripIndexArray } = require('./array_types');
+
+/**
+ * An index array stores Uint16 indices of vertexes in a corresponding vertex array. We use
+ * three kinds of index arrays: arrays storing groups of three indices, forming triangles;
+ * arrays storing pairs of indices, forming line segments; and arrays storing single indices,
+ * forming a line strip.
+ * @private
+ */
+module.exports = {
+  LineIndexArray,
+  TriangleIndexArray,
+  LineStripIndexArray
+};

package/src/data/load_geometry.js

@@ -0,0 +1,42 @@
+const warn = require('../util/warn');
+
+const EXTENT = require('./extent');
+
+// These bounds define the minimum and maximum supported coordinate values.
+// While visible coordinates are within [0, EXTENT], tiles may theoretically
+// contain cordinates within [-Infinity, Infinity]. Our range is limited by the
+// number of bits used to represent the coordinate.
+function createBounds(bits) {
+  return {
+    min: -1 * 2 ** (bits - 1),
+    max: 2 ** (bits - 1) - 1
+  };
+}
+
+const bounds = createBounds(16);
+
+/**
+ * Loads a geometry from a VectorTileFeature and scales it to the common extent
+ * used internally.
+ * @param {VectorTileFeature} feature
+ * @private
+ */
+module.exports = function loadGeometry(feature) {
+  const scale = EXTENT / feature.extent;
+  const geometry = feature.loadGeometry();
+  for (let r = 0; r < geometry.length; r++) {
+    const ring = geometry[r];
+    for (let p = 0; p < ring.length; p++) {
+      const point = ring[p];
+      // round here because mapbox-gl-native uses integers to represent
+      // points and we need to do the same to avoid renering differences.
+      point.x = Math.round(point.x * scale);
+      point.y = Math.round(point.y * scale);
+
+      if (point.x < bounds.min || point.x > bounds.max || point.y < bounds.min || point.y > bounds.max) {
+        warn.once('Geometry exceeds allowed extent, reduce your vector tile buffer size');
+      }
+    }
+  }
+  return geometry;
+};

package/src/data/pos_attributes.js

@@ -0,0 +1,3 @@
+const { createLayout } = require('../util/struct_array');
+
+module.exports = createLayout([{ name: 'a_pos', type: 'Int16', components: 2 }]);