@mapwhit/tilerenderer 1.2.1 → 1.3.0

package/src/style/query_utils.js

@@ -1,4 +1,8 @@
-import Point from '@mapbox/point-geometry';
+import glMatrix from '@mapbox/gl-matrix';
+import { polygonIntersectsBufferedPoint } from '@mapwhit/geometry';
+import { Point } from '@mapwhit/point-geometry';
+
+const { vec4 } = glMatrix;
 
 export function getMaximumPaintValue(property, layer, bucket) {
   const value = layer._paint.get(property).value;
@@ -18,16 +22,87 @@ export function translate(queryGeometry, translate, translateAnchor, bearing, pi
     return queryGeometry;
   }
 
-  const pt = Point.convert(translate)._mult(pixelsToTileUnits);
+  const pt = new Point(translate[0], translate[1])._mult(pixelsToTileUnits);
 
   if (translateAnchor === 'viewport') {
     pt._rotate(-bearing);
   }
 
-  const translated = [];
-  for (let i = 0; i < queryGeometry.length; i++) {
-    const point = queryGeometry[i];
-    translated.push(point.sub(pt));
+  pt;
+
+  return queryGeometry.map(point => point.sub(pt));
+}
+
+const circleIntersectionTests = new Map([
+  [
+    'map',
+    new Map([
+      [
+        'map',
+        ({ queryGeometry, point, size }) => {
+          return polygonIntersectsBufferedPoint(queryGeometry, point, size);
+        }
+      ],
+      [
+        'viewport',
+        ({ queryGeometry, point, pixelPosMatrix, size, transform }) => {
+          const projectedCenter = vec4.transformMat4([], [point.x, point.y, 0, 1], pixelPosMatrix);
+          const adjustedSize = (size * projectedCenter[3]) / transform.cameraToCenterDistance;
+          return polygonIntersectsBufferedPoint(queryGeometry, point, adjustedSize);
+        }
+      ]
+    ])
+  ],
+  [
+    'viewport',
+    new Map([
+      [
+        'map',
+        ({ queryGeometry, point, pixelPosMatrix, size, transform }) => {
+          const projectedCenter = vec4.transformMat4([], [point.x, point.y, 0, 1], pixelPosMatrix);
+          const adjustedSize = (size * transform.cameraToCenterDistance) / projectedCenter[3];
+          return polygonIntersectsBufferedPoint(queryGeometry, projectPoint(point, pixelPosMatrix), adjustedSize);
+        }
+      ],
+      [
+        'viewport',
+        ({ queryGeometry, point, pixelPosMatrix, size }) => {
+          return polygonIntersectsBufferedPoint(queryGeometry, projectPoint(point, pixelPosMatrix), size);
+        }
+      ]
+    ])
+  ]
+]);
+
+export function circleIntersection({
+  queryGeometry,
+  geometry,
+  pixelPosMatrix,
+  size,
+  transform,
+  pitchAlignment = 'map',
+  pitchScale = 'map'
+}) {
+  const intersectionTest = circleIntersectionTests.get(pitchAlignment).get(pitchScale);
+  const param = { queryGeometry, pixelPosMatrix, size, transform };
+  for (const ring of geometry) {
+    for (const point of ring) {
+      param.point = point;
+      if (intersectionTest(param)) {
+        return true;
+      }
+    }
   }
-  return translated;
+  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]);
+}
+
+export function projectQueryGeometry(queryGeometry, pixelPosMatrix) {
+  return queryGeometry.map(p => {
+    return projectPoint(p, pixelPosMatrix);
+  });
 }

package/src/style/style.js

@@ -41,6 +41,7 @@ class Style extends Evented {
     loadGlyphRange: this.loadGlyphRange.bind(this)
   });
   #layerIndex = new StyleLayerIndex();
+  #opsQueue = [];
 
   constructor(map, options = {}) {
     super();
@@ -89,7 +90,10 @@ class Style extends Evented {
   }
 
   setGlobalStateProperty(name, value) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.setGlobalStateProperty(name, value));
+      return;
+    }
 
     const newValue = value === null ? (this.stylesheet.state?.[name]?.default ?? null) : value;
 
@@ -107,7 +111,10 @@ class Style extends Evented {
   }
 
   setGlobalState(newStylesheetState) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.setGlobalState(newStylesheetState));
