@mapwhit/tilerenderer 0.47.1

package/src/style/style_layer/background_style_layer.js

@@ -0,0 +1,11 @@
+const StyleLayer = require('../style_layer');
+
+const properties = require('./background_style_layer_properties');
+
+class BackgroundStyleLayer extends StyleLayer {
+  constructor(layer) {
+    super(layer, properties);
+  }
+}
+
+module.exports = BackgroundStyleLayer;

package/src/style/style_layer/background_style_layer_properties.js

@@ -0,0 +1,25 @@
+// This file is generated. Edit layer-properties.js.ejs, then run `make generate-style-code`.
+
+const { Properties, CrossFadedProperty, DataConstantProperty } = require('../properties');
+
+const paint = new Properties({
+  'background-color': new DataConstantProperty({
+    type: 'color',
+    default: '#000000',
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom'] }
+  }),
+  'background-pattern': new CrossFadedProperty({
+    type: 'string',
+    transition: true,
+    expression: { parameters: ['zoom'] }
+  }),
+  'background-opacity': new DataConstantProperty({
+    type: 'number',
+    default: 1,
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom'] }
+  })
+});
+
+module.exports = { paint };

package/src/style/style_layer/circle_style_layer.js

@@ -0,0 +1,93 @@
+const StyleLayer = require('../style_layer');
+
+const CircleBucket = require('../../data/bucket/circle_bucket');
+const { polygonIntersectsBufferedPoint } = require('../../util/intersection_tests');
+const { getMaximumPaintValue, translateDistance, translate } = require('../query_utils');
+const properties = require('./circle_style_layer_properties');
+const { vec4 } = require('@mapbox/gl-matrix');
+const Point = require('@mapbox/point-geometry');
+
+class CircleStyleLayer extends StyleLayer {
+  constructor(layer) {
+    super(layer, properties);
+  }
+
+  createBucket(parameters) {
+    return new CircleBucket(parameters);
+  }
+
+  queryRadius(bucket) {
+    const circleBucket = bucket;
+    return (
+      getMaximumPaintValue('circle-radius', this, circleBucket) +
+      getMaximumPaintValue('circle-stroke-width', this, circleBucket) +
+      translateDistance(this.paint.get('circle-translate'))
+    );
+  }
+
+  queryIntersectsFeature(
+    queryGeometry,
+    feature,
+    featureState,
+    geometry,
+    zoom,
+    transform,
+    pixelsToTileUnits,
+    pixelPosMatrix
+  ) {
+    const translatedPolygon = translate(
+      queryGeometry,
+      this.paint.get('circle-translate'),
+      this.paint.get('circle-translate-anchor'),
+      transform.angle,
+      pixelsToTileUnits
+    );
+    const radius = this.paint.get('circle-radius').evaluate(feature, featureState);
+    const stroke = this.paint.get('circle-stroke-width').evaluate(feature, featureState);
+    const size = radius + stroke;
+
+    // For pitch-alignment: map, compare feature geometry to query geometry in the plane of the tile
+    // // Otherwise, compare geometry in the plane of the viewport
+    // // A circle with fixed scaling relative to the viewport gets larger in tile space as it moves into the distance
+    // // A circle with fixed scaling relative to the map gets smaller in viewport space as it moves into the distance
+    const alignWithMap = this.paint.get('circle-pitch-alignment') === 'map';
+    const transformedPolygon = alignWithMap
+      ? translatedPolygon
+      : projectQueryGeometry(translatedPolygon, pixelPosMatrix);
+    const transformedSize = alignWithMap ? size * pixelsToTileUnits : size;
+
+    for (const ring of geometry) {
+      for (const point of ring) {
+        const transformedPoint = alignWithMap ? point : projectPoint(point, pixelPosMatrix);
+
+        let adjustedSize = transformedSize;
+        const projectedCenter = vec4.transformMat4([], [point.x, point.y, 0, 1], pixelPosMatrix);
+        if (this.paint.get('circle-pitch-scale') === 'viewport' && this.paint.get('circle-pitch-alignment') === 'map') {
+          adjustedSize *= projectedCenter[3] / transform.cameraToCenterDistance;
+        } else if (
+          this.paint.get('circle-pitch-scale') === 'map' &&
+          this.paint.get('circle-pitch-alignment') === 'viewport'
+        ) {
+          adjustedSize *= transform.cameraToCenterDistance / projectedCenter[3];
+        }
+
+        if (polygonIntersectsBufferedPoint(transformedPolygon, transformedPoint, adjustedSize)) return true;
+      }
+    }
+
+    return false;
+  }
+}
+
+function projectPoint(p, pixelPosMatrix) {
+  const point = vec4.transformMat4([], [p.x, p.y, 0, 1], pixelPosMatrix);
+  return new Point(point[0] / point[3], point[1] / point[3]);
+}
+
+function projectQueryGeometry(queryGeometry, pixelPosMatrix) {
+  return queryGeometry.map(p => {
+    return projectPoint(p, pixelPosMatrix);
+  });
+}
+
+module.exports = CircleStyleLayer;