+      return;
+    }
 
     const changedGlobalStateRefs = [];
 
@@ -225,6 +232,9 @@ class Style extends Evented {
     this.light = this.stylesheet.light;
     this._light = new Light(this.light);
 
+    this.#opsQueue.forEach(op => op());
+    this.#opsQueue = [];
+
     this.fire(new Event('data', { dataType: 'style' }));
     this.fire(new Event('style.load'));
   }
@@ -301,12 +311,6 @@ class Style extends Evented {
     return false;
   }
 
-  _checkLoaded() {
-    if (!this._loaded) {
-      throw new Error('Style is not done loading');
-    }
-  }
-
   /**
    * Apply queued style updates in a batch and recalculate zoom-dependent paint properties.
    */
@@ -390,13 +394,18 @@ class Style extends Evented {
   }
 
   listImages() {
-    this._checkLoaded();
+    if (!this._loaded) {
+      return;
+    }
 
     return this.imageManager.listImages();
   }
 
   addSource(id, source) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.addSource(id, source));
+      return;
+    }
 
     if (this._sources[id] !== undefined) {
       throw new Error('There is already a source with this ID');
@@ -432,7 +441,10 @@ class Style extends Evented {
    * @throws {Error} if no source is found with the given ID
    */
   removeSource(id) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.removeSource(id));
+      return;
+    }
 
     if (this._sources[id] === undefined) {
       throw new Error('There is no source with this ID');
@@ -464,7 +476,10 @@ class Style extends Evented {
    * @param {GeoJSON|string} data GeoJSON source
    */
   setGeoJSONSourceData(id, data) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.setGeoJSONSourceData(id, data));
+      return;
+    }
 
     assert(this._sources[id] !== undefined, 'There is no source with this ID');
     const geojsonSource = this._sources[id].getSource();
@@ -519,7 +534,10 @@ class Style extends Evented {
    * @param {string} [before] ID of an existing layer to insert before
    */
   addLayer(layerObject, before) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.addLayer(layerObject, before));
+      return;
+    }
 
     const id = layerObject.id;
 
@@ -568,7 +586,10 @@ class Style extends Evented {
    * @param {string} [before] ID of an existing layer to insert before
    */
   moveLayer(id, before) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.moveLayer(id, before));
+      return;
+    }
     this._changed = true;
 
     const layer = this._layers.get(id);
@@ -593,7 +614,10 @@ class Style extends Evented {
    * @fires error
    */
   removeLayer(id) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.removeLayer(id));
+      return;
+    }
 
     const layer = this._layers.get(id);
     if (!layer) {
@@ -624,7 +648,10 @@ class Style extends Evented {
   }
 
   setLayerZoomRange(layerId, minzoom, maxzoom) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.setLayerZoomRange(layerId, minzoom, maxzoom));
+      return;
+    }
 
     const layer = this.getLayer(layerId);
     if (!layer) {
@@ -646,7 +673,10 @@ class Style extends Evented {
   }
 
   setFilter(layerId, filter) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.setFilter(layerId, filter));
+      return;
+    }
 
     const layer = this.getLayer(layerId);
     if (!layer) {
@@ -680,7 +710,10 @@ class Style extends Evented {
   }
 
   setLayoutProperty(layerId, name, value) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.setLayoutProperty(layerId, name, value));
+      return;
+    }
 
     const layer = this.getLayer(layerId);
     if (!layer) {
@@ -713,7 +746,10 @@ class Style extends Evented {
   }
 
   setPaintProperty(layerId, name, value) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.setPaintProperty(layerId, name, value));
+      return;
+    }
 
     const layer = this.getLayer(layerId);
     if (!layer) {
@@ -749,7 +785,10 @@ class Style extends Evented {
   }
 
   setFeatureState(feature, state) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.setFeatureState(feature, state));
+      return;
+    }
     const sourceId = feature.source;
     const sourceLayer = feature.sourceLayer;
     const sourceCache = this._sources[sourceId];
@@ -776,7 +815,10 @@ class Style extends Evented {
   }
 
   removeFeatureState(target, key) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.removeFeatureState(target, key));
+      return;
+    }
     const sourceId = target.source;
     const sourceCache = this._sources[sourceId];
 
@@ -802,7 +844,9 @@ class Style extends Evented {
   }
 
   getFeatureState(feature) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      return;