package/src/style/style_layer/circle_style_layer_properties.js

@@ -0,0 +1,76 @@
+// This file is generated. Edit layer-properties.js.ejs, then run `make generate-style-code`.
+
+const { Properties, DataConstantProperty, DataDrivenProperty } = require('../properties');
+
+const paint = new Properties({
+  'circle-radius': new DataDrivenProperty({
+    type: 'number',
+    default: 5,
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom', 'feature'] }
+  }),
+  'circle-color': new DataDrivenProperty({
+    type: 'color',
+    default: '#000000',
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom', 'feature'] }
+  }),
+  'circle-blur': new DataDrivenProperty({
+    type: 'number',
+    default: 0,
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom', 'feature'] }
+  }),
+  'circle-opacity': new DataDrivenProperty({
+    type: 'number',
+    default: 1,
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom', 'feature'] }
+  }),
+  'circle-translate': new DataConstantProperty({
+    type: 'array',
+    value: 'number',
+    length: 2,
+    default: [0, 0],
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom'] }
+  }),
+  'circle-translate-anchor': new DataConstantProperty({
+    type: 'enum',
+    values: ['map', 'viewport'],
+    default: 'map',
+    expression: { parameters: ['zoom'] }
+  }),
+  'circle-pitch-scale': new DataConstantProperty({
+    type: 'enum',
+    values: ['map', 'viewport'],
+    default: 'map',
+    expression: { parameters: ['zoom'] }
+  }),
+  'circle-pitch-alignment': new DataConstantProperty({
+    type: 'enum',
+    values: ['map', 'viewport'],
+    default: 'viewport',
+    expression: { parameters: ['zoom'] }
+  }),
+  'circle-stroke-width': new DataDrivenProperty({
+    type: 'number',
+    default: 0,
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom', 'feature'] }
+  }),
+  'circle-stroke-color': new DataDrivenProperty({
+    type: 'color',
+    default: '#000000',
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom', 'feature'] }
+  }),
+  'circle-stroke-opacity': new DataDrivenProperty({
+    type: 'number',
+    default: 1,
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom', 'feature'] }
+  })
+});
+
+module.exports = { paint };

package/src/style/style_layer/fill_extrusion_style_layer.js

@@ -0,0 +1,194 @@
+const StyleLayer = require('../style_layer');
+
+const FillExtrusionBucket = require('../../data/bucket/fill_extrusion_bucket');
+const { polygonIntersectsPolygon, polygonIntersectsMultiPolygon } = require('../../util/intersection_tests');
+const { translateDistance, translate } = require('../query_utils');
+const properties = require('./fill_extrusion_style_layer_properties');
+const { vec4 } = require('@mapbox/gl-matrix');
+const Point = require('@mapbox/point-geometry');
+
+class FillExtrusionStyleLayer extends StyleLayer {
+  constructor(layer) {
+    super(layer, properties);
+  }
+
+  createBucket(parameters) {
+    return new FillExtrusionBucket(parameters);
+  }
+
+  queryRadius() {
+    return translateDistance(this.paint.get('fill-extrusion-translate'));
+  }
+
+  is3D() {
+    return true;
+  }
+
+  queryIntersectsFeature(
+    queryGeometry,
+    feature,
+    featureState,
+    geometry,
+    zoom,
+    transform,
+    pixelsToTileUnits,
+    pixelPosMatrix
+  ) {
+    const translatedPolygon = translate(
+      queryGeometry,
+      this.paint.get('fill-extrusion-translate'),
+      this.paint.get('fill-extrusion-translate-anchor'),
+      transform.angle,
+      pixelsToTileUnits
+    );
+    const height = this.paint.get('fill-extrusion-height').evaluate(feature, featureState);
+    const base = this.paint.get('fill-extrusion-base').evaluate(feature, featureState);
+
+    const projectedQueryGeometry = projectQueryGeometry(translatedPolygon, pixelPosMatrix, transform, 0);
+
+    const projected = projectExtrusion(geometry, base, height, pixelPosMatrix);
+    const projectedBase = projected[0];
+    const projectedTop = projected[1];
+    return checkIntersection(projectedBase, projectedTop, projectedQueryGeometry);
+  }
+}
+
+function dot(a, b) {
+  return a.x * b.x + a.y * b.y;
+}
+
+function getIntersectionDistance(projectedQueryGeometry, projectedFace) {
+  if (projectedQueryGeometry.length === 1) {
+    // For point queries calculate the z at which the point intersects the face
+    // using barycentric coordinates.
+
+    // Find the barycentric coordinates of the projected point within the first
+    // triangle of the face, using only the xy plane. It doesn't matter if the
+    // point is outside the first triangle because all the triangles in the face
+    // are in the same plane.
+    const a = projectedFace[0];
+    const b = projectedFace[1];
+    const c = projectedFace[3];
+    const p = projectedQueryGeometry[0];
+
+    const ab = b.sub(a);
+    const ac = c.sub(a);
+    const ap = p.sub(a);
+
+    const dotABAB = dot(ab, ab);
+    const dotABAC = dot(ab, ac);
+    const dotACAC = dot(ac, ac);
+    const dotAPAB = dot(ap, ab);
+    const dotAPAC = dot(ap, ac);
+    const denom = dotABAB * dotACAC - dotABAC * dotABAC;
+    const v = (dotACAC * dotAPAB - dotABAC * dotAPAC) / denom;
+    const w = (dotABAB * dotAPAC - dotABAC * dotAPAB) / denom;
+    const u = 1 - v - w;
+
+    // Use the barycentric weighting along with the original triangle z coordinates to get the point of intersection.
+    return a.z * u + b.z * v + c.z * w;
+  }
+  // The counts as closest is less clear when the query is a box. This
+  // returns the distance to the nearest point on the face, whether it is
+  // within the query or not. It could be more correct to return the
+  // distance to the closest point within the query box but this would be
+  // more complicated and expensive to calculate with little benefit.
+  let closestDistance = Number.POSITIVE_INFINITY;
+  for (const p of projectedFace) {
+    closestDistance = Math.min(closestDistance, p.z);
+  }
+  return closestDistance;
+}
+
+function checkIntersection(projectedBase, projectedTop, projectedQueryGeometry) {
+  let closestDistance = Number.POSITIVE_INFINITY;
+
+  if (polygonIntersectsMultiPolygon(projectedQueryGeometry, projectedTop)) {
+    closestDistance = getIntersectionDistance(projectedQueryGeometry, projectedTop[0]);
+  }
+
+  for (let r = 0; r < projectedTop.length; r++) {
+    const ringTop = projectedTop[r];
+    const ringBase = projectedBase[r];
+    for (let p = 0; p < ringTop.length - 1; p++) {
+      const topA = ringTop[p];
+      const topB = ringTop[p + 1];
+      const baseA = ringBase[p];
+      const baseB = ringBase[p + 1];
+      const face = [topA, topB, baseB, baseA, topA];
+      if (polygonIntersectsPolygon(projectedQueryGeometry, face)) {
+        closestDistance = Math.min(closestDistance, getIntersectionDistance(projectedQueryGeometry, face));
+      }
+    }
+  }
+
+  return closestDistance === Number.POSITIVE_INFINITY ? false : closestDistance;
+}
+
+/*
+ * Project the geometry using matrix `m`. This is essentially doing
+ * `vec4.transformMat4([], [p.x, p.y, z, 1], m)` but the multiplication
+ * is inlined so that parts of the projection that are the same across
+ * different points can only be done once. This produced a measurable
+ * performance improvement.
+ */
+function projectExtrusion(geometry, zBase, zTop, m) {
+  const projectedBase = [];
+  const projectedTop = [];
+
+  const baseXZ = m[8] * zBase;
+  const baseYZ = m[9] * zBase;
+  const baseZZ = m[10] * zBase;
+  const baseWZ = m[11] * zBase;
+  const topXZ = m[8] * zTop;
+  const topYZ = m[9] * zTop;
+  const topZZ = m[10] * zTop;
+  const topWZ = m[11] * zTop;
+
+  for (const r of geometry) {
+    const ringBase = [];
+    const ringTop = [];
+    for (const p of r) {
+      const x = p.x;
+      const y = p.y;
+
+      const sX = m[0] * x + m[4] * y + m[12];
+      const sY = m[1] * x + m[5] * y + m[13];
+      const sZ = m[2] * x + m[6] * y + m[14];
+      const sW = m[3] * x + m[7] * y + m[15];
+
+      const baseX = sX + baseXZ;
+      const baseY = sY + baseYZ;
+      const baseZ = sZ + baseZZ;
+      const baseW = sW + baseWZ;
+
+      const topX = sX + topXZ;
+      const topY = sY + topYZ;
+      const topZ = sZ + topZZ;
+      const topW = sW + topWZ;
+
+      const b = new Point(baseX / baseW, baseY / baseW);
+      b.z = baseZ / baseW;
+      ringBase.push(b);
+
+      const t = new Point(topX / topW, topY / topW);
+      t.z = topZ / topW;
+      ringTop.push(t);
+    }
+    projectedBase.push(ringBase);
+    projectedTop.push(ringTop);
+  }
+  return [projectedBase, projectedTop];
+}
+
+function projectQueryGeometry(queryGeometry, pixelPosMatrix, transform, z) {
+  const projectedQueryGeometry = [];
+  for (const p of queryGeometry) {
+    const v = [p.x, p.y, z, 1];
+    vec4.transformMat4(v, v, pixelPosMatrix);
+    projectedQueryGeometry.push(new Point(v[0] / v[3], v[1] / v[3]));
+  }
+  return projectedQueryGeometry;
+}
+
+module.exports = FillExtrusionStyleLayer;