+    }
     const sourceId = feature.source;
     const sourceLayer = feature.sourceLayer;
     const sourceCache = this._sources[sourceId];
@@ -920,8 +964,9 @@ class Style extends Evented {
     }
 
     const sourceResults = [];
+    params = params ? { ...params, globalState: this._globalState } : { globalState: this._globalState };
     for (const id in this._sources) {
-      if (params.layers && !includedSources[id]) {
+      if (params?.layers && !includedSources[id]) {
         continue;
       }
       sourceResults.push(
@@ -948,7 +993,12 @@ class Style extends Evented {
 
   querySourceFeatures(sourceID, params) {
     const sourceCache = this._sources[sourceID];
-    return sourceCache ? querySourceFeatures(sourceCache, params) : [];
+    return sourceCache
+      ? querySourceFeatures(
+          sourceCache,
+          params ? { ...params, globalState: this._globalState } : { globalState: this._globalState }
+        )
+      : [];
   }
 
   getLight() {
@@ -956,7 +1006,10 @@ class Style extends Evented {
   }
 
   setLight(lightOptions) {
-    this._checkLoaded();
+    if (!this._loaded) {
+      this.#opsQueue.push(() => this.setLight(lightOptions));
+      return;
+    }
 
     const light = this._light.getLight();
     let _update = false;

package/src/style/style_layer/circle_style_layer.js

@@ -1,14 +1,15 @@
-import glMatrix from '@mapbox/gl-matrix';
-import Point from '@mapbox/point-geometry';
-import { polygonIntersectsBufferedPoint } from '@mapwhit/geometry';
 import CircleBucket from '../../data/bucket/circle_bucket.js';
-import { getMaximumPaintValue, translate, translateDistance } from '../query_utils.js';
+import {
+  circleIntersection,
+  getMaximumPaintValue,
+  projectQueryGeometry,
+  translate,
+  translateDistance
+} from '../query_utils.js';
 import StyleLayer from '../style_layer.js';
 import properties from './circle_style_layer_properties.js';
 
-const { vec4 } = glMatrix;
-
-class CircleStyleLayer extends StyleLayer {
+export default class CircleStyleLayer extends StyleLayer {
   constructor(layer, globalState) {
     super(layer, properties, globalState);
   }
@@ -51,48 +52,28 @@ class CircleStyleLayer extends StyleLayer {
     // // 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 pitchScale = this._paint.get('circle-pitch-scale');
     const pitchAlignment = this._paint.get('circle-pitch-alignment');
-    const alignWithMap = pitchAlignment === 'map';
-    const alignWithViewport = pitchAlignment === 'viewport';
-    const transformedPolygon = alignWithMap
-      ? translatedPolygon
-      : projectQueryGeometry(translatedPolygon, pixelPosMatrix);
-    const transformedSize = alignWithMap ? size * pixelsToTileUnits : size;
-    const adjustViewportToMap = pitchScale === 'viewport' && alignWithMap;
-    const adjustMapToViewport = pitchScale === 'map' && alignWithViewport;
-
-    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 (adjustViewportToMap) {
-          adjustedSize *= projectedCenter[3] / transform.cameraToCenterDistance;
-        } else if (adjustMapToViewport) {
-          adjustedSize *= transform.cameraToCenterDistance / projectedCenter[3];
-        }
-
-        if (polygonIntersectsBufferedPoint(transformedPolygon, transformedPoint, adjustedSize)) {
-          return true;
-        }
-      }
+    let transformedPolygon;
+    let transformedSize;
+    if (pitchAlignment === 'map') {
+      transformedPolygon = translatedPolygon;
+      transformedSize = size * pixelsToTileUnits;
+    } else {
+      transformedPolygon = projectQueryGeometry(translatedPolygon, pixelPosMatrix);
+      transformedSize = size;
     }
 
-    return false;
+    return circleIntersection({
+      queryGeometry: transformedPolygon,
+      geometry,
+      pixelPosMatrix,
+      size: transformedSize,
+      transform,
+      pitchAlignment,
+      pitchScale
+    });
   }
 }
-
-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);
-  });
-}
-
-export default CircleStyleLayer;

package/src/style/style_layer/fill_extrusion_style_layer.js

@@ -1,6 +1,6 @@
 import glMatrix from '@mapbox/gl-matrix';
-import Point from '@mapbox/point-geometry';
 import { polygonIntersectsMultiPolygon, polygonIntersectsPolygon } from '@mapwhit/geometry';
+import { clone, equals, sub } from '@mapwhit/point-geometry';
 import FillExtrusionBucket from '../../data/bucket/fill_extrusion_bucket.js';
 import { translate, translateDistance } from '../query_utils.js';
 import StyleLayer from '../style_layer.js';
@@ -45,11 +45,9 @@ export class FillExtrusionStyleLayer extends StyleLayer {
     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 projectedQueryGeometry = projectQueryGeometry(translatedPolygon, pixelPosMatrix, 0);
 
-    const projected = projectExtrusion(geometry, base, height, pixelPosMatrix);
-    const projectedBase = projected[0];
-    const projectedTop = projected[1];
+    const { projectedBase, projectedTop } = projectExtrusion(geometry, base, height, pixelPosMatrix);
     return checkIntersection(projectedBase, projectedTop, projectedQueryGeometry);
   }
 }
@@ -72,7 +70,7 @@ export function getIntersectionDistance(projectedQueryGeometry, projectedFace) {
     let i = 0;
     const a = projectedFace[i++];
     let b;
-    while (!b || a.equals(b)) {
+    while (!b || equals(a, b)) {
       b = projectedFace[i++];
       if (!b) {
         return Number.POSITIVE_INFINITY;
@@ -84,9 +82,9 @@ export function getIntersectionDistance(projectedQueryGeometry, projectedFace) {
       const c = projectedFace[i];
       const p = projectedQueryGeometry[0];
 
-      const ab = b.sub(a);
-      const ac = c.sub(a);
-      const ap = p.sub(a);
+      const ab = sub(clone(b), a);
+      const ac = sub(clone(c), a);
+      const ap = sub(clone(p), a);
 
       const dotABAB = dot(ab, ab);
       const dotABAC = dot(ab, ac);
@@ -153,8 +151,8 @@ function checkIntersection(projectedBase, projectedTop, projectedQueryGeometry)
  * performance improvement.
  */
 function projectExtrusion(geometry, zBase, zTop, m) {
-  const projectedBase = [];
-  const projectedTop = [];
+  const projectedBase = new Array(geometry.length);
+  const projectedTop = new Array(geometry.length);
 
   const baseXZ = m[8] * zBase;
   const baseYZ = m[9] * zBase;
@@ -165,12 +163,12 @@ function projectExtrusion(geometry, zBase, zTop, m) {
   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;
+  for (let i = 0; i < geometry.length; i++) {
+    const ring = geometry[i];
+    const ringBase = new Array(ring.length);
+    const ringTop = new Array(ring.length);
+    for (let j = 0; j < ring.length; j++) {
+      const { x, y } = ring[j];
 
       const sX = m[0] * x + m[4] * y + m[12];
       const sY = m[1] * x + m[5] * y + m[13];
@@ -181,32 +179,27 @@ function projectExtrusion(geometry, zBase, zTop, m) {
       const baseY = sY + baseYZ;
       const baseZ = sZ + baseZZ;
       const baseW = sW + baseWZ;
+      ringBase[j] = { x: baseX / baseW, y: baseY / baseW, z: baseZ / baseW };
 
       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);
+      ringTop[j] = { x: topX / topW, y: topY / topW, z: topZ / topW };
     }
-    projectedBase.push(ringBase);
-    projectedTop.push(ringTop);
+    projectedBase[i] = ringBase;
+    projectedTop[i] = ringTop;
   }
-  return [projectedBase, projectedTop];
+  return { projectedBase, projectedTop };
 }
 
-function projectQueryGeometry(queryGeometry, pixelPosMatrix, transform, z) {
-  const projectedQueryGeometry = [];
-  for (const p of queryGeometry) {
-    const v = [p.x, p.y, z, 1];
+function projectQueryGeometry(queryGeometry, pixelPosMatrix, z) {
+  const projectedQueryGeometry = new Array(queryGeometry.length);
+  for (let i = 0; i < queryGeometry.length; i++) {
+    const { x, y } = queryGeometry[i];
+    const v = [x, y, z, 1];
     vec4.transformMat4(v, v, pixelPosMatrix);
-    projectedQueryGeometry.push(new Point(v[0] / v[3], v[1] / v[3]));
+    projectedQueryGeometry[i] = { x: v[0] / v[3], y: v[1] / v[3] };
   }
   return projectedQueryGeometry;
 }

package/src/style/style_layer/heatmap_style_layer.js

@@ -1,9 +1,10 @@
 import HeatmapBucket from '../../data/bucket/heatmap_bucket.js';
 import renderColorRamp from '../../util/color_ramp.js';
+import { circleIntersection, getMaximumPaintValue } from '../query_utils.js';
 import StyleLayer from '../style_layer.js';
 import properties from './heatmap_style_layer_properties.js';
 
-class HeatmapStyleLayer extends StyleLayer {
+export default class HeatmapStyleLayer extends StyleLayer {
   createBucket(options) {
     return new HeatmapBucket(options);
   }
@@ -34,17 +35,30 @@ class HeatmapStyleLayer extends StyleLayer {
     }
   }
 
-  queryRadius() {
-    return 0;
+  queryRadius(bucket) {
+    return getMaximumPaintValue('heatmap-radius', this, bucket);
   }
 
-  queryIntersectsFeature() {
-    return false;
+  queryIntersectsFeature(
+    queryGeometry,
+    feature,
+    featureState,
+    geometry,
+    zoom,
+    transform,
+    pixelsToTileUnits,
+    pixelPosMatrix
+  ) {
+    return circleIntersection({
+      queryGeometry,
+      geometry,
+      pixelPosMatrix,
+      size: this._paint.get('heatmap-radius').evaluate(feature, featureState) * pixelsToTileUnits,
+      transform
+    });
   }
 
   hasOffscreenPass() {
     return this._paint.get('heatmap-opacity') !== 0 && !this.isHidden();
   }
 }
-
-export default HeatmapStyleLayer;

package/src/style/style_layer/line_style_layer.js

@@ -1,5 +1,5 @@
-import Point from '@mapbox/point-geometry';
 import { polygonIntersectsBufferedMultiLine } from '@mapwhit/geometry';
+import { add, clone, div, mult, perp, sub, unit } from '@mapwhit/point-geometry';
 import LineBucket from '../../data/bucket/line_bucket.js';
 import renderColorRamp from '../../util/color_ramp.js';
 import EvaluationParameters from '../evaluation_parameters.js';
@@ -111,22 +111,22 @@ function offsetLine(rings, offset) {
     newRings[k] = newRing;
 
     let b = ring[0];
-    let aToB = new Point(0, 0);
+    let aToB = { x: 0, y: 0 };
     for (let i = 0; i < ring.length - 1; i++) {
       const c = ring[i + 1];
-      const bToC = c.sub(b)._unit()._perp();
-      const extrude = aToB._add(bToC)._unit();
+      const bToC = perp(unit(sub(clone(c), b)));
+      const extrude = unit(add(aToB, bToC));
       const cosHalfAngle = extrude.x * bToC.x + extrude.y * bToC.y;
       if (cosHalfAngle !== 0) {
-        extrude._div(cosHalfAngle);
+        div(extrude, cosHalfAngle);
       }
-      newRing[i] = extrude._mult(offset)._add(b);
+      newRing[i] = add(mult(extrude, offset), b);
 
       b = c;
       aToB = bToC;
     }
 
-    newRing[ring.length - 1] = aToB._unit()._mult(offset)._add(b);
+    newRing[ring.length - 1] = add(mult(unit(aToB), offset), b);
   }
   return newRings;
 }

package/src/style/style_layer.js

@@ -35,10 +35,10 @@ class StyleLayer extends Evented {
       this.source = layer.source;
       this['source-layer'] = this.sourceLayer = layer['source-layer'];
       this.filter = layer.filter;
-      this._featureFilter = featureFilter(layer.filter);
+      this._featureFilter = featureFilter(layer.filter, globalState);
     }
 
-    this._featureFilter ??= featureFilter.addGlobalStateRefs(() => true);
+    this._featureFilter ??= featureFilter(undefined, globalState);
 
     if (properties.layout) {
       this._unevaluatedLayout = new Layout(properties.layout, globalState);
@@ -59,7 +59,7 @@ class StyleLayer extends Evented {
   setFilter(filter) {
     this.#key = undefined;
     this.filter = filter;
-    this._featureFilter = featureFilter(filter);
+    this._featureFilter.setValue(filter);
   }
 
   _setZoomRange(minzoom, maxzoom) {