package/src/style/style_layer/fill_extrusion_style_layer_properties.js

@@ -0,0 +1,56 @@
+// This file is generated. Edit layer-properties.js.ejs, then run `make generate-style-code`.
+
+const { Properties, CrossFadedDataDrivenProperty, DataConstantProperty, DataDrivenProperty } = require('../properties');
+
+const paint = new Properties({
+  'fill-extrusion-opacity': new DataConstantProperty({
+    type: 'number',
+    default: 1,
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom'] }
+  }),
+  'fill-extrusion-color': new DataDrivenProperty({
+    type: 'color',
+    default: '#000000',
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom', 'feature'] }
+  }),
+  'fill-extrusion-translate': new DataConstantProperty({
+    type: 'array',
+    value: 'number',
+    length: 2,
+    default: [0, 0],
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom'] }
+  }),
+  'fill-extrusion-translate-anchor': new DataConstantProperty({
+    type: 'enum',
+    values: ['map', 'viewport'],
+    default: 'map',
+    expression: { parameters: ['zoom'] }
+  }),
+  'fill-extrusion-pattern': new CrossFadedDataDrivenProperty({
+    type: 'string',
+    transition: true,
+    expression: { parameters: ['zoom', 'feature'] }
+  }),
+  'fill-extrusion-height': new DataDrivenProperty({
+    type: 'number',
+    default: 0,
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom', 'feature'] }
+  }),
+  'fill-extrusion-base': new DataDrivenProperty({
+    type: 'number',
+    default: 0,
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom', 'feature'] }
+  }),
+  'fill-extrusion-vertical-gradient': new DataConstantProperty({
+    type: 'boolean',
+    default: true,
+    expression: { parameters: ['zoom'] }
+  })
+});
+
+module.exports = { paint };

package/src/style/style_layer/fill_style_layer.js

@@ -0,0 +1,46 @@
+const StyleLayer = require('../style_layer');
+
+const FillBucket = require('../../data/bucket/fill_bucket');
+const { polygonIntersectsMultiPolygon } = require('../../util/intersection_tests');
+const { translateDistance, translate } = require('../query_utils');
+const properties = require('./fill_style_layer_properties');
+
+class FillStyleLayer extends StyleLayer {
+  constructor(layer) {
+    super(layer, properties);
+  }
+
+  recalculate(parameters) {
+    super.recalculate(parameters);
+
+    const outlineColor = this.paint._values['fill-outline-color'];
+    if (outlineColor.value.kind === 'constant' && outlineColor.value.value === undefined) {
+      this.paint._values['fill-outline-color'] = this.paint._values['fill-color'];
+    }
+  }
+
+  createBucket(parameters) {
+    return new FillBucket(parameters);
+  }
+
+  queryRadius() {
+    return translateDistance(this.paint.get('fill-translate'));
+  }
+
+  queryIntersectsFeature(queryGeometry, feature, featureState, geometry, zoom, transform, pixelsToTileUnits) {
+    const translatedPolygon = translate(
+      queryGeometry,
+      this.paint.get('fill-translate'),
+      this.paint.get('fill-translate-anchor'),
+      transform.angle,
+      pixelsToTileUnits
+    );
+    return polygonIntersectsMultiPolygon(translatedPolygon, geometry);
+  }
+
+  isTileClipped() {
+    return true;
+  }
+}
+
+module.exports = FillStyleLayer;

package/src/style/style_layer/fill_style_layer_properties.js

@@ -0,0 +1,45 @@
+// This file is generated. Edit layer-properties.js.ejs, then run `make generate-style-code`.
+
+const { Properties, CrossFadedDataDrivenProperty, DataConstantProperty, DataDrivenProperty } = require('../properties');
+
+const paint = new Properties({
+  'fill-antialias': new DataConstantProperty({ type: 'boolean', default: true, expression: { parameters: ['zoom'] } }),
+  'fill-opacity': new DataDrivenProperty({
+    type: 'number',
+    default: 1,
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom', 'feature'] }
+  }),
+  'fill-color': new DataDrivenProperty({
+    type: 'color',
+    default: '#000000',
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom', 'feature'] }
+  }),
+  'fill-outline-color': new DataDrivenProperty({
+    type: 'color',
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom', 'feature'] }
+  }),
+  'fill-translate': new DataConstantProperty({
+    type: 'array',
+    value: 'number',
+    length: 2,
+    default: [0, 0],
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom'] }
+  }),
+  'fill-translate-anchor': new DataConstantProperty({
+    type: 'enum',
+    values: ['map', 'viewport'],
+    default: 'map',
+    expression: { parameters: ['zoom'] }
+  }),
+  'fill-pattern': new CrossFadedDataDrivenProperty({
+    type: 'string',
+    transition: true,
+    expression: { parameters: ['zoom', 'feature'] }
+  })
+});
+
+module.exports = { paint };

package/src/style/style_layer/heatmap_style_layer.js

@@ -0,0 +1,51 @@
+const StyleLayer = require('../style_layer');
+
+const HeatmapBucket = require('../../data/bucket/heatmap_bucket');
+const properties = require('./heatmap_style_layer_properties');
+const renderColorRamp = require('../../util/color_ramp');
+
+class HeatmapStyleLayer extends StyleLayer {
+  createBucket(options) {
+    return new HeatmapBucket(options);
+  }
+
+  constructor(layer) {
+    super(layer, properties);
+
+    // make sure color ramp texture is generated for default heatmap color too
+    this._updateColorRamp();
+  }
+
+  _handleSpecialPaintPropertyUpdate(name) {
+    if (name === 'heatmap-color') {
+      this._updateColorRamp();
+    }
+  }
+
+  _updateColorRamp() {
+    const expression = this._transitionablePaint._values['heatmap-color'].value.expression;
+    this.colorRamp = renderColorRamp(expression, 'heatmapDensity');
+    this.colorRampTexture = null;
+  }
+
+  resize() {
+    if (this.heatmapFbo) {
+      this.heatmapFbo.destroy();
+      this.heatmapFbo = null;
+    }
+  }
+
+  queryRadius() {
+    return 0;
+  }
+
+  queryIntersectsFeature() {
+    return false;
+  }
+
+  hasOffscreenPass() {
+    return this.paint.get('heatmap-opacity') !== 0 && this.visibility !== 'none';
+  }
+}
+
+module.exports = HeatmapStyleLayer;

package/src/style/style_layer/heatmap_style_layer_properties.js

@@ -0,0 +1,52 @@
+// This file is generated. Edit layer-properties.js.ejs, then run `make generate-style-code`.
+
+const { Properties, ColorRampProperty, DataConstantProperty, DataDrivenProperty } = require('../properties');
+
+const paint = new Properties({
+  'heatmap-radius': new DataDrivenProperty({
+    type: 'number',
+    default: 30,
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom', 'feature'] }
+  }),
+  'heatmap-weight': new DataDrivenProperty({
+    type: 'number',
+    default: 1,
+    expression: { interpolated: true, parameters: ['zoom', 'feature'] }
+  }),
+  'heatmap-intensity': new DataConstantProperty({
+    type: 'number',
+    default: 1,
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom'] }
+  }),
+  'heatmap-color': new ColorRampProperty({
+    type: 'color',
+    default: [
+      'interpolate',
+      ['linear'],
+      ['heatmap-density'],
+      0,
+      'rgba(0, 0, 255, 0)',
+      0.1,
+      'royalblue',
+      0.3,
+      'cyan',
+      0.5,
+      'lime',
+      0.7,
+      'yellow',
+      1,
+      'red'
+    ],
+    expression: { interpolated: true, parameters: ['heatmap-density'] }
+  }),
+  'heatmap-opacity': new DataConstantProperty({
+    type: 'number',
+    default: 1,
+    transition: true,
+    expression: { interpolated: true, parameters: ['zoom'] }
+  })
+});
+
+module.exports = { paint };

package/src/style/style_layer/hillshade_style_layer.js

@@ -0,0 +1,15 @@
+const StyleLayer = require('../style_layer');
+
+const properties = require('./hillshade_style_layer_properties');
+
+class HillshadeStyleLayer extends StyleLayer {
+  constructor(layer) {
+    super(layer, properties);
+  }
+
+  hasOffscreenPass() {
+    return this.paint.get('hillshade-exaggeration') !== 0 && this.visibility !== 'none';
+  }
+}
+
+module.exports = HillshadeStyleLayer;